style: continued with the creation of the favorites view and other ch…

…anges
Franqsanz · Sep 2, 2024 · 3e2746e · 3e2746e
1 parent c78caa2
commit 3e2746e
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 85 deletions.
diff --git a/src/components/aside/AboutCategories.tsx b/src/components/aside/AboutCategories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Text } from '@chakra-ui/react';
 
-import { aboutCategories } from '../../data/links';
+import { aboutCategories } from '../../constant/constants';
 
 export function AboutCategories({ category }: any) {
   const filteredAboutCategories = aboutCategories.filter((item) => {

diff --git a/src/components/forms/FormEdit.tsx b/src/components/forms/FormEdit.tsx
@@ -23,7 +23,7 @@ import { BiImageAdd } from 'react-icons/bi';
 import { FaCheckCircle } from 'react-icons/fa';
 import { IoWarningSharp } from 'react-icons/io5';
 
-import { categories, formats, languages } from '../../data/links';
+import { categories, formats, languages } from '../../constant/constants';
 import { BookType, MyChangeEvent } from '@components/types';
 import { useUpdateBook } from '@hooks/queries';
 import { ModalCropper } from '@components/modals/ModalCropper';

diff --git a/src/components/forms/NewBook.tsx b/src/components/forms/NewBook.tsx
@@ -23,7 +23,7 @@ import { BiImageAdd } from 'react-icons/bi';
 import { FaCheckCircle } from 'react-icons/fa';
 import { IoWarningSharp } from 'react-icons/io5';
 
-import { categories, formats, languages } from '../../data/links';
+import { categories, formats, languages } from '../../constant/constants';
 import { BookType, MyChangeEvent } from '@components/types';
 import { useMutatePost, useCheckUser } from '@hooks/queries';
 import { ModalCropper } from '@components/modals/ModalCropper';
@@ -180,7 +180,7 @@ export function FormNewBook() {
   } else if (error) {
     myToast({
       title: 'Ha ocurrido un error',
-      description: 'No se ha podido guardar las modificaciones.',
+      description: 'No se ha podido realizar la publicación.',
       icon: IoWarningSharp,
       iconColor: 'red.400',
       bgColor: 'black',

diff --git a/src/components/nav/DesktopNav.tsx b/src/components/nav/DesktopNav.tsx
@@ -14,7 +14,7 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 
-import { navLink, accountLinks } from '../../data/links';
+import { navLink, accountLinks } from '../../constant/constants';
 import { MenuProfile } from '@components/nav/menu/MenuProfile';
 import { InputSearch } from '@components/forms/filters/InputSearch';
 import { ModalFilter } from '@components/modals/ModalFilter';
@@ -100,23 +100,28 @@ export function DesktopNav() {
             </Box>
             <Box>
               <List display='flex' alignItems='center'>
-                {navLink.map(({ name, href }) => (
-                  <ListItem key={name}>
-                    <Link
-                      as={NavLink}
-                      to={href as string}
-                      ml='7'
-                      fontWeight='medium'
-                      _activeLink={{
-                        borderBottom: '2px',
-                        borderColor: 'green.500',
-                      }}
-                      _hover={{ color: 'green.500' }}
-                    >
-                      {name}
-                    </Link>
-                  </ListItem>
-                ))}
+                {navLink
+                  .filter(({ name }) => {
+                    if (name === 'Mis favoritos' && !data) return false;
+                    return true;
+                  })
+                  .map(({ name, href }) => (
+                    <ListItem key={name}>
+                      <Link
+                        as={NavLink}
+                        to={href as string}
+                        ml='7'
+                        fontWeight='medium'
+                        _activeLink={{
+                          borderBottom: '2px',
+                          borderColor: 'green.500',
+                        }}
+                        _hover={{ color: 'green.500' }}
+                      >
+                        {name}
+                      </Link>
+                    </ListItem>
+                  ))}
               </List>
             </Box>
           </Flex>

diff --git a/src/components/nav/MobileNav.tsx b/src/components/nav/MobileNav.tsx
@@ -24,7 +24,7 @@ import {
   DrawerFooter,
 } from '@chakra-ui/react';
 
-import { navLink, accountLinks } from '../../data/links';
+import { navLink, accountLinks } from '../../constant/constants';
 import { InputSearch } from '@components/forms/filters/InputSearch';
 import { ModalFilter } from '@components/modals/ModalFilter';
 import { MenuProfile } from '@components/nav/menu/MenuProfile';
@@ -196,28 +196,33 @@ export function MobileNav() {
             <DrawerCloseButton />
             <DrawerBody>
               <List mt='10'>
-                {navLink.map(({ icon, name, href }) => (
-                  <ListItem key={name} my='2'>
-                    <Link
-                      display='flex'
-                      alignItems='center'
-                      onClick={onCloseMenu}
-                      as={NavLink}
-                      to={href as string}
-                      p='3'
-                      rounded='xl'
-                      fontWeight='medium'
-                      _hover={{
-                        bg: 'gray.700',
-                        border: 'none',
-                        color: 'green.500',
-                      }}
-                    >
-                      <Icon as={icon} boxSize='5' mr='5' />
-                      {name}
-                    </Link>
-                  </ListItem>
-                ))}
+                {navLink
+                  .filter(({ name }) => {
+                    if (name === 'Mis favoritos' && !data) return false;
+                    return true;
+                  })
+                  .map(({ icon, name, href }) => (
+                    <ListItem key={name} my='2'>
+                      <Link
+                        display='flex'
+                        alignItems='center'
+                        onClick={onCloseMenu}
+                        as={NavLink}
+                        to={href as string}
+                        p='3'
+                        rounded='xl'
+                        fontWeight='medium'
+                        _hover={{
+                          bg: 'gray.700',
+                          border: 'none',
+                          color: 'green.500',
+                        }}
+                      >
+                        <Icon as={icon} boxSize='5' mr='5' />
+                        {name}
+                      </Link>
+                    </ListItem>
+                  ))}
               </List>
             </DrawerBody>
             <DrawerFooter

diff --git a/src/data/links.ts → src/constant/constants.ts b/src/data/links.ts → src/constant/constants.ts
@@ -1,5 +1,5 @@
 import { GrHome } from 'react-icons/gr';
-import { MdOutlineExplore } from 'react-icons/md';
+import { MdOutlineExplore, MdOutlineFavoriteBorder } from 'react-icons/md';
 import { ImEyePlus } from 'react-icons/im';
 import { RiAccountCircleLine, RiLoginCircleLine } from 'react-icons/ri';
 
@@ -8,7 +8,12 @@ import { AboutType, LinkType, SelectBooksType } from '../components/types';
 const navLink: Array<LinkType> = [
   { name: 'Inicio', href: '/', icon: GrHome },
   { name: 'Explorar', href: 'explore', icon: MdOutlineExplore },
-  { name: 'Más Vistos', href: 'most-viewed', icon: ImEyePlus },
+  { name: 'Más vistos', href: 'most-viewed', icon: ImEyePlus },
+  {
+    name: 'Mis favoritos',
+    href: 'my-favorites',
+    icon: MdOutlineFavoriteBorder,
+  },
 ];
 
 const accountLinks: Array<LinkType> = [

diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Flex } from '@chakra-ui/react';
 
 import { useAllFavoriteByUser } from '@hooks/queries';
 import { useAuth } from '@contexts/AuthContext';
@@ -7,6 +8,9 @@ import { Card } from '@components/cards/Card';
 import { CardType } from '@components/types';
 import { MainHead } from '@components/layout/Head';
 import { ContainerTitle } from '@components/layout/ContainerTitle';
+import { Aside } from '@components/aside/Aside';
+import { ResultLength } from '@components/aside/ResultLength';
+import { MySliderCategories } from '@components/ui/MySliderCategories';
 
 export default function Favorites() {
   const { currentUser } = useAuth();
@@ -15,41 +19,55 @@ export default function Favorites() {
 
   return (
     <>
-      <MainHead title='Mis Favoritos | XBuniverse' />
-      <ContainerTitle title='Mis Favoritos' />
-      <MySimpleGrid>
-        {data?.pages.map((page, index) => (
-          <React.Fragment key={index}>
-            {page.results.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>
-              ),
-            )}
-          </React.Fragment>
-        ))}
-      </MySimpleGrid>
+      <MainHead title='Mis favoritos | XBuniverse' />
+      <ContainerTitle title='Mis favoritos' />
+      <MySliderCategories />
+      <Flex
+        as='article'
+        direction={{ base: 'column', md: 'row' }}
+        maxW={{ base: '1260px', '2xl': '1560px' }}
+        m='0 auto'
+        px={{ base: 5, md: 10, '2xl': 16 }}
+      >
+        <Aside>
+          <ResultLength data={data?.pages[0].info.totalBooks} />
+          {/* {aboutCategoriesUI}
+          {asideFilter}  */}
+        </Aside>
+        <MySimpleGrid>
+          {data?.pages.map((page, index) => (
+            <React.Fragment key={index}>
+              {page.results.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>
+                ),
+              )}
+            </React.Fragment>
+          ))}
+        </MySimpleGrid>
+      </Flex>
     </>
   );
 }
diff --git a/src/pages/MostViewed.tsx b/src/pages/MostViewed.tsx
@@ -14,8 +14,8 @@ export default function MostViewed() {
 
   return (
     <>
-      <MainHead title='Top 10 Más Vistos | XBuniverse' />
-      <ContainerTitle title='Top 10 Más Vistos' />
+      <MainHead title='Top 10 Más vistos | XBuniverse' />
+      <ContainerTitle title='Top 10 Más vistos' />
       <MySliderCategories />
       <Flex
         maxW={{ base: '1070px', '2xl': '1280px' }}

diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
@@ -31,7 +31,7 @@ import { FilterDrawer } from '@components/FilterDrawer';
 import { ResultLength } from '@components/aside/ResultLength';
 import { AboutCategories } from '@components/aside/AboutCategories';
 import { Lost } from '@assets/assets';
-import { aboutCategories } from '../data/links';
+import { aboutCategories } from '../constant/constants';
 import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
 
 export default function Search() {