refactor filter persistence to one key

src/renderer/features/shared/hooks/use-list-filter-persistence.ts

@@ -0,0 +1,38 @@
+import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
+import { ItemListKey } from '/@/shared/types/types';
+
+export interface ListFilterPersistence {
+    [listKey: string]: {
+        [filterKey: string]: string | undefined;
+    };
+}
+
+const getPersistenceKey = (serverId: string) => {
+    return `${serverId}-filters`;
+};
+
+export const useListFilterPersistence = (serverId: string, listKey: ItemListKey) => {
+    const [persistedFilters, setPersistedFilters] = useLocalStorage<ListFilterPersistence>({
+        defaultValue: {},
+        key: getPersistenceKey(serverId),
+    });
+
+    const getFilter = (filterKey: string): string | undefined => {
+        return persistedFilters?.[listKey]?.[filterKey];
+    };
+
+    const setFilter = (filterKey: string, value: string) => {
+        setPersistedFilters((prev) => ({
+            ...prev,
+            [listKey]: {
+                ...prev[listKey],
+                [filterKey]: value,
+            },
+        }));
+    };
+
+    return {
+        getFilter,
+        setFilter,
+    };
+};

src/renderer/features/shared/hooks/use-music-folder-id-filter.ts

@@ -1,17 +1,15 @@
 import { parseAsString, useQueryState } from 'nuqs';
 
 import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
+import { useListFilterPersistence } from '/@/renderer/features/shared/hooks/use-list-filter-persistence';
 import { useCurrentServer } from '/@/renderer/store';
