feat: add confirmation modal for deleting a collection and other changes

Franqsanz · Nov 19, 2024 · 55f43e6 · 55f43e6
1 parent 276912b
commit 55f43e6
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 13 deletions.
diff --git a/src/components/modals/ModalCollection.tsx b/src/components/modals/ModalCollection.tsx
@@ -15,6 +15,7 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react';
 import { FaCheckCircle } from 'react-icons/fa';
+import { IoWarningSharp } from 'react-icons/io5';
 
 import { useCreateCollections, useUpdateCollectionName } from '@hooks/queries';
 import { useAuth } from '@contexts/AuthContext';
@@ -53,7 +54,7 @@ export function ModalCollection({
   const createMutation = useCreateCollections(uid);
 
   // Usa la mutation correspondiente según isEditing
-  const { mutate, isPending, isSuccess } = isEditing
+  const { mutate, isPending, isSuccess, isError } = isEditing
     ? updateMutation
     : createMutation;
 
@@ -64,6 +65,24 @@ export function ModalCollection({
     }
   }, [isEditing, nameCollection]);
 
+  useEffect(() => {
+    if (isError) {
+      myToast({
+        title: 'Error al crear la colección',
+        description: 'El nombre no debe superar los 25 caracteres.',
+        icon: IoWarningSharp,
+        iconColor: 'red.400',
+        bgColor: 'black',
+        width: '200px',
+        color: 'whitesmoke',
+        align: 'center',
+        padding: '1',
+        fntSize: 'md',
+        bxSize: 6,
+      });
+    }
+  }, [isError]);
+
   useEffect(() => {
     if (isSuccess) {
       onClose();
@@ -127,6 +146,7 @@ export function ModalCollection({
                     size='lg'
                     fontSize='sm'
                     name='name'
+                    maxLength={25}
                     bg={bgColorInput}
                   />
                 </FormControl>

diff --git a/src/components/profile/collections/MenuCollections.tsx b/src/components/profile/collections/MenuCollections.tsx
@@ -1,17 +1,26 @@
 import React, { useEffect } from 'react';
-import { Menu, MenuButton, MenuList, MenuItem, IconButton } from '@chakra-ui/react';
+import {
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  IconButton,
+  useDisclosure,
+} from '@chakra-ui/react';
 import { FiMoreVertical } from 'react-icons/fi';
 import { FaCheckCircle } from 'react-icons/fa';
 
 import { useDeleteCollections } from '@hooks/queries';
 import { useAuth } from '@contexts/AuthContext';
 import { useMyToast } from '@hooks/useMyToast';
+import { ModalConfirmation } from '@components/modals/ModalConfirmation';
 
 export function MenuCollections({ id, name, refetch }: any) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
   const myToast = useMyToast();
-  const { mutate, isSuccess } = useDeleteCollections();
+  const { mutate, isSuccess, isPending } = useDeleteCollections();
 
   useEffect(() => {
     if (isSuccess) {
@@ -37,6 +46,15 @@ export function MenuCollections({ id, name, refetch }: any) {
 
   return (
     <>
+      <ModalConfirmation
+        isOpen={isOpen}
+        title={name}
+        isStrong={true}
+        warningText='La colección será eliminada de manera permanente y no se podrá recuperar.'
+        onDeleteBook={() => deleteCollection(id)}
+        isPending={isPending}
+        onClose={onClose}
+      />
       <Menu>
         <MenuButton
           as={IconButton}
@@ -47,7 +65,7 @@ export function MenuCollections({ id, name, refetch }: any) {
           _active={{ bg: 'transparent' }}
         />
         <MenuList p='0' fontSize='sm'>
-          <MenuItem p='2' onClick={() => deleteCollection(id)}>
+          <MenuItem p='2' onClick={onOpen}>
             Eliminar colección
           </MenuItem>
         </MenuList>

diff --git a/src/hooks/useMyToast.tsx b/src/hooks/useMyToast.tsx
@@ -75,12 +75,14 @@ export function useMyToast() {
           justify='space-between'
         >
           <Flex mt='1' p='2' justify='space-between' align={align}>
-            <Icon as={icon} boxSize={bxSize} mr='2' color={iconColor} />
+            <Icon as={icon} boxSize={bxSize} mr='3' color={iconColor} />
             <Flex w={{ base: 'full', md: width }} direction='column'>
               <Box fontWeight='semibold' fontSize={fntSize} color={color}>
                 {title}
               </Box>
-              <Box color={color}>{description}</Box>
+              <Box color={color} mt='1' fontSize='sm'>
+                {description}
+              </Box>
             </Flex>
           </Flex>
           <CloseButton size='sm' onClick={onClose} color='whitesmoke' />

diff --git a/src/pages/profile/collections/CollectionDetail.tsx b/src/pages/profile/collections/CollectionDetail.tsx
@@ -24,14 +24,24 @@ import { SkeletonDCollection } from '@components/skeletons/SkeletonDCollection';
 import { useMyToast } from '@hooks/useMyToast';
 import { FaCheckCircle } from 'react-icons/fa';
 import { ModalCollection } from '@components/modals/ModalCollection';
+import { ModalConfirmation } from '@components/modals/ModalConfirmation';
 
 export function CollectionDetail() {
   const { collectionId } = useParams();
   const navigate = useNavigate();
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
   const myToast = useMyToast();
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const {
+    isOpen: isOpenEdit,
+    onOpen: onOpenEdit,
+    onClose: onCloseEdit,
+  } = useDisclosure();
+  const {
+    isOpen: isOpenDelete,
+    onOpen: onOpenDelete,
+    onClose: onCloseDelete,
+  } = useDisclosure();
   const {
     data,
     isPending: isPendingData,
@@ -150,10 +160,19 @@ export function CollectionDetail() {
         nameCollection={data?.name}
         collectionId={collectionId}
         isEditing={true}
-        isOpen={isOpen}
-        onClose={onClose}
+        isOpen={isOpenEdit}
+        onClose={onCloseEdit}
         refetch={refetch}
       />
+      <ModalConfirmation
+        isOpen={isOpenDelete}
+        title={data?.name}
+        isStrong={true}
+        warningText='La colección será eliminada de manera permanente y no se podrá recuperar.'
+        onDeleteBook={() => deleteCollection(data?.id)}
+        isPending={isPendingDelete}
+        onClose={onCloseDelete}
+      />
       <Flex m='0 auto'>
         <Flex
           w={{ base: '1315px', '2xl': '1580px' }}
@@ -171,21 +190,19 @@ export function CollectionDetail() {
           </Button>
           <Flex gap='3'>
             <Button
-              onClick={onOpen}
+              onClick={onOpenEdit}
               size='sm'
               fontWeight='normal'
               _hover={{ color: 'none' }}
             >
               Editar nombre
             </Button>
             <Button
-              onClick={() => deleteCollection(data?.id)}
+              onClick={onOpenDelete}
               size='sm'
               fontWeight='normal'
               bg='red.500'
               color='white'
-              loadingText='Eliminando...'
-              isLoading={isPendingDelete}
               _hover={{ color: 'none' }}
             >
               Eliminar colección