chore: a new view has been created and some things improved

Franqsanz · Feb 21, 2024 · 20f7d96 · 20f7d96
1 parent abbd8bf
commit 20f7d96
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 31 deletions.
diff --git a/.github/workflows/type-check.yml b/.github/workflows/type-check.yml
@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
@@ -24,5 +24,5 @@ jobs:
         run: npm ci
       - name: Run TypeScript type check
         run: npm run ts-lint
-      - name: Typecheck
-        uses: andoshin11/[email protected]
+      # - name: Typecheck
+      #   uses: andoshin11/[email protected]
diff --git a/src/components/forms/FormEdit.tsx b/src/components/forms/FormEdit.tsx
@@ -267,7 +267,8 @@ export function FormEdit({
       title: 'Guardado',
       description: 'Modificaciones guardadas exitosamente.',
       icon: FaCheckCircle,
-      bgColor: 'green.50',
+      iconColor: 'green.700',
+      bgColor: 'black',
     });
 
     navigate('/explore', { replace: true });
@@ -276,7 +277,8 @@ export function FormEdit({
       title: 'Ha ocurrido un error',
       description: 'No se ha podido guardar las modificaciones.',
       icon: IoWarningSharp,
-      bgColor: 'red.400',
+      iconColor: 'red.400',
+      bgColor: 'black',
     });
   }
 

