feat: save filters into settings

package.json

@@ -1,32 +1,34 @@
 {
-	"name": "obsidian-vault-explorer",
-	"version": "0.0.9",
-	"description": "Explore your vault in visual format",
-	"main": "main.js",
-	"scripts": {
-		"dev": "node esbuild.config.mjs",
-		"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
-		"version": "node version-bump.mjs && git add manifest.json versions.json"
-	},
-	"keywords": [],
-	"author": "Trey Wallis",
-	"license": "MIT",
-	"devDependencies": {
-		"@types/bun": "latest",
-		"@types/node": "^16.11.6",
-		"@types/react": "^18.2.65",
-		"@types/react-dom": "^18.2.21",
-		"@typescript-eslint/eslint-plugin": "5.29.0",
-		"@typescript-eslint/parser": "5.29.0",
-		"builtin-modules": "3.3.0",
-		"esbuild": "0.17.3",
-		"obsidian": "latest",
-		"tslib": "2.4.0",
-		"typescript": "4.7.4"
-	},
-	"dependencies": {
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-virtuoso": "^4.7.2"
-	}
+  "name": "obsidian-vault-explorer",
+  "version": "0.0.9",
+  "description": "Explore your vault in visual format",
+  "main": "main.js",
+  "scripts": {
+    "dev": "node esbuild.config.mjs",
+    "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
+    "version": "node version-bump.mjs && git add manifest.json versions.json"
+  },
+  "keywords": [],
+  "author": "Trey Wallis",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/lodash": "^4.17.0",
+    "@types/node": "^16.11.6",
+    "@types/react": "^18.2.65",
+    "@types/react-dom": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "5.29.0",
+    "@typescript-eslint/parser": "5.29.0",
+    "builtin-modules": "3.3.0",
+    "esbuild": "0.17.3",
+    "obsidian": "latest",
+    "tslib": "2.4.0",
+    "typescript": "4.7.4"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-virtuoso": "^4.7.2"
+  }
 }

src/main.ts

@@ -5,6 +5,7 @@ import VaultExplorerSettingsTab from './obsidian/vault-explorer-settings-tab';
 
 import { VaultExplorerPluginSettings } from './types';
 import { VAULT_EXPLORER_VIEW } from './constants';
