chore: improved hook toast and minor enhancements

Franqsanz · May 14, 2024 · a2aaed0 · a2aaed0
1 parent 8af9698
commit a2aaed0
Show file tree

Hide file tree

Showing 8 changed files with 299 additions and 276 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,14 +33,14 @@
     "million": "3.0.6",
     "nanoid": "5.0.7",
     "pako": "2.1.0",
-    "react": "18.3.0",
+    "react": "18.3.1",
     "react-cropper": "2.3.3",
-    "react-dom": "18.3.0",
+    "react-dom": "18.3.1",
     "react-error-boundary": "4.0.13",
     "react-helmet-async": "2.0.4",
     "react-hook-form": "7.51.3",
-    "react-icons": "5.1.0",
-    "react-intersection-observer": "9.8.2",
+    "react-icons": "5.2.1",
+    "react-intersection-observer": "9.10.2",
     "react-lazy-load": "4.0.1",
     "react-router-dom": "6.23.0",
     "react-share": "4.4.1",
@@ -52,22 +52,22 @@
     "@testing-library/react": "15.0.5",
     "@types/cypress": "1.1.3",
     "@types/pako": "2.0.3",
-    "@types/react": "18.3.0",
+    "@types/react": "18.3.2",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.7.1",
-    "@typescript-eslint/parser": "7.7.1",
+    "@typescript-eslint/eslint-plugin": "7.9.0",
+    "@typescript-eslint/parser": "7.9.0",
     "@vitejs/plugin-react": "4.2.1",
     "@vitest/ui": "1.5.2",
     "cypress": "13.8.1",
-    "eslint": "8.53.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
-    "eslint-plugin-cypress": "3.0.2",
+    "eslint-plugin-cypress": "3.2.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.34.1",
-    "eslint-plugin-react-hooks": "4.6.1",
+    "eslint-plugin-react-hooks": "4.6.2",
     "husky": "9.0.11",
     "jsdom": "24.0.0",
     "lint-staged": "15.2.2",

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,14 +1,53 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import { Box, Flex, useColorModeValue, Link } from '@chakra-ui/react';
 
 import { useNetworkState } from '@hooks/useNetworkState';
+import { useMyToast } from '@hooks/useMyToast';
+import { FaCheckCircle } from 'react-icons/fa';
+import { MdError } from 'react-icons/md';
 
 export function Footer() {
+  const myToast = useMyToast();
   const bgFooter = useColorModeValue('gray.100', 'gray.900');
   const networkState = useNetworkState();
+  const [prevNetworkState, setPrevNetworkState] = useState(networkState);
   let connectionState;
 
+  useEffect(() => {
+    if (prevNetworkState !== networkState) {
+      setPrevNetworkState(networkState);
+
+      if (networkState === 'offline') {
+        myToast({
+          title: 'Conexión Perdida',
+          icon: MdError,
+          iconColor: 'red.600',
+          bgColor: 'red.50',
+          position: 'bottom',
+          color: 'red.600',
+          width: 'auto',
+          align: 'center',
+          fntSize: 'sm',
+          bxSize: 4,
+        });
+      } else if (networkState === 'online') {
+        myToast({
+          title: 'De nuevo en línea',
+          icon: FaCheckCircle,
+          iconColor: 'green.800',
+          bgColor: '#EAFFE5',
+          position: 'bottom',
+          color: 'green.800',
+          width: 'auto',
+          align: 'center',
+          fntSize: 'sm',
+          bxSize: 4,
+        });
+      }
+    }
+  }, [networkState, prevNetworkState, myToast]);
+
   if (networkState === 'online') {
     connectionState = (
       <Box w='14px' h='14px' rounded='full' bg='green.500'></Box>
@@ -45,11 +84,11 @@ export function Footer() {
           Políticas de Privacidad
         </Link>
         <Flex
-          mt='3'
+          mt='4'
           align='center'
           fontSize='xs'
           bg='black'
-          p='2'
+          p='1.5'
           rounded='lg'
           color='#EAEAEA'
         >

diff --git a/src/components/forms/FormEdit.tsx b/src/components/forms/FormEdit.tsx
@@ -186,6 +186,13 @@ export function FormEdit({
       icon: FaCheckCircle,
       iconColor: 'green.700',
       bgColor: 'black',
+      position: 'top-right',
+      width: '300px',
+      color: 'white',
+      align: 'center',
+      padding: '2',
+      fntSize: 'md',
+      bxSize: 4,
     });
 
     navigate('/explore', { replace: true });
@@ -196,6 +203,13 @@ export function FormEdit({
       icon: IoWarningSharp,
       iconColor: 'red.400',
       bgColor: 'black',
+      position: 'top-right',
+      width: '300px',
+      color: 'white',
+      align: 'center',
+      padding: '2',
+      fntSize: 'md',
+      bxSize: 5,
     });
   }
 

diff --git a/src/components/forms/NewBook.tsx b/src/components/forms/NewBook.tsx
@@ -169,6 +169,13 @@ export function FormNewBook() {
       icon: FaCheckCircle,
       iconColor: 'green.700',
       bgColor: 'black',
+      position: 'top-right',
+      width: '300px',
+      color: 'white',
+      align: 'center',
+      padding: '2',
+      fntSize: 'md',
+      bxSize: 5,
     });
 
     navigate(`/${data.username}`, { replace: true });
@@ -179,6 +186,13 @@ export function FormNewBook() {
       icon: IoWarningSharp,
       iconColor: 'red.400',
       bgColor: 'black',
+      position: 'top-right',
+      width: '300px',
+      color: 'white',
+      align: 'center',
+      padding: '2',
+      fntSize: 'md',
+      bxSize: 5,
     });
   }
 

