chore: minor changes

Franqsanz · Sep 16, 2024 · 96bc101 · 96bc101
1 parent 281fbeb
commit 96bc101
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 83 deletions.
diff --git 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
@@ -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
@@ -1,58 +1,17 @@
 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'>
         <SkeletonCircle size='100px' m='auto' />
         <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
@@ -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
@@ -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
@@ -10,6 +10,7 @@ interface CategoryType {
 const disabledRoutes = [
   '/explore',
   '/most-viewed',
+  '/my-favorites',
   '/books/filter/year/',
   '/books/filter/language/',
 ];