chore: a toast was added when adding a favorite

Franqsanz · Sep 3, 2024 · edbf8c9 · edbf8c9
1 parent d48216f
commit edbf8c9
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 21 deletions.
diff --git a/src/components/forms/FormEdit.tsx b/src/components/forms/FormEdit.tsx
@@ -184,13 +184,12 @@ export function FormEdit({
       icon: FaCheckCircle,
       iconColor: 'green.700',
       bgColor: 'black',
-      position: 'top-right',
       width: '300px',
       color: 'white',
       align: 'center',
-      padding: '2',
+      padding: '1',
       fntSize: 'md',
-      bxSize: 4,
+      bxSize: 5,
     });
 
     navigate('/explore', { replace: true });
@@ -201,11 +200,10 @@ export function FormEdit({
       icon: IoWarningSharp,
       iconColor: 'red.400',
       bgColor: 'black',
-      position: 'top-right',
       width: '300px',
       color: 'white',
       align: 'center',
-      padding: '2',
+      padding: '1',
       fntSize: 'md',
       bxSize: 5,
     });

diff --git a/src/components/forms/NewBook.tsx b/src/components/forms/NewBook.tsx
@@ -167,11 +167,10 @@ export function FormNewBook() {
       icon: FaCheckCircle,
       iconColor: 'green.700',
       bgColor: 'black',
-      position: 'top-right',
       width: '300px',
       color: 'white',
       align: 'center',
-      padding: '2',
+      padding: '1',
       fntSize: 'md',
       bxSize: 5,
     });
@@ -184,11 +183,10 @@ export function FormNewBook() {
       icon: IoWarningSharp,
       iconColor: 'red.400',
       bgColor: 'black',
-      position: 'top-right',
       width: '300px',
       color: 'white',
       align: 'center',
-      padding: '2',
+      padding: '1',
       fntSize: 'md',
       bxSize: 5,
     });

diff --git a/src/hooks/useMyToast.tsx b/src/hooks/useMyToast.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
+import type { JSX } from 'react';
 import type { IconType } from 'react-icons';
 import {
   Box,
   CloseButton,
   Flex,
   Icon,
+  useBreakpointValue,
   // useColorModeValue,
   useToast,
 } from '@chakra-ui/react';
@@ -26,15 +28,19 @@ interface ToastType {
   fntSize: number | string;
   bgColor: string;
   iconColor?: string;
-  title: string;
-  position: ToastPosition | undefined;
+  title: string | JSX.Element;
+  position?: ToastPosition | undefined;
   description?: string;
   icon?: IconType;
   color: string;
 }
 
 export function useMyToast() {
   const toast = useToast();
+  const responsivePosition = useBreakpointValue({
+    base: 'top',
+    md: 'top-right',
+  });
 
   function myToast({
     width,
@@ -52,7 +58,7 @@ export function useMyToast() {
     color,
   }: ToastType) {
     toast({
-      position: `${position as ToastPosition}`,
+      position: (position as ToastPosition) || responsivePosition,
       duration: 3000,
       containerStyle: {
         fontFamily: 'sans-serif',
@@ -66,10 +72,11 @@ export function useMyToast() {
           border={`1px solid ${color}`}
           boxShadow='md'
           mt={marginT}
+          justify='space-between'
         >
           <Flex mt='1' p='2' justify='space-between' align={align}>
             <Icon as={icon} boxSize={bxSize} mr='2' color={iconColor} />
-            <Flex w={width} direction='column'>
+            <Flex w={{ base: 'full', md: width }} direction='column'>
               <Box fontWeight='semibold' fontSize={fntSize} color={color}>
                 {title}
               </Box>

diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
@@ -94,9 +94,15 @@ export default function Book() {
   }
 
   const [isFavorite, setIsFavorite] = useState<boolean>(bookObject.isFavorite);
-
-  const { mutate: mutateFavorite } = useFavoriteBook(bookObject.id, isFavorite);
-  const { mutate: mutateDelete, isSuccess, isPending } = useDeleteBook();
+  const { mutate: mutateFavorite, isSuccess: successFavorite } = useFavoriteBook(
+    bookObject.id,
+    isFavorite,
+  );
+  const {
+    mutate: mutateDelete,
+    isSuccess: successDelete,
+    isPending,
+  } = useDeleteBook();
 
   const isCurrentUserAuthor = currentUser && currentUser.uid === bookObject.userId;
 
@@ -128,6 +134,21 @@ export default function Book() {
     return await mutateFavorite(currentUser?.uid);
   }
 
+  if (successFavorite) {
+    myToast({
+      title: isFavorite ? 'Se agrego a favoritos' : 'Se quito de favoritos',
+      icon: FaCheckCircle,
+      iconColor: 'green.700',
+      bgColor: 'black',
+      width: '200px',
+      color: 'whitesmoke',
+      align: 'center',
+      padding: '1',
+      fntSize: 'md',
+      bxSize: 5,
+    });
+  }
+
   if (currentUser) {
     btnFavorite = (
       <Tooltip
@@ -148,14 +169,13 @@ export default function Book() {
     );
   }
 
-  if (isSuccess) {
+  if (successDelete) {
     myToast({
       title: 'Libro eliminado',
       description: 'Se ha eliminado exitosamente.',
       icon: FaCheckCircle,
       iconColor: 'green.700',
       bgColor: 'black',
-      position: 'top-right',
       width: '300px',
       color: 'white',
       align: 'center',
@@ -168,14 +188,14 @@ export default function Book() {
   }
 
   function handleDeleteBook() {
-    return mutateDelete(data.id);
+    return mutateDelete(bookObject.id);
   }
 
   function handleGoBack() {
     return navigate(-1);
   }
 
-  if (data.sourceLink === '') {
+  if (bookObject.sourceLink === '') {
     uiLink = (
       <Box mb='10' w={{ base: '100%', md: '380px' }}>
         <Box as='p' ml='2' fontSize='md' fontStyle='italic'>
@@ -188,7 +208,7 @@ export default function Book() {
       <Link
         w={{ base: '100%', md: '165px' }}
         display='block'
-        href={data.sourceLink}
+        href={bookObject.sourceLink}
         isExternal
         bg='green.500'
         color='black'