chore: profile improvements

Franqsanz · Feb 23, 2024 · 97887db · 97887db
1 parent 051f502
commit 97887db
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 68 deletions.
diff --git a/src/components/modals/ModalConfirmation.tsx b/src/components/modals/ModalConfirmation.tsx
@@ -58,7 +58,8 @@ export function ModalConfirmation({
               onClick={onDeleteBook}
               fontWeight='normal'
               fontSize='sm'
-              bg='red.400'
+              bg='red.500'
+              color='white'
               loadingText='Eliminando...'
               isLoading={isPending}
               _hover={{ color: 'none' }}

diff --git a/src/components/modals/ModalOptions.tsx b/src/components/modals/ModalOptions.tsx
@@ -26,11 +26,12 @@ export function ModalOptions({
           <ModalBody py='5'>
             <Flex direction='column' gap='2'>
               <Button
-                bg='red.400'
+                bg='red.500'
+                color='white'
                 fontWeight='normal'
                 fontSize='sm'
-                _hover={{ color: 'none' }}
                 onClick={onDeleteBook}
+                _hover={{ color: 'none' }}
               >
                 Eliminar
               </Button>

diff --git a/src/components/types.d.ts b/src/components/types.d.ts
@@ -186,6 +186,7 @@ interface MenuType {
 interface AuthContextType {
   currentUser: User | null;
   loading: boolean;
+  token: string;
 }
 
 interface AuthProviderType {

diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
@@ -8,6 +8,7 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
 function AuthProvider({ children }: AuthProviderType) {
   const [currentUser, setCurrentUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
+  const [token, setToken] = useState('');
   const auth = getAuth();
 
   useEffect(() => {
@@ -17,6 +18,7 @@ function AuthProvider({ children }: AuthProviderType) {
         try {
           const token = await user.getIdToken(true);
           window.localStorage.setItem('app_tk', token);
+          setToken(token);
           // document.cookie = `app_tk=${token}; SameSite=None; path=/;`;
         } catch (error) {
           console.error('Error al actualizar el token:', error);
@@ -46,6 +48,7 @@ function AuthProvider({ children }: AuthProviderType) {
   const value: AuthContextType = {
     currentUser,
     loading,
+    token,
   };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
@@ -1,6 +1,14 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { Box, Flex, Image, useColorModeValue } from '@chakra-ui/react';
+import React, { useState, useEffect } from 'react';
+import { NavLink, useParams } from 'react-router-dom';
+import {
+  Box,
+  Flex,
+  Image,
+  Link,
+  Icon,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { AiOutlineCloudUpload } from 'react-icons/ai';
 
 import { MySimpleGrid } from '@components/MySimpleGrid';
 import { Card } from '@components/cards/Card';
@@ -14,13 +22,98 @@ import { useAuth } from '@contexts/AuthContext';
 import { NoData } from '@assets/assets';
 // import { logOut } from '../../services/firebase/auth';
 
-export default function Profile() {
+export function Profile() {
   const getToken = window.localStorage.getItem('app_tk');
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
   const { username } = useParams();
   const { data } = useProfile(username, uid, getToken);
   const bgCover = useColorModeValue('gray.100', 'gray.700');
+  let asideAndCardsUI;
+
+  if (data.books.length > 0) {
+    asideAndCardsUI = (
+      <>
+        <Aside>
+          <ResultLength data={data.books.length} />
+          {/* {aboutCategoriesUI}
+          {asideFilter}  */}
+        </Aside>
+        <MySimpleGrid>
+          {data.books.map(
+            ({
+              id,
+              category,
+              language,
+              title,
+              authors,
+              synopsis,
+              sourceLink,
+              pathUrl,
+              image,
+            }: CardType) => (
+              <React.Fragment key={id}>
+                <Card
+                  id={id}
+                  category={category}
+                  language={language}
+                  title={title}
+                  authors={authors}
+                  synopsis={synopsis}
+                  sourceLink={sourceLink}
+                  pathUrl={pathUrl}
+                  image={image}
+                />
+              </React.Fragment>
+            ),
+          )}
+        </MySimpleGrid>
+      </>
+    );
+  } else {
+    asideAndCardsUI = (
+      <Flex w='full' direction='column' justify='center' align='center' my='10'>
+        <Box
+          my={{ base: 2, md: 7 }}
+          fontSize={{ base: 'lg', lg: '3xl' }}
+          textAlign={{ base: 'center', md: 'left' }}
+        >
+          Bienvenido a XBuniverse
+        </Box>
+        <Image
+          src={NoData}
+          maxW='full'
+          w={{ base: '200px', md: '400px' }}
+          mt='5'
+        />
+        <Box
+          my='7'
+          fontSize={{ base: 'sm', md: 'md', lg: 'lg' }}
+          textAlign={{ base: 'center', md: 'left' }}
+        >
+          Aún no hay publicacione
+        </Box>
+        <Link
+          w={{ base: '85%', md: '230px' }}
+          display='block'
+          as={NavLink}
+          to='/new-post'
+          bg='green.500'
+          color='black'
+          p='3'
+          border='1px'
+          rounded='lg'
+          textAlign='center'
+          _hover={{ outline: 'none', bg: 'green.600' }}
+        >
+          <Flex align='center' justify='center'>
+            <Icon as={AiOutlineCloudUpload} fontSize='25' mr='2' />
+            Crear publicación
+          </Flex>
+        </Link>
+      </Flex>
+    );
+  }
 
   return (
     <>
@@ -72,65 +165,7 @@ export default function Profile() {
         m='0 auto'
         px={{ base: 5, md: 10, '2xl': 16 }}
       >
-        <Aside>
-          <ResultLength data={data.books.length} />
-          {/* {aboutCategoriesUI}
-          {asideFilter}  */}
-        </Aside>
-        {data.books.length > 0 ? (
-          <MySimpleGrid>
-            {data.books.map(
-              ({
-                id,
-                category,
-                language,
-                title,
-                authors,
-                synopsis,
-                sourceLink,
-                pathUrl,
-                image,
-              }: CardType) => (
-                <React.Fragment key={id}>
-                  <Card
-                    id={id}
-                    category={category}
-                    language={language}
-                    title={title}
-                    authors={authors}
-                    synopsis={synopsis}
-                    sourceLink={sourceLink}
-                    pathUrl={pathUrl}
-                    image={image}
-                  />
-                </React.Fragment>
-              ),
-            )}
-          </MySimpleGrid>
-        ) : (
-          <Flex
-            w='full'
-            direction='column'
-            justify='center'
-            align='center'
-            mt='10'
-          >
-            <Image
-              src={NoData}
-              maxW='full'
-              w={{ base: '200px', md: '400px' }}
-              mt='5'
-            />
-            <Box
-              mt='7'
-              mb='10'
-              fontSize={{ base: 'sm', md: 'md', lg: 'lg' }}
-              textAlign={{ base: 'center', md: 'left' }}
-            >
-              Aún no hay publicaciones
-            </Box>
-          </Flex>
-        )}
+        {asideAndCardsUI}
       </Flex>
     </>
   );

diff --git a/src/pages/profile/account/MyAccount.tsx b/src/pages/profile/account/MyAccount.tsx
@@ -38,7 +38,14 @@ export function MyAccount() {
       <MainHead title={`Mi Cuenta | XBuniverse`} />
       <ContainerTitle title='Mi Cuenta' />
       <Flex justify='center' h='230px' mt='70px'>
-        <Button bgColor='red.300' onClick={onOpen}>
+        <Button
+          fontWeight='normal'
+          bg='red.500'
+          color='white'
+          onClick={onOpen}
+          _hover={{ color: 'none' }}
+          _active={{ bg: 'red.500' }}
+        >
           Eliminar cuenta
         </Button>
         <ModalConfirmation

diff --git a/src/routes.tsx b/src/routes.tsx
@@ -12,13 +12,14 @@ import { SkeletonDetailsBook } from '@components/skeletons/SkeletonDBook';
 import { PrivateRoute } from '@components/PrivateRoute';
 
 import { MyAccount } from '@pages/profile/account/MyAccount';
+import { Profile } from '@pages/profile/Profile';
 
 const PrivacyPolicies = lazy(() => import('@pages/PrivacyPolicies'));
 const Explore = lazy(() => import('@pages/Explore'));
 const Book = lazy(() => import('@pages/Book'));
 const Search = lazy(() => import('@pages/Search'));
 const NewBook = lazy(() => import('@pages/NewBook'));
-const Profile = lazy(() => import('@pages/profile/Profile'));
+// const Profile = lazy(() => import('@pages/profile/Profile'));
 
 const routes = createBrowserRouter([
   {