From 96bc101f9f4a46f7cb60645671e52c92a46fba04 Mon Sep 17 00:00:00 2001
From: franco sanchez <franco_genta@hotmail.com>
Date: Mon, 16 Sep 2024 12:47:29 -0300
Subject: [PATCH] chore: minor changes

---
 src/components/skeletons/SkeletonABooks.tsx   | 40 ++--------------
 .../skeletons/SkeletonContainer.tsx           | 46 ++++++++++++++++++
 src/components/skeletons/SkeletonProfile.tsx  | 47 ++-----------------
 src/pages/Favorites.tsx                       | 23 ++++++++-
 src/pages/profile/Profile.tsx                 | 15 +++++-
 src/store/useCategoryStore.ts                 |  1 +
 6 files changed, 89 insertions(+), 83 deletions(-)
 create mode 100644 src/components/skeletons/SkeletonContainer.tsx

diff --git a/src/components/skeletons/SkeletonABooks.tsx b/src/components/skeletons/SkeletonABooks.tsx
index b19c5d2..7da9362 100644
--- a/src/components/skeletons/SkeletonABooks.tsx
+++ b/src/components/skeletons/SkeletonABooks.tsx
@@ -1,24 +1,11 @@
 import React from 'react';
-import { Skeleton, SkeletonText, Flex, Box, Stack } from '@chakra-ui/react';
+import { Skeleton, Flex } from '@chakra-ui/react';
 
-import { MySimpleGrid } from '@components/ui/MySimpleGrid';
-import { MyContainer } from '@components/ui/MyContainer';
-import { Aside } from '@components/aside/Aside';
 import { SkeletonTags } from '@components/skeletons/SkeletonTags';
 import { SkeletonType } from '@components/types';
+import { SkeletonContainer } from '@components/skeletons/SkeletonContainer';
 
 export function SkeletonAllBooks({ showTags = true }: SkeletonType) {
-  const Cards = Array.from({ length: 12 }, (_, index) => (
-    <Stack key={index} spacing='2' mb='10'>
-      <Skeleton
-        w={{ base: '120px', sm: '150px', md: '200px' }}
-        h={{ base: '160px', sm: '200px', md: '300px' }}
-        rounded='lg'
-      ></Skeleton>
-      <SkeletonText mt='1' noOfLines={2} spacing='2' skeletonHeight='4' />
-    </Stack>
-  ));
-
   return (
     <>
       {showTags && (
@@ -30,28 +17,7 @@ export function SkeletonAllBooks({ showTags = true }: SkeletonType) {
           </Flex>
         </>
       )}
-      <MyContainer>
-        <Aside>
-          <Box mt={{ base: '7', md: '97px' }}>
-            <SkeletonText
-              mt='1'
-              noOfLines={2}
-              spacing='2'
-              skeletonHeight='5'
-              mb='10'
-            />
-            <SkeletonText
-              mt='1'
-              noOfLines={14}
-              spacing='2'
-              skeletonHeight='3'
-              mb='10'
-            />
-            <SkeletonText mt='1' noOfLines={4} spacing='2' skeletonHeight='3' />
-          </Box>
-        </Aside>
-        <MySimpleGrid>{Cards}</MySimpleGrid>
-      </MyContainer>
+      <SkeletonContainer />
     </>
   );
 }
diff --git a/src/components/skeletons/SkeletonContainer.tsx b/src/components/skeletons/SkeletonContainer.tsx
new file mode 100644
index 0000000..ff50d89
--- /dev/null
+++ b/src/components/skeletons/SkeletonContainer.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Box, Skeleton, SkeletonText, Stack } from '@chakra-ui/react';
+
+import { Aside } from '@components/aside/Aside';
+import { MyContainer } from '@components/ui/MyContainer';
+import { MySimpleGrid } from '@components/ui/MySimpleGrid';
+
+export function SkeletonContainer() {
+  const Cards = Array.from({ length: 12 }, (_, index) => (
+    <Stack key={index} spacing='2' mb='10'>
+      <Skeleton
+        w={{ base: '120px', sm: '150px', md: '200px' }}
+        h={{ base: '160px', sm: '200px', md: '300px' }}
+        rounded='lg'
+      ></Skeleton>
+      <SkeletonText mt='1' noOfLines={2} spacing='2' skeletonHeight='4' />
+    </Stack>
+  ));
+
+  return (
+    <>
+      <MyContainer>
+        <Aside>
+          <Box mt={{ base: '7', md: '97px' }}>
+            <SkeletonText
+              mt='1'
+              noOfLines={2}
+              spacing='2'
+              skeletonHeight='5'
+              mb='10'
+            />
+            <SkeletonText
+              mt='1'
+              noOfLines={14}
+              spacing='2'
+              skeletonHeight='3'
+              mb='10'
+            />
+            <SkeletonText mt='1' noOfLines={4} spacing='2' skeletonHeight='3' />
+          </Box>
+        </Aside>
+        <MySimpleGrid>{Cards}</MySimpleGrid>
+      </MyContainer>
+    </>
+  );
+}
diff --git a/src/components/skeletons/SkeletonProfile.tsx b/src/components/skeletons/SkeletonProfile.tsx
index b1981d9..5bbb299 100644
--- a/src/components/skeletons/SkeletonProfile.tsx
+++ b/src/components/skeletons/SkeletonProfile.tsx
@@ -1,29 +1,9 @@
 import React from 'react';
-import {
-  Box,
-  Flex,
-  Skeleton,
-  SkeletonCircle,
-  SkeletonText,
-  Stack,
-} from '@chakra-ui/react';
+import { Flex, Skeleton, SkeletonCircle } from '@chakra-ui/react';
 
