feat: created view to see the books added to the collection

src/components/modals/ModalCollection.tsx

@@ -17,10 +17,9 @@ import {
 
 import { useCreateCollections } from '@hooks/queries';
 import { useAuth } from '@contexts/AuthContext';
+import { DisclosureType } from '@components/types';
 
-interface ModalCollectionType {
-  isOpen: boolean;
-  onClose: () => void;
+interface ModalCollectionType extends DisclosureType {
   refetch: () => void;
 }
 
@@ -33,6 +32,15 @@ export function ModalCollection({ isOpen, onClose, refetch }: ModalCollectionTyp
   const navigate = useNavigate();
   const { mutate, isPending, isSuccess } = useCreateCollections(uid);
 
+  useEffect(() => {
+    if (isSuccess) {
+      onClose();
+      refetch();
+      setName('');
+      navigate('/my-collections');
+    }
+  }, [isSuccess, navigate, onClose]);
+
   function handleNameCollection(e: React.ChangeEvent<HTMLInputElement>) {
     const { value } = e.target;
 
@@ -41,17 +49,11 @@ export function ModalCollection({ isOpen, onClose, refetch }: ModalCollectionTyp
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
-    mutate(name);
-  }
 
-  useEffect(() => {
-    if (isSuccess) {
-      onClose();
-      refetch();
-      setName('');
-      navigate('/my-collections');
+    if (!isPending) {
+      mutate(name);
     }
-  }, [isSuccess, navigate, onClose]);
+  }
 
   return (
     <>
@@ -83,7 +85,7 @@ export function ModalCollection({ isOpen, onClose, refetch }: ModalCollectionTyp
                   fontWeight='normal'
                   border='1px'
                   rounded='lg'
-                  isDisabled={!name}
+                  isDisabled={!name || isPending}
                   isLoading={isPending}
                   loadingText='Creando...'
                   _hover={{ outline: 'none', bg: 'green.600' }}

src/components/types.d.ts

@@ -199,6 +199,7 @@ interface AuthProviderType {
 export type {
   MyChangeEvent,
   AboutType,
+  DisclosureType,
   LinkType,
   SelectBooksType,
   SelectType,

src/hooks/queries.ts

@@ -28,6 +28,7 @@ import {
   getBooksFilterPaginated,
   getFindAllBookFavorite,
   getFindAllCollections,
+  getFindOneCollection,
   deleteCollections,
   postCollections,
 } from '@services/api';
@@ -305,6 +306,15 @@ function useDeleteCollections() {
   });
 }
 
+function useCollectionDetail(collectionId: string | undefined) {
+  return useQuery({
+    queryKey: [keys.collectionsDetail, collectionId],
+    queryFn: () => getFindOneCollection(collectionId),
+    refetchOnWindowFocus: true,
+    retry: false,
+  });
+}
+
 function useDeleteBook() {
   return useMutation({
     mutationKey: [keys.deleteBook],
@@ -356,6 +366,7 @@ export {
   useMoreBooksAuthors,
   useFavoriteBook,
   useCollections,
+  useCollectionDetail,
   useCreateCollections,
   useDeleteCollections,
 

src/pages/Favorites.tsx

@@ -102,8 +102,6 @@ export default function Favorites() {
           Todavía no has añadido libros a tus favoritos.
         </Box>
         <Link
-          w='auto'
-          display='block'
           as={NavLink}
           to='/explore'
           bg='green.500'

src/pages/profile/Profile.tsx

@@ -150,8 +150,8 @@ export function Profile() {
           Aún no hay publicaciones
         </Box>
         <Link
-          w={{ base: '85%', md: '230px' }}
-          display='block'
+          // w={{ base: '85%', md: '230px' }}
+          // display='block'
           as={NavLink}
           to='/new-post'
           bg='green.500'

src/pages/profile/MyCollections.tsx → src/pages/profile/collections/AllCollections.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { NavLink, ScrollRestoration } from 'react-router-dom';
 import {
   Box,
   Button,
@@ -7,35 +8,34 @@ import {
   Image,
   useColorModeValue,
   useDisclosure,
+  Spinner,
+  LinkBox,
+  LinkOverlay,
 } from '@chakra-ui/react';
-import { ScrollRestoration } from 'react-router-dom';
 import { TbPlaylistAdd } from 'react-icons/tb';
 
 import { ContainerTitle } from '@components/layout/ContainerTitle';
 import { MainHead } from '@components/layout/Head';
 import { collections } from '@assets/assets';
 import { MyContainer } from '@components/ui/MyContainer';
+import { MySimpleGrid } from '@components/ui/MySimpleGrid';
 import { ModalCollection } from '@components/modals/ModalCollection';
-import { useCollections, useDeleteCollections } from '@hooks/queries';
+import { useCollections } from '@hooks/queries';
 import { useAuth } from '@contexts/AuthContext';
 import { parseDate } from '@utils/utils';
 
-export function MyCollections() {
+export function AllCollections() {
   const bgColorButton = useColorModeValue('green.500', 'green.700');
   const grayColor = useColorModeValue('#E2E8F0', '#2D3748');
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
-  const { data, refetch } = useCollections(uid);
-  const { mutate, isSuccess } = useDeleteCollections();
+  const { data, refetch, isPending: isPendingData } = useCollections(uid);
   let collectionsUI;
+  let spinnerUI;
 
-  function deleteCollection(id: string) {
-    mutate([uid, id]);
-  }
-
-  if (isSuccess) {
-    refetch();
+  if (isPendingData) {
+    spinnerUI = <Spinner />;
   }
 
   if (!data || !data?.collections || data?.collections.length === 0) {
@@ -65,50 +65,66 @@ export function MyCollections() {
     );
   } else {
     collectionsUI = (
-      <Flex gap='7' mt='14' flexWrap='wrap'>
+      <MySimpleGrid>
         {data?.collections.map(({ id, name, createdAt }) => (
-          <Flex
+          <LinkBox
             key={id}
-            w={{ base: 'full', sm: '200px' }}
-            h={{ base: '120px', sm: '170px' }}
-            boxShadow='2xl'
-            border='1px solid #A0AEC0'
-            rounded='lg'
-            p='2'
-            justify='center'
-            position='relative'
+            display='flex'
+            w={{ base: '160px', sm: '250px' }}
+            h={{ base: '200px', sm: '210px' }}
+            justifyContent='center'
+            m='5'
           >
+            {/* <LinkOverlay
+              as={NavLink}
+              to={`/my-collections/${id}`}
+              tabIndex={-1}
+              _hover={{ outline: 'none' }}
+            > */}
             <Flex
-              direction='column'
-              mb='3'
-              position='absolute'
-              bottom='0'
-              textAlign='center'
+              w={{ base: '127px', sm: '160px', md: '250px' }}
+              h={{ base: '200px', sm: '210px' }}
+              boxShadow='xl'
+              border='1px solid #A0AEC0'
+              rounded='lg'
+              // p='2'
+              // m='5'
+              justify='center'
+              position='relative'
             >
-              <Box mb='3'>
-                <Box mb='1'>{name}</Box>
-                <Box fontSize='xs'>{parseDate(createdAt)}</Box>
-              </Box>
-              <Button
-                w='full'
-                h='30px'
-                px='0'
-                m='auto'
-                fontSize='xs'
-                onClick={() => deleteCollection(id)}
-                fontWeight='normal'
-                bg='red.500'
-                color='white'
-                // loadingText='Eliminando...'
-                // isLoading={isPending}
-                _hover={{ color: 'none' }}
+              <Flex
+                direction='column'
+                mb='3'
+                position='absolute'
+                bottom='0'
+                textAlign='center'
+                gap='3'
               >
-                Eliminar
-              </Button>
+                <Box mb='4'>
+                  <Box mb='1' fontSize={{ base: 'sm', md: 'md' }}>
+                    {name}
+                  </Box>
+                  <Box fontSize='xs'>{parseDate(createdAt)}</Box>
+                </Box>
+                <Button
+                  w='100px'
+                  h='30px'
+                  px='0'
+                  m='auto'
+                  fontSize='xs'
+                  as={NavLink}
+                  to={`/my-collections/${id}`}
+                  fontWeight='normal'
+                  _hover={{ color: 'none' }}
+                >
+                  Abrir
+                </Button>
+              </Flex>
             </Flex>
-          </Flex>
+            {/* </LinkOverlay> */}
+          </LinkBox>
         ))}
-      </Flex>
+      </MySimpleGrid>
     );
   }
 
@@ -129,7 +145,8 @@ export function MyCollections() {
           align='center'
           fontSize='lg'
         >
-          {data?.totalCollections} Colecciones
+          {data?.totalCollections ?? 0}{' '}
+          {data?.totalCollections === 1 ? 'Colección' : 'Colecciones'}
           <Button
             fontWeight='500'
             onClick={onOpen}