chore: created a new component and other improvements

Franqsanz · Oct 9, 2024 · 618cba2 · 618cba2
1 parent 000f5fd
commit 618cba2
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 51 deletions.
diff --git a/src/components/AllBooks.tsx b/src/components/AllBooks.tsx
@@ -21,6 +21,7 @@ import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
 import { ResultLength } from '@components/aside/ResultLength';
 import { MostViewed } from '@components/aside/MostViewed';
 import { MyContainer } from '@components/ui/MyContainer';
+import { MobileResultBar } from '@components/ui/MobileResultBar';
 
 export function AllBooks() {
   const { ref, inView } = useInView();
@@ -76,6 +77,7 @@ export function AllBooks() {
   return (
     <>
       <ScrollRestoration />
+      <MobileResultBar data={data} />
       <MyContainer>
         <Aside>
           <ResultLength data={data.pages[0].info.totalBooks} />

diff --git a/src/components/ui/MobileResultBar.tsx b/src/components/ui/MobileResultBar.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Flex, useColorModeValue } from '@chakra-ui/react';
+
+import { ResultLength } from '@components/aside/ResultLength';
+
+interface MobileResultBarType {
+  data: any;
+  children?: React.ReactNode;
+}
+
+export function MobileResultBar({ data, children }: MobileResultBarType) {
+  const grayColor = useColorModeValue('#E2E8F0', '#2D3748');
+
+  return (
+    <>
+      <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 ?? 0} />
+        {children}
+      </Flex>
+    </>
+  );
+}
diff --git a/src/hooks/queries.ts b/src/hooks/queries.ts
@@ -94,6 +94,8 @@ function useAllFilterOptions() {
     queryKey: [keys.filtersOptions],
     queryFn: getAllFilterOptions,
     refetchOnWindowFocus: false,
+    staleTime: 1000 * 60 * 10,
+    gcTime: 1000 * 60 * 15,
   });
 }
 

diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
@@ -1,14 +1,6 @@
 import React, { useEffect } from 'react';
 import { NavLink, ScrollRestoration } from 'react-router-dom';
-import {
-  Box,
-  Flex,
-  Icon,
-  Image,
-  Link,
-  Spinner,
-  useColorModeValue,
-} from '@chakra-ui/react';
+import { Box, Flex, Icon, Image, Link, Spinner } from '@chakra-ui/react';
 import { useInView } from 'react-intersection-observer';
 import { MdOutlineExplore } from 'react-icons/md';
 
@@ -25,9 +17,9 @@ import { MySliderCategories } from '@components/ui/MySliderCategories';
 import { MyContainer } from '@components/ui/MyContainer';
 import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
 import { emptyFavorites } from '@assets/assets';
+import { MobileResultBar } from '@components/ui/MobileResultBar';
 
 export default function Favorites() {
-  const grayColor = useColorModeValue('#E2E8F0', '#2D3748');
   const { ref, inView } = useInView();
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
@@ -145,18 +137,7 @@ 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>
+      <MobileResultBar data={data} />
       <MyContainer>{asideAndCardsUI}</MyContainer>
       <Box ref={ref}>{fetchingNextPageUI}</Box>
     </>

diff --git a/src/pages/FilteredData.tsx b/src/pages/FilteredData.tsx
@@ -9,7 +9,6 @@ import {
   useDisclosure,
   Box,
   Image,
-  useColorModeValue,
   Spinner,
   Alert,
   AlertIcon,
@@ -33,13 +32,13 @@ import { aboutCategories } from '../constant/constants';
 import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
 import { MyContainer } from '@components/ui/MyContainer';
 import { FilterAccordion } from '@components/filters/FilterAccordion';
+import { MobileResultBar } from '@components/ui/MobileResultBar';
 // import { AsideFilter } from '@components/filters/AsideFilter';
 
 export default function FilteredData() {
   const { ref, inView } = useInView();
   const location = useLocation();
   const { isOpen, onToggle, onClose } = useDisclosure();
-  const grayColor = useColorModeValue('#E2E8F0', '#2D3748');
   const [languages, setLanguages] = useState<string[]>([]);
   const [authors, setAuthors] = useState<string[]>([]);
   const [years, setYears] = useState<string[]>([]);
@@ -202,6 +201,11 @@ export default function FilteredData() {
           h='450px'
           overflowY='auto'
           pr='2'
+          // p='0 1.25rem 0 0.90rem'
+          // border='1px'
+          // boxShadow='xl'
+          // rounded='xl'
+          // borderColor='gray.200'
           sx={{
             '&::-webkit-scrollbar': {
               width: '5px',
@@ -213,7 +217,9 @@ export default function FilteredData() {
           }}
         >
           {isPendingFilter ? (
-            <Spinner thickness='4px' speed='0.40s' />
+            <Box m='auto'>
+              <Spinner thickness='2px' speed='0.40s' />
+            </Box>
           ) : (
             <FilterAccordion
               selectedMinPages={selectedMinPages}
@@ -296,19 +302,7 @@ export default function FilteredData() {
       <MainHead title={`${param} | XBuniverse`} />
       <ContainerTitle title={`${param}`} />
       <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={dataPaginated?.pages[0].info.totalBooks} />
-        {buttonFilter}
-      </Flex>
+      <MobileResultBar data={dataPaginated}>{buttonFilter}</MobileResultBar>
       <FilterDrawer
         isOpen={isOpen}
         onClose={onClose}

diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
@@ -28,10 +28,10 @@ import { NoData } from '@assets/assets';
 // import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
 import { SkeletonProfile } from '@components/skeletons/SkeletonProfile';
 import { MyContainer } from '@components/ui/MyContainer';
+import { MobileResultBar } from '@components/ui/MobileResultBar';
 // 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');
@@ -219,18 +219,7 @@ export function Profile() {
           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>
+      <MobileResultBar data={profileData} />
       <MyContainer>{asideAndCardsUI}</MyContainer>
       <Box ref={ref}>{fetchingNextPageUI}</Box>
     </>