chore: renamed the fields returned by the options route

Franqsanz · Aug 8, 2024 · 90bb521 · 90bb521
1 parent e17376f
commit 90bb521
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 74 deletions.
diff --git a/src/components/Categories.tsx b/src/components/Categories.tsx
@@ -12,20 +12,20 @@ export default function Categories() {
   return (
     <>
       {data &&
-        data[0].categories[0].map(({ _id, count }) => (
+        data[0].categories[0].map(({ category, count }) => (
           <Link
             display='flex'
-            key={_id}
+            key={category}
             as={NavLink}
-            to={`/books/filter/category/${_id}`}
+            to={`/books/filter/category/${category}`}
             tabIndex={-1}
             _hover={{ outline: 'none' }}
           >
             <MyTag
               bg='green.50'
               color='green.900'
               icon={BsTag}
-              name={_id}
+              name={category}
               size='lg'
               tabIndex={0}
               isFocused={true}

diff --git a/src/components/forms/filters/Filter.tsx b/src/components/forms/filters/Filter.tsx
@@ -26,22 +26,22 @@ export default function Filter({ onClose }: Props) {
 
   const categories =
     data &&
-    data[0].categories[0].map(({ _id, count }) => ({
-      value: _id,
+    data[0].categories[0].map(({ category, count }) => ({
+      value: category,
       total: count,
     }));
 
   const years =
     data &&
-    data[0].years[0].map(({ _id, count }) => ({
-      value: _id,
+    data[0].years[0].map(({ year, count }) => ({
+      value: year,
       total: count,
     }));
 
   const languages =
     data &&
-    data[0].languages[0].map(({ _id, count }) => ({
-      value: _id,
+    data[0].languages[0].map(({ language, count }) => ({
+      value: language,
       total: count,
     }));
 

diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
@@ -48,6 +48,8 @@ export default function Search() {
   let buttonFilter;
   let fetchingNextPageUI;
   const isFiltering = !!selectedLanguage || !!selectedYear; // Verificar si los radios estan activos o no.
+  const hasMultipleLanguages = languages.length > 1;
+  const hasMultipleYears = years.length > 1;
 
   const {
     data: dataPaginated,
@@ -119,73 +121,75 @@ export default function Search() {
     setSelectedYear('');
   }, [location.pathname]);
 
-  asideFilter = (
-    <Flex
-      display={{ base: 'none', md: 'flex' }}
-      direction='column'
-      mt='10'
-      pb='10'
-    >
-      <Flex align='center' py='2' mb='2' fontSize='xl' fontWeight='bold'>
-        <Icon as={CgOptions} boxSize='20px' mr='2' />
-        Filtrar por:
-      </Flex>
-      <RadioGroup
-        value={selectedLanguage}
-        onChange={handleLanguageChange}
-        colorScheme='green'
-      >
-        <Box mb='4' borderBottom='1px'>
-          Idioma
-        </Box>
-        <Flex direction='column' gap='3'>
-          <Radio value=''>Todos los Idiomas</Radio>
-          {Array.isArray(languages) &&
-            languages.map(({ language, count }: any) => (
-              <Radio key={language} value={language}>
-                {language}
-                <Box as='span' ml='2' color='gray.500'>
-                  ({count})
-                </Box>
-              </Radio>
-            ))}
-        </Flex>
-      </RadioGroup>
-      <RadioGroup
-        value={selectedYear}
-        onChange={handleYearChange}
-        colorScheme='green'
+  if (hasMultipleLanguages || hasMultipleYears) {
+    asideFilter = (
+      <Flex
+        display={{ base: 'none', md: 'flex' }}
+        direction='column'
+        mt='10'
+        pb='10'
       >
-        <Box my='4' borderBottom='1px'>
-          Año
-        </Box>
-        <Flex direction='column' gap='3'>
-          <Radio value=''>Todos los Años</Radio>
-          {Array.isArray(years) &&
-            years.map(({ year, count }: any) => (
-              <Radio key={year} value={String(year)}>
-                {year}
-                <Box as='span' ml='2' color='gray.500'>
-                  ({count})
-                </Box>
-              </Radio>
-            ))}
+        <Flex align='center' py='2' mb='2' fontSize='xl' fontWeight='bold'>
+          <Icon as={CgOptions} boxSize='20px' mr='2' />
+          Filtrar por:
         </Flex>
-      </RadioGroup>
-    </Flex>
-  );
+        <RadioGroup
+          value={selectedLanguage}
+          onChange={handleLanguageChange}
+          colorScheme='green'
+        >
+          <Box mb='4' borderBottom='1px'>
+            Idioma
+          </Box>
+          <Flex direction='column' gap='3'>
+            <Radio value=''>Todos los Idiomas</Radio>
+            {Array.isArray(languages) &&
+              languages.map(({ language, count }: any) => (
+                <Radio key={language} value={language}>
+                  {language}
+                  <Box as='span' ml='2' color='gray.500'>
+                    ({count})
+                  </Box>
+                </Radio>
+              ))}
+          </Flex>
+        </RadioGroup>
+        <RadioGroup
+          value={selectedYear}
+          onChange={handleYearChange}
+          colorScheme='green'
+        >
+          <Box my='4' borderBottom='1px'>
+            Año
+          </Box>
+          <Flex direction='column' gap='3'>
+            <Radio value=''>Todos los Años</Radio>
+            {Array.isArray(years) &&
+              years.map(({ year, count }: any) => (
+                <Radio key={year} value={String(year)}>
+                  {year}
+                  <Box as='span' ml='2' color='gray.500'>
+                    ({count})
+                  </Box>
+                </Radio>
+              ))}
+          </Flex>
+        </RadioGroup>
+      </Flex>
+    );
 
-  buttonFilter = (
-    <Button
-      display={{ base: 'flex', xl: 'none' }}
-      onClick={onToggle}
-      fontWeight='500'
-      size='sm'
-    >
-      <Icon as={CgOptions} boxSize='4' mr='2' />
-      Filtrar
-    </Button>
-  );
+    buttonFilter = (
+      <Button
+        display={{ base: 'flex', xl: 'none' }}
+        onClick={onToggle}
+        fontWeight='500'
+        size='sm'
+      >
+        <Icon as={CgOptions} boxSize='4' mr='2' />
+        Filtrar
+      </Button>
+    );
+  }
 
   // Verifica si los 3 campos de aboutCategories esten con info o no
   const categoryCheck = aboutCategories.find((item) => {