+import _ from 'lodash';
 
 
 const DEFAULT_SETTINGS: VaultExplorerPluginSettings = {
@@ -13,6 +14,11 @@ const DEFAULT_SETTINGS: VaultExplorerPluginSettings = {
 	sourcePropertyName: "source",
 	revisionPropertyName: "revision",
 	statusPropertyName: "status",
+	folderFilter: "",
+	searchFilter: "",
+	onlyFavorites: false,
+	onlyCreatedToday: false,
+	onlyModifiedToday: false,
 }
 
 export default class VaultExplorerPlugin extends Plugin {
@@ -21,9 +27,15 @@ export default class VaultExplorerPlugin extends Plugin {
 	async onload() {
 		await this.loadSettings();
 
+		const debounceSettingsChange = _.debounce(async (value: VaultExplorerPluginSettings) => {
+			this.settings = value;
+			await this.saveSettings();
+			//console.log("Settings saved", this.settings);
+		}, 1000);
+
 		this.registerView(
 			VAULT_EXPLORER_VIEW,
-			(leaf) => new VaultExplorerView(leaf, this.app, this.settings)
+			(leaf) => new VaultExplorerView(leaf, this.app, this.settings, debounceSettingsChange)
 		);
 
 		this.addRibbonIcon("map", "Vault Explorer", async () => {

src/obsidian/vault-explorer-view.tsx

@@ -6,22 +6,25 @@ import { createRoot, Root } from "react-dom/client";
 import { VAULT_EXPLORER_VIEW } from "src/constants";
 import ReactView from "src/react/index";
 import AppMountProvider from "src/react/app-mount-provider";
-import { VaultExplorerPluginSettings } from "src/types";
+import { onSettingsChange, VaultExplorerPluginSettings } from "src/types";
 
 export default class VaultExplorerView extends ItemView {
 	root: Root | null;
 	app: App;
 	settings: VaultExplorerPluginSettings;
+	onSettingsChange: onSettingsChange;
 
 	constructor(
 		leaf: WorkspaceLeaf,
 		app: App,
-		settings: VaultExplorerPluginSettings
+		settings: VaultExplorerPluginSettings,
+		onSettingsChange: onSettingsChange
 	) {
 		super(leaf);
 		this.root = null;
 		this.app = app;
 		this.settings = settings;
+		this.onSettingsChange = onSettingsChange;
 	}
 
 	getViewType(): string {
@@ -40,6 +43,7 @@ export default class VaultExplorerView extends ItemView {
 					app={this.app}
 					leaf={this.leaf}
 					settings={this.settings}
+					onSettingsChange={this.onSettingsChange}
 				>
 					<ReactView />
 				</AppMountProvider>

src/react/app-mount-provider.tsx

@@ -1,12 +1,13 @@
 import { App, WorkspaceLeaf } from "obsidian";
 
 import React from "react";
-import { VaultExplorerPluginSettings } from "src/types";
+import { VaultExplorerPluginSettings, onSettingsChange } from "src/types";
 
 interface ContextProps {
 	app: App;
 	leaf: WorkspaceLeaf;
 	settings: VaultExplorerPluginSettings;
+	onSettingsChange: onSettingsChange;
 }
 
 const MountContext = React.createContext<ContextProps | null>(null);
@@ -30,10 +31,13 @@ export default function AppMountProvider({
 	app,
 	leaf,
 	settings,
+	onSettingsChange,
 	children,
 }: Props) {
 	return (
-		<MountContext.Provider value={{ app, leaf, settings }}>
+		<MountContext.Provider
+			value={{ app, leaf, settings, onSettingsChange }}
+		>
 			{children}
 		</MountContext.Provider>
 	);

src/react/index.tsx

@@ -10,14 +10,40 @@ import Flex from "./flex";
 import Stack from "./stack";
 
 export default function ReactView() {
-	const [folderPath, setFolderPath] = React.useState<string | null>(null);
+	const [folderPath, setFolderPath] = React.useState<string>("");
 	const [search, setSearch] = React.useState<string>("");
 	const [onlyFavorites, setOnlyFavorites] = React.useState<boolean>(false);
 	const [onlyModifiedToday, setOnlyModifiedToday] =
 		React.useState<boolean>(false);
 	const [onlyCreatedToday, setOnlyCreatedToday] =
 		React.useState<boolean>(false);
-	const { app, settings } = useAppMount();
+	const { app, settings, onSettingsChange } = useAppMount();
+
+	React.useEffect(() => {
+		setFolderPath(settings.folderFilter);
+		setSearch(settings.searchFilter);
+		setOnlyFavorites(settings.onlyFavorites);
+		setOnlyModifiedToday(settings.onlyModifiedToday);
+		setOnlyCreatedToday(settings.onlyCreatedToday);
+	}, []);
+
+	React.useEffect(() => {
+		onSettingsChange({
+			...settings,
+			folderFilter: folderPath,
+			searchFilter: search,
+			onlyFavorites,
+			onlyModifiedToday,
+			onlyCreatedToday,
+		});
+	}, [
+		onSettingsChange,
+		folderPath,
+		search,
+		onlyFavorites,
+		onlyModifiedToday,
+		onlyCreatedToday,
+	]);
 
 	const {
 		favoritePropertyName,
@@ -138,7 +164,7 @@ export default function ReactView() {
 						onChange={(e) => setSearch(e.target.value)}
 					/>
 					<select
-						value={folderPath ?? ""}
+						value={folderPath}
 						onChange={(e) => setFolderPath(e.target.value)}
 					>
 						<option value="">Select a folder</option>

src/types.ts

@@ -4,4 +4,11 @@ export interface VaultExplorerPluginSettings {
 	sourcePropertyName: string;
 	revisionPropertyName: string;
 	statusPropertyName: string;
+	folderFilter: string;
+	searchFilter: string;
+	onlyFavorites: boolean;
+	onlyCreatedToday: boolean;
+	onlyModifiedToday: boolean;
 }
+
+export type onSettingsChange = (value: VaultExplorerPluginSettings) => void;