From 0af6e0e94f5640ced1babaaa8cde0bb8d8e0857e Mon Sep 17 00:00:00 2001
From: franco sanchez <franco_genta@hotmail.com>
Date: Thu, 12 Sep 2024 12:33:20 -0300
Subject: [PATCH] a small problem was corrected and a new Skeleton was added

---
 src/components/forms/NewBook.tsx             | 42 ++++++++++----
 src/components/skeletons/SkeletonABooks.tsx  | 10 +---
 src/components/skeletons/SkeletonProfile.tsx | 58 +++++++++++++++++++
 src/hooks/RouteWatcher.ts                    | 19 +++++++
 src/hooks/queries.ts                         |  2 +-
 src/hooks/useScrollYRestoration.ts           |  2 +-
 src/pages/Favorites.tsx                      | 60 ++++++++++----------
 src/pages/profile/Profile.tsx                |  5 +-
 src/routes.tsx                               |  2 +
 9 files changed, 147 insertions(+), 53 deletions(-)
 create mode 100644 src/components/skeletons/SkeletonProfile.tsx
 create mode 100644 src/hooks/RouteWatcher.ts

diff --git a/src/components/forms/NewBook.tsx b/src/components/forms/NewBook.tsx
index 6c29b10..9fbf674 100644
--- a/src/components/forms/NewBook.tsx
+++ b/src/components/forms/NewBook.tsx
@@ -113,12 +113,12 @@ export function FormNewBook() {
     handleImage(e, setCropData, onOpen);
   }
 
-  function handleRatingChange(newRating: number) {
-    setBooks((books) => ({
-      ...books,
-      rating: newRating,
-    }));
-  }
+  // function handleRatingChange(newRating: number) {
+  //   setBooks((books) => ({
+  //     ...books,
+  //     rating: newRating,
+  //   }));
+  // }
 
   function getCropData() {
     getCrop(crop, setPreviewImg, books, setBooks, onClose);
@@ -551,7 +551,7 @@ export function FormNewBook() {
                   placeholder='Elija un Formato'
                 />
               </FormControl>
-              <FormControl mt={{ base: 5, md: 8 }}>
+              <FormControl mt={{ base: 5, md: 7 }}>
                 <Flex align='center' mb='9px'>
                   <FormLabel htmlFor='categoria' m='0'>
                     Calificación{' '}
@@ -560,11 +560,31 @@ export function FormNewBook() {
                     </Box>
                   </FormLabel>
                 </Flex>
-                <Rating
-                  style={{ maxWidth: 190 }}
-                  value={books.rating}
-                  onChange={handleRatingChange}
+                <Select
+                  id='rating'
+                  name='rating'
+                  size={{ base: 'md', md: 'lg' }}
+                  variant='filled'
+                  onChange={(selectedOption) =>
+                    handleFieldChange('rating', selectedOption?.value)
+                  }
+                  options={[
+                    { value: 0, label: 0 },
+                    { value: 1, label: 1 },
+                    { value: 1.5, label: 1.5 },
+                    { value: 2, label: 2 },
+                    { value: 2.5, label: 2.5 },
+                    { value: 3, label: 3 },
+                    { value: 3.5, label: 3.5 },
+                    { value: 4, label: 4 },
+                    { value: 4.5, label: 4.5 },
+                    { value: 5, label: 5 },
+                  ]}
+                  placeholder='Elija una Calificación'
                 />
+                <Box mt='3.5'>
+                  <Rating style={{ maxWidth: 190 }} value={books.rating} readOnly />
+                </Box>
               </FormControl>
               <Box mt={{ base: 10, md: '22rem' }}>
                 <Button
diff --git a/src/components/skeletons/SkeletonABooks.tsx b/src/components/skeletons/SkeletonABooks.tsx
index 7b03d7b..b19c5d2 100644
--- a/src/components/skeletons/SkeletonABooks.tsx
+++ b/src/components/skeletons/SkeletonABooks.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Skeleton, SkeletonText, Flex, Box, Stack } 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';
@@ -29,12 +30,7 @@ export function SkeletonAllBooks({ showTags = true }: SkeletonType) {
           </Flex>
         </>
       )}
-      <Flex
-        direction={{ base: 'column', md: 'row' }}
-        maxW={{ base: '1260px', '2xl': '1560px' }}
-        m='0 auto'
-        px={{ base: 5, md: 10, '2xl': 16 }}
-      >
+      <MyContainer>
         <Aside>
           <Box mt={{ base: '7', md: '97px' }}>
             <SkeletonText
@@ -55,7 +51,7 @@ export function SkeletonAllBooks({ showTags = true }: SkeletonType) {
           </Box>
         </Aside>
         <MySimpleGrid>{Cards}</MySimpleGrid>
-      </Flex>
+      </MyContainer>
     </>
   );
 }
