feat: a new feature to create collections

src/assets/assets.ts

@@ -14,6 +14,8 @@ const images = {
     'https://res.cloudinary.com/xbu/image/upload/v1708539494/xbu_assets/noData_gs71zg.svg',
   emptyFavorites:
     'https://res.cloudinary.com/xbu/image/upload/v1725365540/xbu_assets/undraw_with_love_re_1q3m_yxcely.svg',
+  collections:
+    'https://res.cloudinary.com/xbu/image/upload/v1729604473/xbu_assets/collections_frakbc.svg',
 };
 
 export const {
@@ -25,4 +27,5 @@ export const {
   PageNotFound,
   NoData,
   emptyFavorites,
+  collections,
 } = images;

src/components/filters/AsideFilter.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Flex, Icon } from '@chakra-ui/react';
+import { CgOptions } from 'react-icons/cg';
+
+export function AsideFilter() {
+  return (
+    <>
+      <Flex
+        display={{ base: 'none', md: 'flex' }}
+        direction='column'
+        mt='10'
+        pb='10'
+        position='sticky'
+        top='16'
+      >
+        <Flex align='center' py='2' mb='2' fontSize='xl' fontWeight='bold'>
+          <Icon as={CgOptions} boxSize='20px' mr='2' />
+          Filtrar por:
+        </Flex>
+        <Flex
+          display={{ base: 'none', md: 'flex' }}
+          direction='column'
+          h='450px'
+          overflowY='auto'
+          pr='2'
+          sx={{
+            '&::-webkit-scrollbar': {
+              width: '5px',
+            },
+            '&::-webkit-scrollbar-thumb': {
+              background: '#a2aab3',
+              borderRadius: '30px',
+            },
+          }}
+        ></Flex>
+      </Flex>
+    </>
+  );
+}

src/components/forms/FormCreateUser.tsx

@@ -27,7 +27,7 @@ export function FormCreateUser() {
     setUsername(value);
   }
 
-  function handleSubmit(e) {
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     mutateAsync(token);
   }
@@ -38,50 +38,45 @@ export function FormCreateUser() {
 
   return (
     <>
-      <Flex
-        as='form'
-        onSubmit={handleSubmit}
-        justify='center'
-        p='5'
-        mt='24'
-        h='400px'
-      >
-        <Flex gap='5' direction='column'>
-          <Box
-            as='h1'
-            textAlign='center'
-            fontSize={{ base: 'lg', md: '2xl' }}
-            mb='5'
-          >
-            Elegir nombre de usuario
-          </Box>
-          <FormControl isRequired>
-            <InputGroup size={{ base: 'md', md: 'lg' }}>
-              <InputLeftAddon>xbu.com/</InputLeftAddon>
-              <Input
-                type='text'
-                name='username'
-                value={username}
-                onChange={handleChange}
-              />
-            </InputGroup>
-          </FormControl>
-          <Button
-            type='submit'
-            size='lg'
-            border='1px'
-            bg={bgColorButton}
-            color='black'
-            _hover={{ bg: 'green.600' }}
-            _active={{ bg: 'green.600' }}
-            fontWeight='normal'
-            loadingText='Creando cuenta...'
-            isLoading={isPending}
-          >
-            Siguiente
-          </Button>
+      <form onSubmit={handleSubmit}>
+        <Flex justify='center' p='5' mt='24' h='400px'>
+          <Flex gap='5' direction='column'>
+            <Box
+              as='h1'
+              textAlign='center'
+              fontSize={{ base: 'lg', md: '2xl' }}
+              mb='5'
+            >
+              Elegir nombre de usuario
+            </Box>
+            <FormControl isRequired>
+              <InputGroup size={{ base: 'md', md: 'lg' }}>
+                <InputLeftAddon>xbu.com/</InputLeftAddon>
+                <Input
+                  type='text'
+                  name='username'
+                  value={username}
+                  onChange={handleChange}
+                />
+              </InputGroup>
+            </FormControl>
+            <Button
+              type='submit'
+              size='lg'
+              border='1px'
+              bg={bgColorButton}
+              color='black'
+              _hover={{ bg: 'green.600' }}
+              _active={{ bg: 'green.600' }}
+              fontWeight='normal'
+              loadingText='Creando cuenta...'
+              isLoading={isPending}
+            >
+              Siguiente
+            </Button>
+          </Flex>
         </Flex>
-      </Flex>
+      </form>
     </>
   );
 }

