fix: problem with the scroll position in explore

Franqsanz · Jul 25, 2024 · e21987d · e21987d
1 parent 48f37b7
commit e21987d
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 2 deletions.
diff --git a/src/components/AllBooks.tsx b/src/components/AllBooks.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { ScrollRestoration } from 'react-router-dom';
 import {
   Flex,
   Spinner,
@@ -12,6 +13,7 @@ import { useInView } from 'react-intersection-observer';
 
 import { CardType } from '@components/types';
 import { useBooksPaginate } from '@hooks/queries';
+import { useScrollRestoration } from '@hooks/useScrollRestoration';
 import { MySimpleGrid } from '@components/MySimpleGrid';
 import { Card } from '@components/cards/Card';
 import { Aside } from '@components/Aside';
@@ -25,9 +27,19 @@ export function AllBooks() {
     useBooksPaginate();
   let fetchingNextPageUI;
 
+  useScrollRestoration(isPending); // Restablecer la posición del scroll al volver de la vista del libro
+
   useEffect(() => {
-    if (inView) fetchNextPage();
-  }, [inView]);
+    let isMounted = true;
+
+    if (inView && isMounted) {
+      fetchNextPage();
+    }
+
+    return () => {
+      isMounted = false;
+    };
+  }, [inView, fetchNextPage]);
 
   if (isPending) {
     return <SkeletonAllBooks showTags={false} />;
@@ -66,6 +78,7 @@ export function AllBooks() {
 
   return (
     <>
+      <ScrollRestoration />
       <Flex
         as='article'
         direction={{ base: 'column', md: 'row' }}

diff --git a/src/hooks/useAccountActions.tsx → src/hooks/useAccountActions.ts b/src/hooks/useAccountActions.tsx → src/hooks/useAccountActions.ts
diff --git a/src/hooks/useDebounce.tsx → src/hooks/useDebounce.ts b/src/hooks/useDebounce.tsx → src/hooks/useDebounce.ts
diff --git a/src/hooks/useGenerateSlug.tsx → src/hooks/useGenerateSlug.ts b/src/hooks/useGenerateSlug.tsx → src/hooks/useGenerateSlug.ts
diff --git a/src/hooks/useNetworkState.tsx → src/hooks/useNetworkState.ts b/src/hooks/useNetworkState.tsx → src/hooks/useNetworkState.ts
diff --git a/src/hooks/useRefetchLocation.tsx → src/hooks/useRefetchLocation.ts b/src/hooks/useRefetchLocation.tsx → src/hooks/useRefetchLocation.ts
diff --git a/src/hooks/useScrollRestoration.ts b/src/hooks/useScrollRestoration.ts
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export function useScrollRestoration(loading) {
+  const location = useLocation();
+
+  useEffect(() => {
+    function handleScroll() {
+      sessionStorage.setItem(location.key, JSON.stringify(window.scrollY));
+    }
+
+    window.addEventListener('scroll', handleScroll);
+
+    const scrollPosition = sessionStorage.getItem(location.key);
+    if (scrollPosition && !loading) {
+      window.scrollTo(0, JSON.parse(scrollPosition));
+    }
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [location.key, loading]);
+}