From 74abb00ec129c98bfc67b40143ccc04d4b799ecb Mon Sep 17 00:00:00 2001
From: franco sanchez <franco_genta@hotmail.com>
Date: Wed, 14 Aug 2024 10:30:19 -0300
Subject: [PATCH] fix: problem with useScrollRestoration hook and other changes

---
 src/components/Footer.tsx         |  3 +--
 src/components/forms/NewBook.tsx  |  1 +
 src/components/nav/DesktopNav.tsx |  2 +-
 src/hooks/useScrollRestoration.ts | 13 +++++++------
 src/pages/Home.tsx                |  3 +++
 src/pages/Search.tsx              |  4 ++--
 src/pages/profile/Profile.tsx     |  2 ++
 7 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index e04a133..2dede35 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -64,9 +64,8 @@ export function Footer() {
 
   return (
     <>
-      <Box mt='auto'>
+      <Box as='footer' mt='auto'>
         <Flex
-          as='footer'
           bg={bgFooter}
           mt='20'
           py='5'
diff --git a/src/components/forms/NewBook.tsx b/src/components/forms/NewBook.tsx
index 63543e9..5bc10a7 100644
--- a/src/components/forms/NewBook.tsx
+++ b/src/components/forms/NewBook.tsx
@@ -199,6 +199,7 @@ export function FormNewBook() {
   return (
     <>
       <Flex
+        as='section'
         align='center'
         justify='center'
         direction='column'
diff --git a/src/components/nav/DesktopNav.tsx b/src/components/nav/DesktopNav.tsx
index eb96aba..3db1806 100644
--- a/src/components/nav/DesktopNav.tsx
+++ b/src/components/nav/DesktopNav.tsx
@@ -75,7 +75,7 @@ export function DesktopNav() {
         <Flex
           as='nav'
           w='100%'
-          maxW='1160px'
+          maxW={{ base: '1160px', '2xl': '1430px' }}
           m='auto'
           justify='space-between'
           align='center'
diff --git a/src/hooks/useScrollRestoration.ts b/src/hooks/useScrollRestoration.ts
index e9a93bd..5285924 100644
--- a/src/hooks/useScrollRestoration.ts
+++ b/src/hooks/useScrollRestoration.ts
@@ -1,17 +1,18 @@
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
-export function useScrollRestoration(loading) {
+export function useScrollRestoration(loading: boolean) {
   const location = useLocation();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     function handleScroll() {
-      sessionStorage.setItem(location.key, JSON.stringify(window.scrollY));
+      sessionStorage.setItem(location.pathname, JSON.stringify(window.scrollY));
     }
 
     window.addEventListener('scroll', handleScroll);
 
-    const scrollPosition = sessionStorage.getItem(location.key);
+    const scrollPosition = sessionStorage.getItem(location.pathname);
+
     if (scrollPosition && !loading) {
       window.scrollTo(0, JSON.parse(scrollPosition));
     }
@@ -19,5 +20,5 @@ export function useScrollRestoration(loading) {
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
-  }, [location.key, loading]);
+  }, [location.pathname, loading]);
 }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 9fd4d0f..1a24e13 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -48,6 +48,7 @@ export function Home() {
         urlImage='https://xbu.netlify.app/ogImage.png'
       />
       <Container
+        as='section'
         maxW='9xl'
         p='0'
         bg={bContainer}
@@ -136,6 +137,7 @@ export function Home() {
         </Box>
       </Container>
       <Flex
+        as='section'
         w='full'
         justify='center'
         align='flex-start'
@@ -179,6 +181,7 @@ export function Home() {
         </Stack>
       </Flex>
       <Flex
+        as='section'
         w='full'
         justify='center'
         align='flex-start'
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
index fbde734..3a34a48 100644
--- a/src/pages/Search.tsx
+++ b/src/pages/Search.tsx
@@ -21,7 +21,7 @@ import {
 import { Card } from '@components/cards/Card';
 import { CardType } from '@components/types';
 import { useFilter, useFilterPaginated } from '@hooks/queries';
-// import { useScrollRestoration } from '@hooks/useScrollRestoration';
+import { useScrollRestoration } from '@hooks/useScrollRestoration';
 import { ContainerTitle } from '@components/ContainerTitle';
 import { MySimpleGrid } from '@components/MySimpleGrid';
 import { MainHead } from '@components/Head';
@@ -85,7 +85,7 @@ export default function Search() {
   }
 
   const results = getNormalizedResults();
-  // useScrollRestoration(isPendingPaginated); // Restablece la posición del scroll al volver de la vista del libro
+  useScrollRestoration(isPendingPaginated); // Restablece la posición del scroll al volver de la vista del libro
 
   useEffect(() => {
     let isMounted = true;
diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
index 95af195..86083b9 100644
--- a/src/pages/profile/Profile.tsx
+++ b/src/pages/profile/Profile.tsx
@@ -195,6 +195,7 @@ export function Profile() {
         urlImage={data?.pages[0].user.picture}
       />
       <Flex
+        as='section'
         justify='center'
         align='center'
         direction='column'
@@ -233,6 +234,7 @@ export function Profile() {
         </Box>
       </Flex>
       <Flex
+        as='article'
         direction={{ base: 'column', md: 'row' }}
         maxW={{ base: '1260px', '2xl': '1560px' }}
         m='0 auto'