From 5fd0a0e8773a3a6d0254475a166e1f52582713de Mon Sep 17 00:00:00 2001
From: Harshith Mohan <gharshitmohan@ymail.com>
Date: Tue, 9 Jul 2024 17:09:45 +0530
Subject: [PATCH] Try to fix collection search... (#945)

---
 src/components/Collection/TitleOptions.tsx |  8 ++--
 src/core/react-query/filter/types.ts       |  2 +
 src/hooks/useUpdateEffect.ts               | 18 --------
 src/pages/collection/Collection.tsx        | 51 +++++++++-------------
 4 files changed, 25 insertions(+), 54 deletions(-)
 delete mode 100644 src/hooks/useUpdateEffect.ts

diff --git a/src/components/Collection/TitleOptions.tsx b/src/components/Collection/TitleOptions.tsx
index 2e12f612c..f721e1a2b 100644
--- 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
index 4c3882ab3..7bf922084 100644
--- a/src/core/react-query/filter/types.ts
+++ b/src/core/react-query/filter/types.ts
@@ -5,6 +5,7 @@ import type { FilterType } from '@/core/types/api/filter';
 export type FilteredGroupsRequestType = {
   randomImages?: boolean;
   filterCriteria: FilterType;
+  includeEmpty?: boolean;
 } & PaginationType;
 
 export type FilteredGroupSeriesRequestType = {
@@ -12,6 +13,7 @@ export type FilteredGroupSeriesRequestType = {
   filterCriteria: FilterType;
   includeDataFrom?: DataSourceType[];
   recursive?: boolean;
+  includeMissing?: boolean;
 };
 
 export type FilteredSeriesRequestType = {
diff --git a/src/hooks/useUpdateEffect.ts b/src/hooks/useUpdateEffect.ts
deleted file mode 100644
index b46904d2c..000000000
--- a/src/hooks/useUpdateEffect.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useEffect, useRef } from 'react';
-import type { DependencyList, EffectCallback } from 'react';
-
-const useUpdateEffect = (effect: EffectCallback, dependencies: DependencyList) => {
-  const isInitialMount = useRef(true);
-
-  // eslint-disable-next-line consistent-return
-  useEffect(() => {
-    if (isInitialMount.current) {
-      isInitialMount.current = false;
-    } else {
-      return effect();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, dependencies);
-};
-
-export default useUpdateEffect;
diff --git a/src/pages/collection/Collection.tsx b/src/pages/collection/Collection.tsx
index 72e29e3c4..10db6e1f2 100644
--- 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}
         />