Try to fix collection search... (#945)

ShokoAnime · Jul 9, 2024 · 5fd0a0e · 5fd0a0e
1 parent 4215afc
commit 5fd0a0e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 54 deletions.
diff --git a/src/components/Collection/TitleOptions.tsx b/src/components/Collection/TitleOptions.tsx
@@ -20,8 +20,7 @@ type Props = {
   groupSearch: string;
   mode: string;
   seriesSearch: string;
-  setGroupSearch: Dispatch<SetStateAction<string>>;
-  setSeriesSearch: Dispatch<SetStateAction<string>>;
+  setSearch: Dispatch<SetStateAction<string>>;
   toggleFilterSidebar: () => void;
   toggleMode: () => void;
 };
@@ -38,8 +37,7 @@ const TitleOptions = (props: Props) => {
     isSeries,
     mode,
     seriesSearch,
-    setGroupSearch,
-    setSeriesSearch,
+    setSearch,
     toggleFilterSidebar,
     toggleMode,
   } = props;
@@ -56,7 +54,7 @@ const TitleOptions = (props: Props) => {
           placeholder="Search..."
           startIcon={mdiMagnify}
           value={isSeries ? seriesSearch : groupSearch}
-          onChange={e => (isSeries ? setSeriesSearch(e.target.value) : setGroupSearch(e.target.value))}
+          onChange={e => setSearch(e.target.value)}
         />
         {!isSeries && (
           <>

diff --git a/src/core/react-query/filter/types.ts b/src/core/react-query/filter/types.ts
@@ -5,13 +5,15 @@ import type { FilterType } from '@/core/types/api/filter';
 export type FilteredGroupsRequestType = {
   randomImages?: boolean;
   filterCriteria: FilterType;
+  includeEmpty?: boolean;
 } & PaginationType;
 
 export type FilteredGroupSeriesRequestType = {
   randomImages?: boolean;
   filterCriteria: FilterType;
   includeDataFrom?: DataSourceType[];
   recursive?: boolean;
+  includeMissing?: boolean;
 };
 
 export type FilteredSeriesRequestType = {

diff --git a/src/hooks/useUpdateEffect.ts b/src/hooks/useUpdateEffect.ts
diff --git a/src/pages/collection/Collection.tsx b/src/pages/collection/Collection.tsx
@@ -26,7 +26,6 @@ import { useSettingsQuery } from '@/core/react-query/settings/queries';
 import { useGroupViewQuery } from '@/core/react-query/webui/queries';
 import useEventCallback from '@/hooks/useEventCallback';
 import useFlattenListResult from '@/hooks/useFlattenListResult';
-import useUpdateEffect from '@/hooks/useUpdateEffect';
 
 import type { RootState } from '@/core/store';
 import type { FilterCondition, FilterType, SortingCriteria } from '@/core/types/api/filter';
@@ -87,9 +86,17 @@ function Collection() {
   const isSeries = useMemo(() => !!groupId, [groupId]);
 
   const [searchParams, setSearchParams] = useSearchParams();
-  const search = useMemo(() => searchParams.get('q') ?? '', [searchParams]);
-  const setSearch = (query: string) => setSearchParams(query ? { q: query } : {});
-  const [debouncedSearch] = useDebounceValue(search, 200);
+  const groupSearch = useMemo(() => searchParams.get('q') ?? '', [searchParams]);
+  const seriesSearch = useMemo(() => searchParams.get('qs') ?? '', [searchParams]);
+  const setSearch = (query: string) => {
+    if (!query) {
+      setSearchParams({}, { replace: true });
+      return;
+    }
+    setSearchParams({ [isSeries ? 'qs' : 'q']: query }, { replace: true });
+  };
+  const [debouncedGroupSearch] = useDebounceValue(groupSearch, 200);
+  const [debouncedSeriesSearch] = useDebounceValue(seriesSearch, 200);
 
   const activeFilter = useSelector((state: RootState) => state.collection.activeFilter);
   const filterQuery = useFilterQuery(toNumber(filterId!), !!filterId);
@@ -110,10 +117,6 @@ function Collection() {
     setMode(viewSetting);
   }, [viewSetting]);
 
-  useUpdateEffect(() => {
-    setSearch('');
-  }, [isSeries]);
-
   const groupFilterCondition = useMemo(() => {
     if (filterId) return filterQuery.data?.Expression;
     if (activeFilter !== null) return activeFilter as FilterCondition;
@@ -124,7 +127,7 @@ function Collection() {
     {
       pageSize: 50,
       randomImages: showRandomPoster,
-      filterCriteria: getFilter(debouncedSearch, groupFilterCondition, filterQuery.data?.Sorting, false),
+      filterCriteria: getFilter(debouncedGroupSearch, groupFilterCondition, filterQuery.data?.Sorting, false),
     },
     !isSeries && (!filterId || (!!filterId && filterQuery.isSuccess)),
   );
@@ -137,28 +140,15 @@ function Collection() {
   const seriesQuery = useFilteredGroupSeries(
     toNumber(groupId!),
     {
-      filterCriteria: getFilter(debouncedSearch, groupFilterCondition, filterQuery.data?.Sorting, true),
+      filterCriteria: getFilter(debouncedSeriesSearch, groupFilterCondition, filterQuery.data?.Sorting, true),
       randomImages: showRandomPoster,
       includeDataFrom: ['AniDB'],
       recursive: true,
+      includeMissing: true,
     },
     isSeries,
   );
 
-  useEffect(() => {
-    if (!isSeries) {
-      queryClient.resetQueries({
-        queryKey: ['filter', 'preview', 'group-series'],
-      }).catch(console.error);
-    }
-  }, [isSeries]);
-
-  useEffect(() => () => {
-    queryClient.resetQueries({
-      queryKey: ['filter', 'preview', 'groups'],
-    }).catch(console.error);
-  }, []);
-
   const isFetching = useMemo(
     () => (isSeries ? seriesQuery.isFetching : groupsQuery.isFetching),
     [isSeries, seriesQuery.isFetching, groupsQuery.isFetching],
@@ -173,9 +163,9 @@ function Collection() {
   );
 
   useEffect(() => {
-    if (!isSeries || debouncedSearch || !seriesQuery.isSuccess) return;
+    if (!isSeries || debouncedSeriesSearch || !seriesQuery.isSuccess) return;
     setTimelineSeries(seriesQuery.data);
-  }, [debouncedSearch, isSeries, seriesQuery.data, seriesQuery.isSuccess]);
+  }, [debouncedSeriesSearch, isSeries, seriesQuery.data, seriesQuery.isSuccess]);
 
   const groupExtras = useGroupViewQuery(
     {
@@ -209,15 +199,14 @@ function Collection() {
           // eslint-disable-next-line no-nested-ternary
           count={(total === 0 && isFetching) ? -1 : (isSeries ? total : groupsTotal)}
           filterOrGroup={subsectionName}
-          searchQuery={debouncedSearch}
+          searchQuery={isSeries ? seriesSearch : groupSearch}
         />
         <TitleOptions
           isSeries={isSeries}
-          groupSearch={search}
+          groupSearch={groupSearch}
           mode={mode}
-          seriesSearch={search}
-          setGroupSearch={setSearch}
-          setSeriesSearch={setSearch}
+          seriesSearch={seriesSearch}
+          setSearch={setSearch}
           toggleFilterSidebar={toggleFilterSidebar}
           toggleMode={toggleMode}
         />