diff --git a/src/components/nav/menu/MenuProfile.tsx b/src/components/nav/menu/MenuProfile.tsx
@@ -64,6 +64,13 @@ export function MenuProfile({ displayName, photoURL, username }: MenuType) {
           >
             Crear Publicación
           </MenuItem>
+          <MenuItem
+            as={NavLink}
+            to='/my-account'
+            _hover={{ textDecoration: 'none' }}
+          >
+            Cuenta
+          </MenuItem>
         </MenuGroup>
         <MenuDivider />
         <MenuGroup>

diff --git a/src/hooks/useMyToast.tsx b/src/hooks/useMyToast.tsx
@@ -11,22 +11,22 @@ import {
 export function useMyToast() {
   const toast = useToast();
 
-  function myToast({ bgColor, title, description, icon }) {
+  function myToast({ bgColor, iconColor, title, description, icon }) {
     toast({
-      position: 'bottom-right',
+      position: 'bottom-left',
       containerStyle: {
         fontFamily: 'sans-serif',
       },
       render: ({ onClose }) => (
         <Flex color='black' p='2' bg={bgColor} rounded='lg' boxShadow='md'>
           <Flex mt='1' p='2'>
-            <Icon as={icon} boxSize='5' mt='1' mr='2' />
-            <Flex direction='column'>
+            <Icon as={icon} boxSize='5' mt='1' mr='2' color={iconColor} />
+            <Flex direction='column' color='whitesmoke'>
               <Box fontWeight='semibold'>{title}</Box>
               <Box>{description}</Box>
             </Flex>
           </Flex>
-          <CloseButton size='sm' onClick={onClose} />
+          <CloseButton size='sm' onClick={onClose} color='whitesmoke' />
         </Flex>
       ),
     });

diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
@@ -21,6 +21,7 @@ import {
   FiMoreHorizontal,
 } from 'react-icons/fi';
 import { BsTag } from 'react-icons/bs';
+import { FaCheckCircle } from 'react-icons/fa';
 import LazyLoad from 'react-lazy-load';
 
 import { useBook, useDeleteBook } from '@hooks/querys';
@@ -35,6 +36,7 @@ import { ModalOptions } from '@components/modals/ModalOptions';
 import { ModalConfirmation } from '@components/modals/ModalConfirmation';
 import { ModalForm } from '@components/modals/ModalForm';
 import { useAuth } from '@contexts/AuthContext';
+import { useMyToast } from '@hooks/useMyToast';
 
 const Categories = lazy(() => import('@components/Categories'));
 const MoreBooksAuthors = lazy(
@@ -53,7 +55,7 @@ export default function Book() {
   const infoTextColor = useColorModeValue('gray.600', 'gray.400');
   const bgButton = useColorModeValue('white', 'black');
   const navigate = useNavigate();
-  const toast = useToast();
+  const myToast = useMyToast();
   const {
     isOpen: isOpenOptions,
     onOpen: onOpenOptions,
@@ -99,14 +101,12 @@ export default function Book() {
   }
 
   if (isSuccess) {
-    toast({
+    myToast({
       title: 'Libro eliminado',
       description: 'Se ha eliminado exitosamente.',
-      position: 'bottom-right',
-      isClosable: true,
-      containerStyle: {
-        fontFamily: 'sans-serif',
-      },
+      icon: FaCheckCircle,
+      iconColor: 'green.700',
+      bgColor: 'black',
     });
 
     navigate('/explore', { replace: true });

diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react';
-import { useParams, useLocation, useNavigate } from 'react-router-dom';
-import { Box, Button, Flex, Image, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { Box, Flex, Image, useColorModeValue } from '@chakra-ui/react';
 
 import { MySimpleGrid } from '@components/MySimpleGrid';
 import { Card } from '@components/cards/Card';
@@ -11,16 +11,13 @@ import { parseDate } from '@utils/utils';
 import { CardType } from '@components/types';
 import ResultLength from '@components/ResultLength';
 import { useAuth } from '@contexts/AuthContext';
-import { useAccountActions } from '@hooks/useAccountActions';
 // import { logOut } from '../../services/firebase/auth';
 
 export default function Profile() {
   const getToken = window.localStorage.getItem('app_tk');
-  const { deleteAccount } = useAccountActions();
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
   const { username } = useParams();
-  const navigate = useNavigate();
   const { data } = useProfile(username, uid, getToken);
   const bgCover = useColorModeValue('gray.100', 'gray.700');
 
@@ -67,14 +64,6 @@ export default function Profile() {
         <Box mt={{ base: 5, md: 8 }} mb='1' fontSize={{ base: 'md', md: 'lg' }}>
           PUBLICACIONES
         </Box>
-        <Button
-          onClick={() => {
-            deleteAccount();
-            navigate('/');
-          }}
-        >
-          Eliminar cuenta
-        </Button>
       </Flex>
       <Flex
         direction={{ base: 'column', md: 'row' }}

diff --git a/src/pages/profile/account/MyAccount.tsx b/src/pages/profile/account/MyAccount.tsx
@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { useParams, useLocation, useNavigate } from 'react-router-dom';
+import { Box, Button, Flex, Image, useColorModeValue } from '@chakra-ui/react';
+
+// import { MySimpleGrid } from '@components/MySimpleGrid';
+// import { Card } from '@components/cards/Card';
+// import { Aside } from '@components/Aside';
+import { MainHead } from '@components/Head';
+// import { useProfile } from '@hooks/querys';
+// import { parseDate } from '@utils/utils';
+// import { CardType } from '@components/types';
+// import ResultLength from '@components/ResultLength';
+// import { useAuth } from '@contexts/AuthContext';
+import { useAccountActions } from '@hooks/useAccountActions';
+import { ContainerTitle } from '@components/ContainerTitle';
+// import { logOut } from '../../services/firebase/auth';
+
+export function MyAccount() {
+  // const getToken = window.localStorage.getItem('app_tk');
+  const { deleteAccount } = useAccountActions();
+  // const { currentUser } = useAuth();
+  // const uid = currentUser?.uid;
+  // const { username } = useParams();
+  const navigate = useNavigate();
+  // const { data } = useProfile(username, uid, getToken);
+  // const bgCover = useColorModeValue('gray.100', 'gray.700');
+
+  return (
+    <>
+      <MainHead title={`Mi Cuenta | XBuniverse`} />
+      <ContainerTitle title='Mi Cuenta' />
+      <Flex justify='center' h='230px' mt='70px'>
+        <Button
+          bgColor='red.300'
+          onClick={() => {
+            deleteAccount();
+            navigate('/');
+          }}
+        >
+          Eliminar cuenta
+        </Button>
+      </Flex>
+    </>
+  );
+}
diff --git a/src/routes.tsx b/src/routes.tsx
@@ -11,6 +11,8 @@ import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
 import { SkeletonDetailsBook } from '@components/skeletons/SkeletonDBook';
 import { PrivateRoute } from '@components/PrivateRoute';
 
+import { MyAccount } from '@pages/profile/account/MyAccount';
+
 const PrivacyPolicies = lazy(() => import('@pages/PrivacyPolicies'));
 const Explore = lazy(() => import('@pages/Explore'));
 const Book = lazy(() => import('@pages/Book'));
@@ -96,6 +98,14 @@ const routes = createBrowserRouter([
           </PrivateRoute>
         ),
       },
+      {
+        path: '/my-account',
+        element: (
+          <PrivateRoute>
+            <MyAccount />
+          </PrivateRoute>
+        ),
+      },
       {
         path: '*',
         element: <ErrorPage />,