diff --git a/src/hooks/useMyToast.tsx b/src/hooks/useMyToast.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type { IconType } from 'react-icons';
 import {
   Box,
   CloseButton,
@@ -8,30 +9,70 @@ import {
   useToast,
 } from '@chakra-ui/react';
 
+type ToastPosition =
+  | 'bottom'
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+interface ToastType {
+  width: string;
+  padding?: string;
+  marginT?: string;
+  align: string;
+  bxSize: number | string;
+  fntSize: number | string;
+  bgColor: string;
+  iconColor?: string;
+  title: string;
+  position: ToastPosition | undefined;
+  description?: string;
+  icon?: IconType;
+  color: string;
+}
+
 export function useMyToast() {
   const toast = useToast();
 
-  function myToast({ bgColor, iconColor, title, description, icon }) {
+  function myToast({
+    width,
+    padding,
+    marginT,
+    align,
+    bxSize,
+    fntSize,
+    bgColor,
+    iconColor,
+    title,
+    position,
+    description,
+    icon,
+    color,
+  }: ToastType) {
     toast({
-      position: 'top-right',
+      position: `${position as ToastPosition}`,
       duration: 3000,
       containerStyle: {
         fontFamily: 'sans-serif',
       },
       render: ({ onClose }) => (
         <Flex
           color='black'
-          p='2'
+          p={padding}
           bg={bgColor}
           rounded='lg'
           boxShadow='md'
-          mt='14'
+          mt={marginT}
         >
-          <Flex mt='1' p='2' justify='space-between'>
-            <Icon as={icon} boxSize='5' mt='1' mr='2' color={iconColor} />
-            <Flex w='300px' direction='column' color='whitesmoke'>
-              <Box fontWeight='semibold'>{title}</Box>
-              <Box>{description}</Box>
+          <Flex mt='1' p='2' justify='space-between' align={align}>
+            <Icon as={icon} boxSize={bxSize} mr='2' color={iconColor} />
+            <Flex w={width} direction='column'>
+              <Box fontWeight='semibold' fontSize={fntSize} color={color}>
+                {title}
+              </Box>
+              <Box color={color}>{description}</Box>
             </Flex>
           </Flex>
           <CloseButton size='sm' onClick={onClose} color='whitesmoke' />

diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
@@ -108,6 +108,13 @@ export default function Book() {
       icon: FaCheckCircle,
       iconColor: 'green.700',
       bgColor: 'black',
+      position: 'top-right',
+      width: '300px',
+      color: 'white',
+      align: 'center',
+      padding: '2',
+      fntSize: 'md',
+      bxSize: 5,
     });
 
     navigate('/explore', { replace: true });

diff --git a/src/pages/MostViewed.tsx b/src/pages/MostViewed.tsx
@@ -12,7 +12,7 @@ export default function MostViewed() {
 
   return (
     <>
-      <MainHead title={`Top 10 Más Vistos | XBuniverse`} />
+      <MainHead title='Top 10 Más Vistos | XBuniverse' />
       <ContainerTitle title='Top 10 Más Vistos' />
       <MySimpleGrid>
         {data?.map(