-import { MyContainer } from '@components/ui/MyContainer';
-import { Aside } from '@components/aside/Aside';
-import { MySimpleGrid } from '@components/ui/MySimpleGrid';
+import { SkeletonContainer } from '@components/skeletons/SkeletonContainer';
 
 export function SkeletonProfile() {
-  const Cards = Array.from({ length: 12 }, (_, index) => (
-    <Stack key={index} spacing='2' mb='10'>
-      <Skeleton
-        w={{ base: '120px', sm: '150px', md: '200px' }}
-        h={{ base: '160px', sm: '200px', md: '300px' }}
-        rounded='lg'
-      ></Skeleton>
-      <SkeletonText mt='1' noOfLines={2} spacing='2' skeletonHeight='4' />
-    </Stack>
-  ));
-
   return (
     <>
       <Flex as='section' justify='center' direction='column' mt='7'>
@@ -31,28 +11,7 @@ export function SkeletonProfile() {
         <Skeleton w='235px' h='25px' m='0 auto' mt='6' />
         <Skeleton w='180px' h='20px' m='0 auto' my='3' />
       </Flex>
-      <MyContainer>
-        <Aside>
-          <Box mt={{ base: '7', md: '97px' }}>
-            <SkeletonText
-              mt='1'
-              noOfLines={2}
-              spacing='2'
-              skeletonHeight='5'
-              mb='10'
-            />
-            <SkeletonText
-              mt='1'
-              noOfLines={14}
-              spacing='2'
-              skeletonHeight='3'
-              mb='10'
-            />
-            <SkeletonText mt='1' noOfLines={4} spacing='2' skeletonHeight='3' />
-          </Box>
-        </Aside>
-        <MySimpleGrid>{Cards}</MySimpleGrid>
-      </MyContainer>
+      <SkeletonContainer />
     </>
   );
 }
diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
index fc42b94..4ae8d37 100644
--- a/src/pages/Favorites.tsx
+++ b/src/pages/Favorites.tsx
@@ -1,6 +1,14 @@
 import React, { useEffect } from 'react';
 import { NavLink, ScrollRestoration } from 'react-router-dom';
-import { Box, Flex, Icon, Image, Link, Spinner } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  Icon,
+  Image,
+  Link,
+  Spinner,
+  useColorModeValue,
+} from '@chakra-ui/react';
 import { useInView } from 'react-intersection-observer';
 import { MdOutlineExplore } from 'react-icons/md';
 
@@ -19,6 +27,7 @@ import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
 import { emptyFavorites } from '@assets/assets';
 
 export default function Favorites() {
+  const grayColor = useColorModeValue('#E2E8F0', '#2D3748');
   const { ref, inView } = useInView();
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
@@ -136,6 +145,18 @@ export default function Favorites() {
       <ContainerTitle title='Mis favoritos' />
       <ScrollRestoration />
       <MySliderCategories />
+      <Flex
+        display={{ base: 'flex', xl: 'none' }}
+        mt='4'
+        pt='3'
+        pb='3'
+        px={{ base: '7', md: '20', sm: '10' }}
+        justify={{ base: 'space-around', sm: 'space-between' }}
+        align='stretch'
+        borderY={`1px solid ${grayColor}`}
+      >
+        <ResultLength data={data?.pages[0].info.totalBooks} />
+      </Flex>
       <MyContainer>{asideAndCardsUI}</MyContainer>
       <Box ref={ref}>{fetchingNextPageUI}</Box>
     </>
diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
index c5724fc..6ee2525 100644
--- a/src/pages/profile/Profile.tsx
+++ b/src/pages/profile/Profile.tsx
@@ -31,6 +31,7 @@ import { MyContainer } from '@components/ui/MyContainer';
 // import { logOut } from '../../services/firebase/auth';
 
 export function Profile() {
+  const grayColor = useColorModeValue('#E2E8F0', '#2D3748');
   const bgCover = useColorModeValue('gray.100', 'gray.700');
   const { ref, inView } = useInView();
   const getToken = window.localStorage.getItem('app_tk');
@@ -213,11 +214,23 @@ export function Profile() {
           {createdAt}
         </Flex>
       </Flex>
-      <Flex justify='center' borderBottom='1px solid #A0AEC0'>
+      <Flex justify='center'>
         <Box mt='3' mb='1' fontSize={{ base: 'md', md: 'lg' }}>
           PUBLICACIONES
         </Box>
       </Flex>
+      <Flex
+        display={{ base: 'flex', xl: 'none' }}
+        mt='4'
+        pt='3'
+        pb='3'
+        px={{ base: '7', md: '20', sm: '10' }}
+        justify={{ base: 'space-around', sm: 'space-between' }}
+        align='stretch'
+        borderY={`1px solid ${grayColor}`}
+      >
+        <ResultLength data={profileData?.pages[0].info.totalBooks} />
+      </Flex>
       <MyContainer>{asideAndCardsUI}</MyContainer>
       <Box ref={ref}>{fetchingNextPageUI}</Box>
     </>
diff --git a/src/store/useCategoryStore.ts b/src/store/useCategoryStore.ts
index ded04f1..2cd1fff 100644
--- a/src/store/useCategoryStore.ts
+++ b/src/store/useCategoryStore.ts
@@ -10,6 +10,7 @@ interface CategoryType {
 const disabledRoutes = [
   '/explore',
   '/most-viewed',
+  '/my-favorites',
   '/books/filter/year/',
   '/books/filter/language/',
 ];