update shared filter components

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

@@ -0,0 +1,15 @@
+import { parseAsString, useQueryState } from 'nuqs';
+
+import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
+
+export const useMusicFolderIdFilter = (defaultValue?: string) => {
+    const [musicFolderId, setMusicFolderId] = useQueryState(
+        FILTER_KEYS.SHARED.MUSIC_FOLDER_ID,
+        defaultValue ? parseAsString.withDefault(defaultValue) : parseAsString,
+    );
+
+    return {
+        [FILTER_KEYS.SHARED.MUSIC_FOLDER_ID]: musicFolderId ?? undefined,
+        setMusicFolderId,
+    };
+};

src/renderer/features/shared/hooks/use-search-term-filter.ts

@@ -0,0 +1,19 @@
+import { useDebouncedValue } from '@mantine/hooks';
+import { parseAsString, useQueryState } from 'nuqs';
+
+import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
+
+export const useSearchTermFilter = (defaultValue?: string) => {
+    const [searchTerm, setSearchTerm] = useQueryState(
+        FILTER_KEYS.SHARED.SEARCH_TERM,
+        defaultValue ? parseAsString.withDefault(defaultValue) : parseAsString,
+    );
+
+    const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 300);
+
+    return {
+        [FILTER_KEYS.SHARED.SEARCH_TERM]: debouncedSearchTerm ?? undefined,
+        rawSearchTerm: searchTerm ?? undefined,
+        setSearchTerm,
+    };
+};

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

@@ -0,0 +1,15 @@
+import { parseAsString, useQueryState } from 'nuqs';
+
+import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
+
+export const useSortByFilter = <TSortBy>(defaultValue?: string) => {
+    const [sortBy, setSortBy] = useQueryState(
+        FILTER_KEYS.SHARED.SORT_BY,
+        defaultValue ? parseAsString.withDefault(defaultValue) : parseAsString,
+    );
+
+    return {
+        [FILTER_KEYS.SHARED.SORT_BY]: (sortBy as TSortBy) ?? undefined,
+        setSortBy,
+    };
+};

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

@@ -0,0 +1,16 @@
+import { parseAsString, useQueryState } from 'nuqs';
+
+import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
+import { SortOrder } from '/@/shared/types/domain-types';
+
+export const useSortOrderFilter = (defaultValue?: string) => {
+    const [sortOrder, setSortOrder] = useQueryState(
+        FILTER_KEYS.SHARED.SORT_ORDER,
+        defaultValue ? parseAsString.withDefault(defaultValue) : parseAsString,
+    );
+
+    return {
+        [FILTER_KEYS.SHARED.SORT_ORDER]: (sortOrder as SortOrder) ?? undefined,
+        setSortOrder,
+    };
+};