diff --git a/src/components/skeletons/SkeletonProfile.tsx b/src/components/skeletons/SkeletonProfile.tsx
new file mode 100644
index 0000000..b1981d9
--- /dev/null
+++ b/src/components/skeletons/SkeletonProfile.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  Box,
+  Flex,
+  Skeleton,
+  SkeletonCircle,
+  SkeletonText,
+  Stack,
+} from '@chakra-ui/react';
+
+import { MyContainer } from '@components/ui/MyContainer';
+import { Aside } from '@components/aside/Aside';
+import { MySimpleGrid } from '@components/ui/MySimpleGrid';
+
+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>
+    </>
+  );
+}
diff --git a/src/hooks/RouteWatcher.ts b/src/hooks/RouteWatcher.ts
new file mode 100644
index 0000000..ac880f4
--- /dev/null
+++ b/src/hooks/RouteWatcher.ts
@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export function RouteWatcher() {
+  const location = useLocation();
+  const disabledRoutes = ['/explore', '/book/view/'];
+
+  const isDisabled = disabledRoutes.some((route) =>
+    location.pathname.startsWith(route),
+  );
+
+  useEffect(() => {
+    if (!isDisabled) {
+      window.sessionStorage.removeItem('/explore');
+    }
+  }, [location, isDisabled]);
+
+  return null;
+}
diff --git a/src/hooks/queries.ts b/src/hooks/queries.ts
index 035e343..5528e78 100644
--- a/src/hooks/queries.ts
+++ b/src/hooks/queries.ts
@@ -221,7 +221,7 @@ function useCheckUser(id: string | undefined) {
   return useQuery({
     queryKey: [keys.checkUser, id],
     queryFn: () => getCheckUser(id),
-    gcTime: 24 * 3600 * 1000,
+    gcTime: 0,
     enabled: false,
     refetchOnWindowFocus: false,
     retry: false,
diff --git a/src/hooks/useScrollYRestoration.ts b/src/hooks/useScrollYRestoration.ts
index ea3b119..c57ac1e 100644
--- a/src/hooks/useScrollYRestoration.ts
+++ b/src/hooks/useScrollYRestoration.ts
@@ -11,7 +11,7 @@ export function useScrollYRestoration(loading: boolean) {
 
     window.addEventListener('scroll', handleScroll);
 
-    const scrollPosition = sessionStorage.getItem(location.pathname);
+    const scrollPosition = window.sessionStorage.getItem(location.pathname);
 
     if (scrollPosition && !loading) {
       window.scrollTo(0, JSON.parse(scrollPosition));
diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
index 789f9c8..fc42b94 100644
--- a/src/pages/Favorites.tsx
+++ b/src/pages/Favorites.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, ScrollRestoration } from 'react-router-dom';
 import { Box, Flex, Icon, Image, Link, Spinner } from '@chakra-ui/react';
 import { useInView } from 'react-intersection-observer';
 import { MdOutlineExplore } from 'react-icons/md';
@@ -45,36 +45,33 @@ export default function Favorites() {
         <MySimpleGrid>
           {data?.pages.map((page, index) => (
             <React.Fragment key={index}>
-              {page.results
-                // .slice()
-                // .reverse()
-                .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>
-                  ),
-                )}
+              {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>
@@ -137,6 +134,7 @@ export default function Favorites() {
     <>
       <MainHead title='Mis favoritos | XBuniverse' />
       <ContainerTitle title='Mis favoritos' />
+      <ScrollRestoration />
       <MySliderCategories />
       <MyContainer>{asideAndCardsUI}</MyContainer>
       <Box ref={ref}>{fetchingNextPageUI}</Box>
diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
index cd2fb56..c5724fc 100644
--- a/src/pages/profile/Profile.tsx
+++ b/src/pages/profile/Profile.tsx
@@ -25,7 +25,8 @@ import { CardType } from '@components/types';
 import { ResultLength } from '@components/aside/ResultLength';
 import { useAuth } from '@contexts/AuthContext';
 import { NoData } from '@assets/assets';
-import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
+// import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
+import { SkeletonProfile } from '@components/skeletons/SkeletonProfile';
 import { MyContainer } from '@components/ui/MyContainer';
 // import { logOut } from '../../services/firebase/auth';
 
@@ -57,7 +58,7 @@ export function Profile() {
   }, [inView]);
 
   if (isPending) {
-    return <SkeletonAllBooks showTags={true} />;
+    return <SkeletonProfile />;
   }
 
   if (error) {
diff --git a/src/routes.tsx b/src/routes.tsx
index fea5d1c..6052714 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -13,6 +13,7 @@ import { PrivateRoute } from '@components/nav/PrivateRoute';
 
 import { MyAccount } from '@pages/profile/account/MyAccount';
 import { Profile } from '@pages/profile/Profile';
+import { RouteWatcher } from '@hooks/RouteWatcher';
 
 const PrivacyPolicies = lazy(() => import('@pages/PrivacyPolicies'));
 const Explore = lazy(() => import('@pages/Explore'));
@@ -28,6 +29,7 @@ export const routes = createBrowserRouter([
     element: (
       <>
         <ScrollRestoration />
+        <RouteWatcher />
         <Layout />
       </>
     ),