-import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
 import { ItemListKey } from '/@/shared/types/types';
 
 export const useMusicFolderIdFilter = (defaultValue: null | string, listKey: ItemListKey) => {
     const server = useCurrentServer();
+    const { getFilter, setFilter } = useListFilterPersistence(server.id, listKey);
 
-    const [persisted, setPersisted] = useLocalStorage({
+    const persisted = getFilter(FILTER_KEYS.SHARED.MUSIC_FOLDER_ID);
-        defaultValue: '',
-        key: getPersistenceKey(server.id, listKey),
-    });
 
     const [musicFolderId, setMusicFolderId] = useQueryState(
         FILTER_KEYS.SHARED.MUSIC_FOLDER_ID,
@@ -20,7 +18,7 @@ export const useMusicFolderIdFilter = (defaultValue: null | string, listKey: Ite
 
     const handleSetMusicFolderId = (musicFolderId: string) => {
         setMusicFolderId(musicFolderId);
-        setPersisted(musicFolderId);
+        setFilter(FILTER_KEYS.SHARED.MUSIC_FOLDER_ID, musicFolderId);
     };
 
     return {
@@ -29,7 +27,7 @@ export const useMusicFolderIdFilter = (defaultValue: null | string, listKey: Ite
     };
 };
 
-const getDefaultMusicFolderId = (defaultValue: null | string, persisted: null | string) => {
+const getDefaultMusicFolderId = (defaultValue: null | string, persisted: string | undefined) => {
     if (persisted) {
         return parseAsString.withDefault(persisted);
     }
@@ -40,7 +38,3 @@ const getDefaultMusicFolderId = (defaultValue: null | string, persisted: null |
 
     return parseAsString;
 };
-
-const getPersistenceKey = (serverId: string, listKey: ItemListKey) => {
-    return `${serverId}-list-${listKey}-${FILTER_KEYS.SHARED.MUSIC_FOLDER_ID}`;
-};

src/renderer/features/shared/hooks/use-select-filter.ts

@@ -1,7 +1,7 @@
 import { parseAsString, useQueryState } from 'nuqs';
 
+import { useListFilterPersistence } from '/@/renderer/features/shared/hooks/use-list-filter-persistence';
 import { useCurrentServer } from '/@/renderer/store';
-import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
 import { ItemListKey } from '/@/shared/types/types';
 
 export const useSelectFilter = (
@@ -10,17 +10,15 @@ export const useSelectFilter = (
     listKey: ItemListKey,
 ) => {
     const server = useCurrentServer();
+    const { getFilter, setFilter } = useListFilterPersistence(server.id, listKey);
 
-    const [persisted, setPersisted] = useLocalStorage({
+    const persisted = getFilter(filterKey);
-        defaultValue: defaultValue || '',
-        key: getPersistenceKey(server.id, listKey, filterKey),
-    });
 
     const [value, setValue] = useQueryState(filterKey, getDefaultValue(defaultValue, persisted));
 
     const handleSetValue = (newValue: string) => {
         setValue(newValue);
-        setPersisted(newValue);
+        setFilter(filterKey, newValue);
     };
 
     return {
@@ -30,7 +28,7 @@ export const useSelectFilter = (
     };
 };
 
-const getDefaultValue = (defaultValue: null | string, persisted: null | string) => {
+const getDefaultValue = (defaultValue: null | string, persisted: string | undefined) => {
     if (persisted) {
         return parseAsString.withDefault(persisted);
     }
@@ -41,7 +39,3 @@ const getDefaultValue = (defaultValue: null | string, persisted: null | string)
 
     return parseAsString;
 };
-
-const getPersistenceKey = (serverId: string, listKey: ItemListKey, filterKey: string) => {
-    return `${serverId}-list-${listKey}-${filterKey}`;
-};

src/renderer/features/shared/hooks/use-sort-by-filter.ts

@@ -1,17 +1,15 @@
 import { parseAsString, useQueryState } from 'nuqs';
 
+import { useListFilterPersistence } from '/@/renderer/features/shared/hooks/use-list-filter-persistence';
 import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
 import { useCurrentServer } from '/@/renderer/store';
-import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
 import { ItemListKey } from '/@/shared/types/types';
 
 export const useSortByFilter = <TSortBy>(defaultValue: null | string, listKey: ItemListKey) => {
     const server = useCurrentServer();
+    const { getFilter, setFilter } = useListFilterPersistence(server.id, listKey);
 
-    const [persisted, setPersisted] = useLocalStorage({
+    const persisted = getFilter(FILTER_KEYS.SHARED.SORT_BY);
-        defaultValue: defaultValue,
-        key: getPersistenceKey(server.id, listKey),
-    });
 
     const [sortBy, setSortBy] = useQueryState(
         FILTER_KEYS.SHARED.SORT_BY,
@@ -20,7 +18,7 @@ export const useSortByFilter = <TSortBy>(defaultValue: null | string, listKey: I
 
     const handleSetSortBy = (sortBy: string) => {
         setSortBy(sortBy);
-        setPersisted(sortBy);
+        setFilter(FILTER_KEYS.SHARED.SORT_BY, sortBy);
     };
 
     return {
@@ -29,7 +27,7 @@ export const useSortByFilter = <TSortBy>(defaultValue: null | string, listKey: I
     };
 };
 
-const getDefaultSortBy = (defaultValue: null | string, persisted: null | string) => {
+const getDefaultSortBy = (defaultValue: null | string, persisted: string | undefined) => {
     if (persisted) {
         return parseAsString.withDefault(persisted);
     }
@@ -40,7 +38,3 @@ const getDefaultSortBy = (defaultValue: null | string, persisted: null | string)
 
     return parseAsString;
 };
-
-const getPersistenceKey = (serverId: string, listKey: ItemListKey) => {
-    return `${serverId}-list-${listKey}-${FILTER_KEYS.SHARED.SORT_BY}`;
-};

src/renderer/features/shared/hooks/use-sort-order-filter.ts

@@ -1,18 +1,16 @@
 import { parseAsString, useQueryState } from 'nuqs';
 
 import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
+import { useListFilterPersistence } from '/@/renderer/features/shared/hooks/use-list-filter-persistence';
 import { useCurrentServer } from '/@/renderer/store';
-import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
 import { SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
 
 export const useSortOrderFilter = (defaultValue: null | string, listKey: ItemListKey) => {
     const server = useCurrentServer();
+    const { getFilter, setFilter } = useListFilterPersistence(server.id, listKey);
 
-    const [persisted, setPersisted] = useLocalStorage({
+    const persisted = getFilter(FILTER_KEYS.SHARED.SORT_ORDER);
-        defaultValue: SortOrder.ASC,
-        key: getPersistenceKey(server.id, listKey),
-    });
 
     const [sortOrder, setSortOrder] = useQueryState(
         FILTER_KEYS.SHARED.SORT_ORDER,
@@ -21,7 +19,7 @@ export const useSortOrderFilter = (defaultValue: null | string, listKey: ItemLis
 
     const handleSetSortOrder = (sortOrder: SortOrder) => {
         setSortOrder(sortOrder);
-        setPersisted(sortOrder);
+        setFilter(FILTER_KEYS.SHARED.SORT_ORDER, sortOrder);
     };
 
     return {
@@ -30,7 +28,7 @@ export const useSortOrderFilter = (defaultValue: null | string, listKey: ItemLis
     };
 };
 
-const getDefaultSortOrder = (defaultValue: null | string, persisted: null | string) => {
+const getDefaultSortOrder = (defaultValue: null | string, persisted: string | undefined) => {
     if (persisted) {
         return parseAsString.withDefault(persisted);
     }
@@ -41,7 +39,3 @@ const getDefaultSortOrder = (defaultValue: null | string, persisted: null | stri
 
     return parseAsString;
 };
-
-const getPersistenceKey = (serverId: string, listKey: ItemListKey) => {
-    return `${serverId}-list-${listKey}-${FILTER_KEYS.SHARED.SORT_ORDER}`;
-};