feat: now shows which category is selected and other changes

.eslintrc.json

@@ -51,7 +51,7 @@
         "trailingComma": "all",
         "tabWidth": 2,
         "singleQuote": true,
-        "printWidth": 80,
+        "printWidth": 85,
         "jsxSingleQuote": true,
         "bracketSameLine": false,
         "endOfLine": "auto"

src/components/AllBooks.tsx

@@ -67,11 +67,7 @@ export function AllBooks() {
   if (isFetchingNextPage) {
     fetchingNextPageUI = (
       <Box p='10' textAlign='center'>
-        <Spinner
-          size={{ base: 'lg', md: 'xl' }}
-          thickness='4px'
-          speed='0.40s'
-        />
+        <Spinner size={{ base: 'lg', md: 'xl' }} thickness='4px' speed='0.40s' />
       </Box>
     );
   }
@@ -91,8 +87,8 @@ export function AllBooks() {
           <Box mt='5'>
             <Flex textAlign={{ base: 'center', lg: 'left' }} direction='column'>
               <Text>
-                Explora todos los libros publicados y encuentra tu próxima
-                lectura favorita.
+                Explora todos los libros publicados y encuentra tu próxima lectura
+                favorita.
               </Text>
               <Text mt='5'>
                 "Un libro es un sueño que sostienes en tus manos" -{' '}

src/components/BooksSection.tsx

@@ -3,11 +3,7 @@ import { Box, Center, Flex, Divider, Spinner } from '@chakra-ui/react';
 
 import { BooksSectionType } from '@components/types';
 
-export function BooksSection({
-  title,
-  data,
-  booksComponent,
-}: BooksSectionType) {
+export function BooksSection({ title, data, booksComponent }: BooksSectionType) {
   return (
     <>
       <Box mt='10' mb='5'>

src/components/Categories.tsx

@@ -1,13 +1,41 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
 import { Link } from '@chakra-ui/react';
 import { BsTag } from 'react-icons/bs';
 
 import { MyTag } from '@components/ui/MyTag';
 import { useAllFilterOptions } from '@hooks/queries';
+import { useCategoryStore } from '@contexts/categoryStore';
 
 export default function Categories() {
   const { data } = useAllFilterOptions();
+  const location = useLocation();
+  const selectedCategory = useCategoryStore((state) => state.selectedCategory);
+  const setSelectedCategory = useCategoryStore((state) => state.setSelectedCategory);
+  const isCategoryActive = useCategoryStore((state) => state.isCategoryActive);
+
+  // Verifica si la categoría debe estar activa en la ruta actual
+  const isActive = isCategoryActive(location as any);
+
+  function handleCategoryClick(category: string) {
+    const disabledRoutes = ['/explore', '/most-viewed'];
+    const isDisabled = disabledRoutes.some((route) =>
+      location.pathname.startsWith(route),
+    );
+
+    if (isActive || isDisabled) {
+      setSelectedCategory(category);
+    } else {
+      console.log('Las categorías están deshabilitadas en esta ruta.');
+    }
+  }
+
+  // Eliminar la categoría seleccionada si la ruta actual está deshabilitada
+  useEffect(() => {
+    if (!isActive && selectedCategory) {
+      setSelectedCategory(null);
+    }
+  }, [location, isCategoryActive, setSelectedCategory]);
 
   return (
     <>
@@ -20,10 +48,11 @@ export default function Categories() {
             to={`/books/filter/category/${category}`}
             tabIndex={-1}
             _hover={{ outline: 'none' }}
+            onClick={() => handleCategoryClick(category)}
           >
             <MyTag
-              bg='green.50'
-              color='green.900'
+              bg={selectedCategory === category ? '#FFFF00' : 'green.50'}
+              color={selectedCategory === category ? 'black' : 'green.900'}
               icon={BsTag}
               name={category}
               size='lg'

src/components/FilterDrawer.tsx

@@ -91,10 +91,7 @@ export function FilterDrawer({
                         </Box>
                       </Radio>
                     ))}
-                  <Radio
-                    value=''
-                    onChange={() => handleAllRadioChange('language')}
-                  >
+                  <Radio value='' onChange={() => handleAllRadioChange('language')}>
                     Todos los Idiomas
                   </Radio>
                 </Flex>

src/components/cards/MoreBooksAuthors.tsx

@@ -7,27 +7,22 @@ import { CardType, RelatedBooksType } from '@components/types';
 import { useMoreBooksAuthors } from '@hooks/queries';
 import { useRefetchLocation } from '@hooks/useRefetchLocation';
 
-export default function MoreBooksAuthors({
-  currentBookId,
-  id,
-}: RelatedBooksType) {
+export default function MoreBooksAuthors({ currentBookId, id }: RelatedBooksType) {
   const { data, refetch } = useMoreBooksAuthors(id);
   const moreBooksAuthors = useRefetchLocation({ currentBookId, data, refetch });
   let uiCard;
 
   if (moreBooksAuthors.length > 0) {
-    uiCard = moreBooksAuthors.map(
-      ({ id, title, authors, pathUrl }: CardType) => (
-        <React.Fragment key={id}>
-          <RelatedCard
-            title={title}
-            authors={authors}
-            pathUrl={pathUrl}
-            refetchQueries={refetch}
-          />
-        </React.Fragment>
-      ),
-    );
+    uiCard = moreBooksAuthors.map(({ id, title, authors, pathUrl }: CardType) => (
+      <React.Fragment key={id}>
+        <RelatedCard
+          title={title}
+          authors={authors}
+          pathUrl={pathUrl}
+          refetchQueries={refetch}
+        />
+      </React.Fragment>
+    ));
   } else {
     uiCard = (
       <Text ml='4' fontStyle='italic' textAlign='center'>

src/components/cards/RelatedCard.tsx

@@ -6,12 +6,7 @@ import { FiArrowRight } from 'react-icons/fi';
 import { CardType } from '@components/types';
 import { useHandleEnterKey } from '@utils/utils';
 
-export function RelatedCard({
-  title,
-  authors,
-  pathUrl,
-  refetchQueries,
-}: CardType) {
+export function RelatedCard({ title, authors, pathUrl, refetchQueries }: CardType) {
   const handleEnterKey = useHandleEnterKey(pathUrl);
   const borderCard = useColorModeValue('gray.200', 'gray.600');
   const colorAuthorCard = useColorModeValue('gray.600', 'gray.300');

src/components/forms/FormEdit.tsx

@@ -142,9 +142,7 @@ export function FormEdit({
         justify='center'
       >
         <Box px='3' textAlign='center'>
-          <Box as='span'>
-            Aquí verás una vista previa de la imagen recortada.
-          </Box>
+          <Box as='span'>Aquí verás una vista previa de la imagen recortada.</Box>
           <Box mt='1' fontSize='13px'>
             <Box as='span'>
               Solo se aceptan formatos PNG, JPG y WebP con un máximo de 2 MB.

src/components/forms/NewBook.tsx

@@ -137,9 +137,7 @@ export function FormNewBook() {
         justify='center'
       >
         <Box px='3' textAlign='center'>
-          <Box as='span'>
-            Aquí verás una vista previa de la imagen recortada.
-          </Box>
+          <Box as='span'>Aquí verás una vista previa de la imagen recortada.</Box>
           <Box mt='1' fontSize='13px'>
             <Box as='span'>
               Solo se aceptan formatos PNG, JPG y WebP con un máximo de 2 MB.

src/components/layout/Footer.tsx

@@ -49,9 +49,7 @@ export function Footer() {
   }, [networkState, prevNetworkState, myToast]);
 
   if (networkState === 'online') {
-    connectionState = (
-      <Box w='14px' h='14px' rounded='full' bg='green.500'></Box>
-    );
+    connectionState = <Box w='14px' h='14px' rounded='full' bg='green.500'></Box>;
   }
 
   if (networkState === 'offline') {

src/components/modals/ModalConfirmation.tsx

@@ -43,12 +43,7 @@ export function ModalConfirmation({
               rounded='lg'
               fontSize={{ base: 'xs', md: 'sm' }}
             >
-              <Icon
-                as={IoWarningOutline}
-                boxSize='7'
-                mr='3'
-                color={colorIconWar}
-              />
+              <Icon as={IoWarningOutline} boxSize='7' mr='3' color={colorIconWar} />
               {warningText}
             </Alert>
           </ModalBody>

src/components/modals/ModalOptions.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// import { NavLink } from 'react-router-dom';
 import {
   Modal,
   ModalOverlay,

src/components/modals/ModalShare.tsx

@@ -109,11 +109,7 @@ export function ModalShare({ shareUrl, data, isOpen, onClose }: ModalType) {
               </FacebookShareButton>
               <TwitterShareButton url={shareUrl || ''} title={data}>
                 <Flex direction='column' align='center'>
-                  <Icon
-                    as={XIcon}
-                    boxSize={{ base: 10, md: 12 }}
-                    rounded='3xl'
-                  />
+                  <Icon as={XIcon} boxSize={{ base: 10, md: 12 }} rounded='3xl' />
                   <Box as='span' fontSize='sm' mt='3'>
                     X
                   </Box>
@@ -138,13 +134,7 @@ export function ModalShare({ shareUrl, data, isOpen, onClose }: ModalType) {
                     boxSize={{ base: 10, md: 12 }}
                     rounded='3xl'
                   />
-                  <Box
-                    w='90px'
-                    textAlign='center'
-                    as='span'
-                    fontSize='sm'
-                    mt='3'
-                  >
+                  <Box w='90px' textAlign='center' as='span' fontSize='sm' mt='3'>
                     Correo electrónico
                   </Box>
                 </Flex>

src/components/nav/MobileNav.tsx

@@ -129,11 +129,7 @@ export function MobileNav() {
               _hover={{ bg: 'none', color: 'green.500' }}
               _active={{ bg: 'none' }}
             >
-              {isOpenMenu ? (
-                <IoClose fontSize='18' />
-              ) : (
-                <FiMenu fontSize='18' />
-              )}
+              {isOpenMenu ? <IoClose fontSize='18' /> : <FiMenu fontSize='18' />}
             </Button>
             <Box
               as='span'
@@ -163,11 +159,7 @@ export function MobileNav() {
               _active={{ bg: 'none' }}
               _hover={{ color: 'green.500' }}
             >
-              {colorMode === 'dark' ? (
-                <BsSun size='18' />
-              ) : (
-                <RiMoonLine size='18' />
-              )}
+              {colorMode === 'dark' ? <BsSun size='18' /> : <RiMoonLine size='18' />}
             </Button>
             {profileMenu}
           </Flex>
@@ -186,12 +178,7 @@ export function MobileNav() {
           </DrawerContent>
         </Drawer>
         <ModalFilter isOpen={isOpenDFilter} onClose={onCloseDFilter} />
-        <Drawer
-          isOpen={isOpenMenu}
-          placement='left'
-          onClose={onCloseMenu}
-          size='xs'
-        >
+        <Drawer isOpen={isOpenMenu} placement='left' onClose={onCloseMenu} size='xs'>
           <DrawerOverlay backdropFilter='blur(5px)' />
           <DrawerContent
             bg={bgDrawer}

src/components/nav/menu/MenuProfile.tsx

@@ -44,11 +44,7 @@ export function MenuProfile({ displayName, photoURL, username }: MenuType) {
         </MenuButton>
       </Button>
       <MenuList>
-        <MenuGroup
-          title={displayName as string}
-          fontSize='md'
-          textAlign='center'
-        >
+        <MenuGroup title={displayName as string} fontSize='md' textAlign='center'>
           <MenuDivider />
           <MenuItem
             as={NavLink}
@@ -57,11 +53,7 @@ export function MenuProfile({ displayName, photoURL, username }: MenuType) {
           >
             Perfil
           </MenuItem>
-          <MenuItem
-            as={NavLink}
-            to='/new-post'
-            _hover={{ textDecoration: 'none' }}
-          >
+          <MenuItem as={NavLink} to='/new-post' _hover={{ textDecoration: 'none' }}>
             Crear Publicación
           </MenuItem>
           <MenuItem

src/components/types.d.ts

@@ -96,8 +96,7 @@ interface ModalType extends DisclosureType {
   data?: string;
 }
 
-interface RelatedBooksType
-  extends Omit<CardType, 'title' | 'authors' | 'pathUrl'> {
+interface RelatedBooksType extends Omit<CardType, 'title' | 'authors' | 'pathUrl'> {
   data?: any;
   currentBookId?: string | undefined;
   refetch?: () => void;
@@ -142,9 +141,7 @@ interface SkeletonType {
   showTags?: boolean;
 }
 
-interface ModalOptionsAndConfirType
-  extends Omit<Partial<BookType>>,
-    DisclosureType {
+interface ModalOptionsAndConfirType extends Omit<Partial<BookType>>, DisclosureType {
   onDeleteBook?: () => any | void;
   onEditBook?: () => any | void;
   isPending?: boolean;

src/components/ui/MyPopover.tsx

@@ -21,21 +21,11 @@ export function MyPopover({ textBody, textFooter }: Props) {
     <>
       <Popover placement='top'>
         <PopoverTrigger>
-          <Button
-            bg='none'
-            h='0'
-            _active={{ bg: 'none' }}
-            _hover={{ bg: 'none' }}
-          >
+          <Button bg='none' h='0' _active={{ bg: 'none' }} _hover={{ bg: 'none' }}>
             <Icon as={AiOutlineQuestionCircle} fontSize='20' />
           </Button>
         </PopoverTrigger>
-        <PopoverContent
-          bg='black'
-          color='white'
-          textAlign='center'
-          fontSize='sm'
-        >
+        <PopoverContent bg='black' color='white' textAlign='center' fontSize='sm'>
           <PopoverArrow bg='black' />
           <PopoverBody>{textBody}</PopoverBody>
           {textFooter ? <PopoverFooter>{textFooter}</PopoverFooter> : null}

src/components/ui/MySliderCategories.tsx

@@ -3,6 +3,7 @@ import { Box, Button, Flex, useColorModeValue } from '@chakra-ui/react';
 import { MdChevronLeft, MdChevronRight } from 'react-icons/md';
 
 import { SkeletonTags } from '@components/skeletons/SkeletonTags';
+
 const Categories = lazy(() => import('@components/Categories'));
 
 export function MySliderCategories() {
@@ -15,7 +16,7 @@ export function MySliderCategories() {
     const container = containerRef.current as any;
     let isHovered = false;
 
-    function handleScroll(event) {
+    function handleScroll(event: WheelEvent) {
       if (isHovered) {
         container.scrollLeft += event.deltaY;
         event.preventDefault();