update query persistence to hooks

src/renderer/features/shared/components/list-filters.tsx

@@ -30,7 +30,11 @@ export const ListFilters = ({ isActive, itemType }: ListFiltersProps) => {
     return (
         <>
             <FilterButton isActive={isActive} onClick={handlers.toggle} />
-            <Modal handlers={handlers} opened={isOpen} title={t('common.filters')}>
+            <Modal
+                handlers={handlers}
+                opened={isOpen}
+                title={t('common.filters', { postProcess: 'sentenceCase' })}
+            >
                 <FilterComponent />
             </Modal>
         </>

src/renderer/features/shared/components/list-music-folder-dropdown.tsx

@@ -2,12 +2,10 @@ import { useQuery } from '@tanstack/react-query';
 
 import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import { FolderButton } from '/@/renderer/features/shared/components/folder-button';
-import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
+import { useMusicFolderIdFilter } from '/@/renderer/features/shared/hooks/use-music-folder-id-filter';
 import { useCurrentServer } from '/@/renderer/store';
 import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
-import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
 import { ItemListKey } from '/@/shared/types/types';
-import { useMusicFolderIdFilter } from '/@/renderer/features/shared/hooks/use-music-folder-id-filter';
 
 interface ListMusicFolderDropdownProps {
     listKey: ItemListKey;
@@ -19,22 +17,15 @@ export const ListMusicFolderDropdown = ({ listKey }: ListMusicFolderDropdownProp
         sharedQueries.musicFolders({ query: null, serverId: server.id }),
     );
 
-    const [persisted, setPersisted] = useLocalStorage({
-        defaultValue: '',
-        key: getPersistenceKey(server.id, listKey),
-    });
-
-    const { musicFolderId, setMusicFolderId } = useMusicFolderIdFilter(persisted);
+    const { musicFolderId, setMusicFolderId } = useMusicFolderIdFilter('', listKey);
 
     const handleSetMusicFolder = (e: string) => {
         if (e === musicFolderId) {
             setMusicFolderId('');
-            setPersisted('');
             return;
         }
 
         setMusicFolderId(e);
-        setPersisted(e);
     };
 
     return (
@@ -57,7 +48,3 @@ export const ListMusicFolderDropdown = ({ listKey }: ListMusicFolderDropdownProp
         </DropdownMenu>
     );
 };
-
-const getPersistenceKey = (serverId: string, listKey: ItemListKey) => {
-    return `${serverId}-list-${listKey}-${FILTER_KEYS.SHARED.MUSIC_FOLDER_ID}`;
-};

src/renderer/features/shared/components/list-sort-by-dropdown.tsx

@@ -1,9 +1,8 @@
 import i18n from '/@/i18n/i18n';
-import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
+import { useSortByFilter } from '/@/renderer/features/shared/hooks/use-sort-by-filter';
 import { useCurrentServer } from '/@/renderer/store';
 import { Button } from '/@/shared/components/button/button';
 import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
-import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
 import {
     AlbumListSort,
     LibraryItem,
@@ -12,7 +11,6 @@ import {
     SortOrder,
 } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
-import { useSortByFilter } from '/@/renderer/features/shared/hooks/use-sort-by-filter';
 
 interface ListSortByDropdownProps {
     defaultSortByValue: string;
@@ -31,19 +29,13 @@ export const ListSortByDropdown = ({
 }: ListSortByDropdownProps) => {
     const server = useCurrentServer();
 
-    const [persisted, setPersisted] = useLocalStorage({
-        defaultValue: defaultSortByValue,
-        key: getPersistenceKey(server.id, listKey),
-    });
-
-    const { sortBy, setSortBy } = useSortByFilter(persisted || defaultSortByValue);
+    const { setSortBy, sortBy } = useSortByFilter(defaultSortByValue, listKey);
 
     const sortByLabel =
         (itemType && FILTERS[itemType][server.type].find((f) => f.value === sortBy)?.name) || '—';
 
     const handleSortByChange = (sortBy: string) => {
         setSortBy(sortBy);
-        setPersisted(sortBy);
         onChange?.(sortBy);
     };
 
@@ -369,7 +361,3 @@ const FILTERS: Partial<Record<LibraryItem, any>> = {
     [LibraryItem.ALBUM]: ALBUM_LIST_FILTERS,
     [LibraryItem.SONG]: SONG_LIST_FILTERS,
 };
-
-const getPersistenceKey = (serverId: string, listKey: ItemListKey) => {
-    return `${serverId}-list-${listKey}-${FILTER_KEYS.SHARED.SORT_BY}`;
-};

src/renderer/features/shared/components/list-sort-order-toggle-button.tsx

@@ -1,36 +1,25 @@
 import { OrderToggleButton } from '/@/renderer/features/shared/components/order-toggle-button';
 import { useSortOrderFilter } from '/@/renderer/features/shared/hooks/use-sort-order-filter';
-import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
-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';
 
 interface ListSortOrderToggleButtonProps {
+    defaultSortOrder: SortOrder;
     listKey: ItemListKey;
 }
 
-export const ListSortOrderToggleButton = ({ listKey }: ListSortOrderToggleButtonProps) => {
-    const server = useCurrentServer();
-
-    const [persisted, setPersisted] = useLocalStorage({
-        defaultValue: SortOrder.ASC,
-        key: getPersistenceKey(server.id, listKey),
-    });
-
-    const { sortOrder, setSortOrder } = useSortOrderFilter(persisted || SortOrder.ASC);
+export const ListSortOrderToggleButton = ({
+    defaultSortOrder,
+    listKey,
+}: ListSortOrderToggleButtonProps) => {
+    const { setSortOrder, sortOrder } = useSortOrderFilter(defaultSortOrder, listKey);
 
     const handleToggleSortOrder = () => {
         const newSortOrder = sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
         setSortOrder(newSortOrder);
-        setPersisted(newSortOrder);
     };
 
     return (
         <OrderToggleButton onToggle={handleToggleSortOrder} sortOrder={sortOrder as SortOrder} />
     );
 };
-
-const getPersistenceKey = (serverId: string, listKey: ItemListKey) => {
-    return `${serverId}-list-${listKey}-${FILTER_KEYS.SHARED.SORT_ORDER}`;
-};

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

@@ -1,15 +1,46 @@
 import { parseAsString, useQueryState } from 'nuqs';
 
 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 useMusicFolderIdFilter = (defaultValue: null | string, listKey: ItemListKey) => {
+    const server = useCurrentServer();
+
+    const [persisted, setPersisted] = useLocalStorage({
+        defaultValue: '',
+        key: getPersistenceKey(server.id, listKey),
+    });
 
-export const useMusicFolderIdFilter = (defaultValue?: string) => {
     const [musicFolderId, setMusicFolderId] = useQueryState(
         FILTER_KEYS.SHARED.MUSIC_FOLDER_ID,
-        defaultValue ? parseAsString.withDefault(defaultValue) : parseAsString,
+        getDefaultMusicFolderId(defaultValue, persisted),
     );
 
+    const handleSetMusicFolderId = (musicFolderId: string) => {
+        setMusicFolderId(musicFolderId);
+        setPersisted(musicFolderId);
+    };
+
     return {
         [FILTER_KEYS.SHARED.MUSIC_FOLDER_ID]: musicFolderId ?? undefined,
-        setMusicFolderId,
+        setMusicFolderId: handleSetMusicFolderId,
     };
 };
+
+const getDefaultMusicFolderId = (defaultValue: null | string, persisted: null | string) => {
+    if (persisted) {
+        return parseAsString.withDefault(persisted);
+    }
+
+    if (defaultValue) {
+        return parseAsString.withDefault(defaultValue);
+    }
+
+    return parseAsString;
+};
+
+const getPersistenceKey = (serverId: string, listKey: ItemListKey) => {
+    return `${serverId}-list-${listKey}-${FILTER_KEYS.SHARED.MUSIC_FOLDER_ID}`;
+};

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

@@ -1,15 +1,46 @@
 import { parseAsString, useQueryState } from 'nuqs';
 
 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 [persisted, setPersisted] = useLocalStorage({
+        defaultValue: defaultValue,
+        key: getPersistenceKey(server.id, listKey),
+    });
 
-export const useSortByFilter = <TSortBy>(defaultValue: string) => {
     const [sortBy, setSortBy] = useQueryState(
         FILTER_KEYS.SHARED.SORT_BY,
-        defaultValue ? parseAsString.withDefault(defaultValue) : parseAsString,
+        getDefaultSortBy(defaultValue, persisted),
     );
 
+    const handleSetSortBy = (sortBy: string) => {
+        setSortBy(sortBy);
+        setPersisted(sortBy);
+    };
+
     return {
         [FILTER_KEYS.SHARED.SORT_BY]: sortBy as TSortBy,
-        setSortBy,
+        setSortBy: handleSetSortBy,
     };
 };
+
+const getDefaultSortBy = (defaultValue: null | string, persisted: null | string) => {
+    if (persisted) {
+        return parseAsString.withDefault(persisted);
+    }
+
+    if (defaultValue) {
+        return parseAsString.withDefault(defaultValue);
+    }
+
+    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,16 +1,47 @@
 import { parseAsString, useQueryState } from 'nuqs';
 
 import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
+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 [persisted, setPersisted] = useLocalStorage({
+        defaultValue: SortOrder.ASC,
+        key: getPersistenceKey(server.id, listKey),
+    });
 
-export const useSortOrderFilter = (defaultValue: string) => {
     const [sortOrder, setSortOrder] = useQueryState(
         FILTER_KEYS.SHARED.SORT_ORDER,
-        defaultValue ? parseAsString.withDefault(defaultValue) : parseAsString,
+        getDefaultSortOrder(defaultValue, persisted),
     );
 
+    const handleSetSortOrder = (sortOrder: SortOrder) => {
+        setSortOrder(sortOrder);
+        setPersisted(sortOrder);
+    };
+
     return {
         [FILTER_KEYS.SHARED.SORT_ORDER]: sortOrder as SortOrder,
-        setSortOrder,
+        setSortOrder: handleSetSortOrder,
     };
 };
+
+const getDefaultSortOrder = (defaultValue: null | string, persisted: null | string) => {
+    if (persisted) {
+        return parseAsString.withDefault(persisted);
+    }
+
+    if (defaultValue) {
+        return parseAsString.withDefault(defaultValue);
+    }
+
+    return parseAsString;
+};
+
+const getPersistenceKey = (serverId: string, listKey: ItemListKey) => {
+    return `${serverId}-list-${listKey}-${FILTER_KEYS.SHARED.SORT_ORDER}`;
+};