chore: work continues on the issue of filters

src/components/aside/AboutCategories.tsx

@@ -19,7 +19,7 @@ export function AboutCategories({ category }: any) {
             mt='2'
             fontSize='sm'
             maxH='250px'
-            overflowY='scroll'
+            overflowY='auto'
             pr='1'
             sx={{
               '&::-webkit-scrollbar': {

src/components/aside/ResultLength.tsx

@@ -3,7 +3,7 @@ import { Box, Flex } from '@chakra-ui/react';
 
 export function ResultLength({ data }: any) {
   return (
-    <Box mt={{ base: '0', xl: '97px' }}>
+    <Box mt={{ base: '0', xl: '52px' }}>
       <Flex
         fontSize={{ base: 'sm', xl: 'lg', md: 'md' }}
         textAlign={{ base: 'center', lg: 'left' }}

src/components/filters/FilterDrawer.tsx

@@ -23,28 +23,47 @@ export function FilterDrawer({
   onClose,
   handleLanguageChange,
   language,
-  year,
   handleYearChange,
+  year,
+  authors,
+  handleAuthorChange,
 }: DrawerType) {
   const bgContentCheckbox = useColorModeValue('white', 'transparent');
   const bgDrawer = useColorModeValue('white', '#121212e4');
   const bgButtonApply = useColorModeValue('green.500', 'green.700');
   const [selectedLanguage, setSelectedLanguage] = useState('');
   const [selectedYear, setSelectedYear] = useState('');
+  const [selectedAuthor, setSelectedAuthor] = useState('');
 
   function handleRadioChange(type: string, value: string) {
     if (type === 'language') {
       setSelectedLanguage(value);
-    } else if (type === 'year') {
+      return;
+    }
+
+    if (type === 'year') {
       setSelectedYear(value);
+      return;
+    }
+
+    if (type === 'authors') {
+      setSelectedAuthor(value);
     }
   }
 
   function handleAllRadioChange(type: string) {
     if (type === 'language') {
       setSelectedLanguage('');
-    } else if (type === 'year') {
+      return;
+    }
+
+    if (type === 'year') {
       setSelectedYear('');
+      return;
+    }
+
+    if (type === 'authors') {
+      setSelectedAuthor('');
     }
   }
 
@@ -54,7 +73,7 @@ export function FilterDrawer({
         <DrawerOverlay bg='#1212126e' />
         <DrawerContent
           m='0 auto'
-          w='95%'
+          w='96%'
           maxH='450px'
           bg={bgDrawer}
           backdropFilter='auto'
@@ -149,6 +168,39 @@ export function FilterDrawer({
                   </Radio>
                 </Flex>
               </RadioGroup>
+              <Box mt='5' mb='4' borderBottom='1px'>
+                Autor
+              </Box>
+              <RadioGroup
+                value={selectedAuthor}
+                onChange={handleAuthorChange}
+                colorScheme='green'
+              >
+                <Flex
+                  mx='2'
+                  bg={bgContentCheckbox}
+                  rounded='lg'
+                  direction='column-reverse'
+                  gap='5'
+                >
+                  {Array.isArray(authors) &&
+                    authors?.map(({ authors, count }: any) => (
+                      <Radio
+                        key={authors}
+                        value={authors}
+                        onChange={() => handleRadioChange('authors', authors)}
+                      >
+                        {authors}
+                        <Box as='span' ml='2' color='gray.500'>
+                          ({count})
+                        </Box>
+                      </Radio>
+                    ))}
+                  <Radio value='' onChange={() => handleAllRadioChange('authors')}>
+                    Todos
+                  </Radio>
+                </Flex>
+              </RadioGroup>
             </Flex>
           </DrawerBody>
           <DrawerFooter justifyContent='center' borderTopWidth='1px'>

src/components/skeletons/SkeletonContainer.tsx

@@ -21,7 +21,7 @@ export function SkeletonContainer() {
     <>
       <MyContainer>
         <Aside>
-          <Box mt={{ base: '7', md: '97px' }}>
+          <Box mt={{ base: '7', md: '52px' }}>
             <SkeletonText
               mt='1'
               noOfLines={2}

src/components/types.d.ts

@@ -108,17 +108,19 @@ interface SelectType extends Omit<SelectBooksType, 'label'> {
   total: number;
 }
 
-type languageYType = string[] | undefined;
+type OptionType = string[] | undefined;
 type languagesYMapType = { [key: string]: number } | undefined;
 
 interface LanguageAndYearType {
-  language: languageYType;
-  year: languageYType;
+  language: OptionType;
+  year: OptionType;
+  authors: OptionType;
 }
 
 interface DrawerType extends DisclosureType, LanguageAndYearType {
   handleLanguageChange: (languages: any) => void;
   handleYearChange: (years: any) => void;
+  handleAuthorChange: (authors: any) => void;
 }
 
 interface BookSearchResultsType {

src/components/ui/MySimpleGrid.tsx

@@ -18,7 +18,7 @@ export function MySimpleGrid({ width = '8xl', children }: SimpleGridType) {
         columns={{ base: 2, md: 3, lg: 4, '2xl': 5 }}
         justifyItems='center'
         m='auto'
-        mt={{ base: 5, md: 20 }}
+        mt={{ base: 5, md: 12 }}
         pl={{ base: 0, md: 5 }}
         color={colorCard}
       >

src/pages/FilteredData.tsx

@@ -33,6 +33,7 @@ import { aboutCategories } from '../constant/constants';
 import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
 import { MyContainer } from '@components/ui/MyContainer';
 import { FilterAccordion } from '@components/filters/FilterAccordion';
+// import { AsideFilter } from '@components/filters/AsideFilter';
 
 export default function FilteredData() {
   const { ref, inView } = useInView();
@@ -72,7 +73,7 @@ export default function FilteredData() {
     isFetchingNextPage,
   } = useFilterPaginated(query, param);
 
-  const { data: dataFilter } = useFilter(query, param);
+  const { data: dataFilter, isPending: isPendingFilter } = useFilter(query, param);
 
   useScrollYRestoration(isPendingPaginated); // Restablece la posición del scroll al volver de la vista del libro
 
@@ -109,6 +110,26 @@ export default function FilteredData() {
     setSelectedMaxPages('');
   }, [location.pathname]);
 
+  // Filtrar por número de páginas
+  function pagesMatch(numberPages) {
+    const minPages = selectedMinPages ? Number(selectedMinPages) : null;
+    const maxPages = selectedMaxPages ? Number(selectedMaxPages) : null;
+
+    if (minPages !== null && maxPages !== null) {
+      return numberPages >= minPages && numberPages <= maxPages;
+    }
+
+    if (minPages !== null) {
+      return numberPages >= minPages;
+    }
+
+    if (maxPages !== null) {
+      return numberPages <= maxPages;
+    }
+
+    return true;
+  }
+
   // Esta función ejecuta la petición de paginación por defecto
   // y si se aplican los filtros ejecuta la petición "dataFilter".
   function getNormalizedResults() {
@@ -128,22 +149,10 @@ export default function FilteredData() {
             ? authors[0].toLowerCase() === selectedAuthor
             : true;
 
-          // Filtrar por número de páginas
-          const minPages = selectedMinPages ? Number(selectedMinPages) : null;
-          const maxPages = selectedMaxPages ? Number(selectedMaxPages) : null;
-
-          let pagesMatch = true;
-
-          if (minPages !== null && maxPages !== null) {
-            pagesMatch = numberPages >= minPages && numberPages <= maxPages;
-          } else if (minPages !== null) {
-            pagesMatch = numberPages >= minPages;
-          } else if (maxPages !== null) {
-            pagesMatch = numberPages <= maxPages;
-          }
-
           // Devuelve el resultado solo si cumple con todos los filtros
-          return languageMatch && yearMatch && authorMatch && pagesMatch;
+          return (
+            languageMatch && yearMatch && authorMatch && pagesMatch(numberPages)
+          );
         }) || []
       );
     }
@@ -191,7 +200,7 @@ export default function FilteredData() {
           display={{ base: 'none', md: 'flex' }}
           direction='column'
           h='450px'
-          overflowY='scroll'
+          overflowY='auto'
           pr='2'
           sx={{
             '&::-webkit-scrollbar': {
@@ -203,21 +212,25 @@ export default function FilteredData() {
             },
           }}
         >
-          <FilterAccordion
-            selectedMinPages={selectedMinPages}
-            selectedMaxPages={selectedMaxPages}
-            handleMinChange={handleMinChange}
-            handleMaxChange={handleMaxChange}
-            selectedLanguage={selectedLanguage}
-            handleLanguageChange={handleLanguageChange}
-            languages={languages}
-            selectedYear={selectedYear}
-            handleYearChange={handleYearChange}
-            years={years}
-            selectedAuthor={selectedAuthor}
-            handleAuthorChange={handleAuthorChange}
-            authors={authors}
-          />
+          {isPendingFilter ? (
+            <Spinner thickness='4px' speed='0.40s' />
+          ) : (
+            <FilterAccordion
+              selectedMinPages={selectedMinPages}
+              selectedMaxPages={selectedMaxPages}
+              handleMinChange={handleMinChange}
+              handleMaxChange={handleMaxChange}
+              selectedLanguage={selectedLanguage}
+              handleLanguageChange={handleLanguageChange}
+              languages={languages}
+              selectedYear={selectedYear}
+              handleYearChange={handleYearChange}
+              years={years}
+              selectedAuthor={selectedAuthor}
+              handleAuthorChange={handleAuthorChange}
+              authors={authors}
+            />
+          )}
         </Flex>
       </Flex>
     );
@@ -301,8 +314,10 @@ export default function FilteredData() {
         onClose={onClose}
         language={languages}
         year={years}
+        authors={authors}
         handleLanguageChange={handleLanguageChange}
         handleYearChange={handleYearChange}
+        handleAuthorChange={handleAuthorChange}
       />
       {isPendingPaginated ? (
         <SkeletonAllBooks showTags={false} />