feat: improved the way it filters in Search.tsx now via API

Franqsanz · Aug 7, 2024 · e17376f · e17376f
1 parent 7deb7c2
commit e17376f
Show file tree

Hide file tree

Showing 6 changed files with 235 additions and 232 deletions.
diff --git a/src/components/FilterDrawer.tsx b/src/components/FilterDrawer.tsx
@@ -22,9 +22,7 @@ export function FilterDrawer({
   onClose,
   handleLanguageChange,
   language,
-  languagesMap,
   year,
-  yearsMap,
   handleYearChange,
 }: DrawerType) {
   const bgContentCheckbox = useColorModeValue('white', 'transparent');
@@ -80,16 +78,16 @@ export function FilterDrawer({
                   direction='column-reverse'
                   gap='5'
                 >
-                  {language &&
-                    language.map((language) => (
+                  {Array.isArray(language) &&
+                    language?.map(({ language, count }: any) => (
                       <Radio
                         key={language}
                         value={language}
                         onChange={() => handleRadioChange('language', language)}
                       >
                         {language}
                         <Box as='span' ml='2' color='gray.500'>
-                          ({languagesMap && languagesMap[language]})
+                          ({count})
                         </Box>
                       </Radio>
                     ))}
@@ -116,16 +114,16 @@ export function FilterDrawer({
                   direction='column-reverse'
                   gap='5'
                 >
-                  {year &&
-                    year.map((year) => (
+                  {Array.isArray(year) &&
+                    year?.map(({ year, count }: any) => (
                       <Radio
                         key={year}
                         value={year}
                         onChange={() => handleRadioChange('year', year)}
                       >
                         {year}
                         <Box as='span' ml='2' color='gray.500'>
-                          ({yearsMap && yearsMap[year]})
+                          ({count})
                         </Box>
                       </Radio>
                     ))}

diff --git a/src/components/types.d.ts b/src/components/types.d.ts
@@ -112,9 +112,7 @@ type languagesYMapType = { [key: string]: number } | undefined;
 
 interface LanguageAndYearType {
   language: languageYType;
-  languagesMap: languagesYMapType;
   year: languageYType;
-  yearsMap: languagesYMapType;
 }
 
 interface DrawerType extends DisclosureType, LanguageAndYearType {

diff --git a/src/hooks/queries.ts b/src/hooks/queries.ts
@@ -24,6 +24,7 @@ import {
   updateBook,
   deleteBook,
   deleteAccount,
+  getBooksFilterPaginated,
 } from '@services/api';
 import { useAccountActions } from '@hooks/useAccountActions';
 import { keys } from '@utils/utils';
@@ -108,25 +109,33 @@ function useBooksPaginate() {
   });
 }
 
-function useFilter(query: string | undefined, param: string | undefined) {
-  // return useSuspenseQuery({
-  //   queryKey: [keys.filter, query, param],
-  //   queryFn: () => getBooksFilter(query, param, page),
-  //   gcTime: 3000,
-  //   retry: 1,
-  // });
-
+function useFilterPaginated(
+  query: string | undefined,
+  param: string | undefined,
+) {
   return useInfiniteQuery({
-    queryKey: [keys.filter, query, param],
-    queryFn: ({ pageParam }) => getBooksFilter(query, param, pageParam),
+    queryKey: [keys.filterPaginated, query, param],
+    queryFn: ({ pageParam }) =>
+      getBooksFilterPaginated(query, param, pageParam),
     initialPageParam: 0,
     getNextPageParam: (lastPage) => {
       if (lastPage.info.nextPage === null) return;
 
       return lastPage.info.nextPage;
     },
     gcTime: 3000,
-    retry: 1,
+    retry: false,
+    refetchOnWindowFocus: false,
+  });
+}
+
+function useFilter(query: string | undefined, param: string | undefined) {
+  return useQuery({
+    queryKey: [keys.filter, query, param],
+    queryFn: () => getBooksFilter(query, param),
+    gcTime: 3000,
+    retry: false,
+    refetchOnWindowFocus: false,
   });
 }
 
@@ -279,6 +288,7 @@ export {
   useAllSearchBooks,
   useBooksPaginate,
   useBook,
+  useFilterPaginated,
   useFilter,
   useMoreBooks,
   useMostViewedBooks,