diff --git a/src/components/modals/ModalCollection.tsx b/src/components/modals/ModalCollection.tsx index 3aec95a..a3a79eb 100644 --- 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} /> diff --git a/src/components/profile/collections/MenuCollections.tsx b/src/components/profile/collections/MenuCollections.tsx index c346da3..0907c15 100644 --- 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 ( <> + deleteCollection(id)} + isPending={isPending} + onClose={onClose} + /> - deleteCollection(id)}> + Eliminar colección diff --git a/src/hooks/useMyToast.tsx b/src/hooks/useMyToast.tsx index 5520422..a2c2300 100644 --- a/src/hooks/useMyToast.tsx +++ b/src/hooks/useMyToast.tsx @@ -75,12 +75,14 @@ export function useMyToast() { justify='space-between' > - + {title} - {description} + + {description} + diff --git a/src/pages/profile/collections/CollectionDetail.tsx b/src/pages/profile/collections/CollectionDetail.tsx index c240d80..ed6b627 100644 --- a/src/pages/profile/collections/CollectionDetail.tsx +++ b/src/pages/profile/collections/CollectionDetail.tsx @@ -24,6 +24,7 @@ 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(); @@ -31,7 +32,16 @@ export function CollectionDetail() { 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} /> + deleteCollection(data?.id)} + isPending={isPendingDelete} + onClose={onCloseDelete} + />