src/components/modals/ModalCollection.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Button,
+  Flex,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+import { useCreateCollections } from '@hooks/queries';
+import { useAuth } from '@contexts/AuthContext';
+
+interface ModalCollectionType {
+  isOpen: boolean;
+  onClose: () => void;
+  refetch: () => void;
+}
+
+export function ModalCollection({ isOpen, onClose, refetch }: ModalCollectionType) {
+  const [name, setName] = useState<string>('');
+  const bgColorBox = useColorModeValue('white', 'gray.900');
+  const bgColorInput = useColorModeValue('gray.100', 'gray.800');
+  const { currentUser } = useAuth();
+  const uid = currentUser?.uid;
+  const navigate = useNavigate();
+  const { mutate, isPending, isSuccess } = useCreateCollections(uid);
+
+  function handleNameCollection(e: React.ChangeEvent<HTMLInputElement>) {
+    const { value } = e.target;
+
+    setName(value);
+  }
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    mutate(name);
+  }
+
+  useEffect(() => {
+    if (isSuccess) {
+      onClose();
+      refetch();
+      setName('');
+      navigate('/my-collections');
+    }
+  }, [isSuccess, navigate, onClose]);
+
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={onClose} size={{ base: 'xs', sm: 'md' }}>
+        <ModalOverlay backdropFilter='blur(7px)' />
+        <ModalContent overflow='hidden'>
+          <ModalHeader bg={bgColorBox}>Crear nueva colección</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody bg={bgColorBox}>
+            <form onSubmit={handleSubmit}>
+              <Flex direction='column' gap='5' pb='2'>
+                <FormControl isRequired>
+                  <FormLabel htmlFor='nameCollection'>Nombre</FormLabel>
+                  <Input
+                    value={name}
+                    onChange={handleNameCollection}
+                    size='lg'
+                    fontSize='sm'
+                    name='name'
+                    bg={bgColorInput}
+                  />
+                </FormControl>
+                <Button
+                  type='submit'
+                  size='lg'
+                  bg='green.500'
+                  color='black'
+                  p='5'
+                  fontWeight='normal'
+                  border='1px'
+                  rounded='lg'
+                  isDisabled={!name}
+                  isLoading={isPending}
+                  loadingText='Creando...'
+                  _hover={{ outline: 'none', bg: 'green.600' }}
+                >
+                  Crear
+                </Button>
+              </Flex>
+            </form>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

src/components/nav/menu/MenuProfile.tsx

@@ -56,6 +56,13 @@ export function MenuProfile({ displayName, photoURL, username }: MenuType) {
           <MenuItem as={NavLink} to='/new-post' _hover={{ textDecoration: 'none' }}>
             Crear Publicación
           </MenuItem>
+          <MenuItem
+            as={NavLink}
+            to='/my-collections'
+            _hover={{ textDecoration: 'none' }}
+          >
+            Mis Colecciones
+          </MenuItem>
           <MenuItem
             as={NavLink}
             to='/my-account'

src/hooks/queries.ts

@@ -27,6 +27,9 @@ import {
   deleteAccount,
   getBooksFilterPaginated,
   getFindAllBookFavorite,
+  getFindAllCollections,
+  deleteCollections,
+  postCollections,
 } from '@services/api';
 import { useAccountActions } from '@hooks/useAccountActions';
 import { keys } from '@utils/utils';
@@ -198,9 +201,6 @@ function useFavoriteBook(body: any, isFavorite: boolean) {
     mutationKey: [keys.favoriteBook],
     mutationFn: (userId: string | undefined) =>
       patchToggleFavorite(userId, body, isFavorite),
-    onError: (error) => {
-      console.error('Error updating favorite status');
-    },
   });
 }
 
@@ -278,6 +278,33 @@ function useAllFavoriteByUser(userId: string | undefined) {
   });
 }
 
+function useCreateCollections(userId: string | undefined) {
+  return useMutation({
+    mutationKey: [keys.createCollections],
+    mutationFn: (name: string | undefined) => postCollections(userId, name),
+  });
+}
+
+function useCollections(userId: string | undefined) {
+  return useQuery({
+    queryKey: [keys.allCollections],
+    queryFn: () => getFindAllCollections(userId),
+    refetchOnWindowFocus: true,
+    retry: false,
+  });
+}
+
+function useDeleteCollections() {
+  return useMutation({
+    mutationKey: [keys.deleteCollections],
+    mutationFn: ([id, collectionId]: [string | undefined, string]) =>
+      deleteCollections(id, collectionId),
+    onError: async (error) => {
+      console.error('Error en el servidor:', error);
+    },
+  });
+}
+
 function useDeleteBook() {
   return useMutation({
     mutationKey: [keys.deleteBook],
@@ -328,6 +355,9 @@ export {
   useRelatedBooks,
   useMoreBooksAuthors,
   useFavoriteBook,
+  useCollections,
+  useCreateCollections,
+  useDeleteCollections,
 
   // Usuarios
   useUserRegister,