diff --git a/apps/web/core/store/module_filter.store.ts b/apps/web/core/store/module_filter.store.ts index 62ac072cb..b3d19b90f 100644 --- a/apps/web/core/store/module_filter.store.ts +++ b/apps/web/core/store/module_filter.store.ts @@ -3,9 +3,15 @@ import { action, computed, observable, makeObservable, runInAction, reaction } f import { computedFn } from "mobx-utils"; // types import { TModuleDisplayFilters, TModuleFilters, TModuleFiltersByState } from "@plane/types"; +// helpers +import { storage } from "@/lib/local-storage"; // store import type { CoreRootStore } from "./root.store"; +// localStorage keys +const MODULE_DISPLAY_FILTERS_KEY = "module_display_filters"; +const MODULE_FILTERS_KEY = "module_filters"; + export interface IModuleFilterStore { // observables displayFilters: Record; @@ -57,6 +63,7 @@ export class ModuleFilterStore implements IModuleFilterStore { }); // root store this.rootStore = _rootStore; + // initialize display filters of the current project reaction( () => this.rootStore.router.projectId, @@ -66,8 +73,57 @@ export class ModuleFilterStore implements IModuleFilterStore { this.searchQuery = ""; } ); + + // Load initial data from localStorage after reactions are set up + this.loadFromLocalStorage(); } + /** + * @description Load filters from localStorage + */ + loadFromLocalStorage = () => { + try { + const displayFiltersData = storage.get(MODULE_DISPLAY_FILTERS_KEY); + const filtersData = storage.get(MODULE_FILTERS_KEY); + + runInAction(() => { + if (displayFiltersData) { + const parsed = JSON.parse(displayFiltersData); + if (typeof parsed === "object" && parsed !== null) { + this.displayFilters = parsed; + } + } + if (filtersData) { + const parsed = JSON.parse(filtersData); + if (typeof parsed === "object" && parsed !== null) { + this.filters = parsed; + } + } + }); + } catch (error) { + console.error("Failed to load module filters from localStorage:", error); + // Reset to defaults on error + runInAction(() => { + this.displayFilters = {}; + this.filters = {}; + }); + } + }; + + /** + * @description Save display filters to localStorage (debounced) + */ + saveDisplayFiltersToLocalStorage = () => { + storage.set(MODULE_DISPLAY_FILTERS_KEY, this.displayFilters); + }; + + /** + * @description Save filters to localStorage (debounced) + */ + saveFiltersToLocalStorage = () => { + storage.set(MODULE_FILTERS_KEY, this.filters); + }; + /** * @description get display filters of the current project */ @@ -130,6 +186,8 @@ export class ModuleFilterStore implements IModuleFilterStore { archived: {}, }; }); + this.saveDisplayFiltersToLocalStorage(); + this.saveFiltersToLocalStorage(); }; /** @@ -143,6 +201,7 @@ export class ModuleFilterStore implements IModuleFilterStore { set(this.displayFilters, [projectId, key], displayFilters[key as keyof TModuleDisplayFilters]); }); }); + this.saveDisplayFiltersToLocalStorage(); }; /** @@ -156,19 +215,24 @@ export class ModuleFilterStore implements IModuleFilterStore { set(this.filters, [projectId, state, key], filters[key as keyof TModuleFilters]); }); }); + this.saveFiltersToLocalStorage(); }; /** * @description update search query * @param {string} query */ - updateSearchQuery = (query: string) => (this.searchQuery = query); + updateSearchQuery = (query: string) => { + this.searchQuery = query; + }; /** * @description update archived search query * @param {string} query */ - updateArchivedModulesSearchQuery = (query: string) => (this.archivedModulesSearchQuery = query); + updateArchivedModulesSearchQuery = (query: string) => { + this.archivedModulesSearchQuery = query; + }; /** * @description clear all filters of a project @@ -179,5 +243,7 @@ export class ModuleFilterStore implements IModuleFilterStore { this.filters[projectId][state] = {}; this.displayFilters[projectId].favorites = false; }); + this.saveFiltersToLocalStorage(); + this.saveDisplayFiltersToLocalStorage(); }; }