fix: ProductGrid scroll restoration

ballonsballons-at · Aug 4, 2023 · 923a6be · 923a6be
1 parent fbd1a28
commit 923a6be
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 29 deletions.
diff --git a/src/components/molecules/ProductGrid/ProductGrid.tsx b/src/components/molecules/ProductGrid/ProductGrid.tsx
@@ -15,6 +15,7 @@ import {ProductCard} from '../ProductCard'
 export interface ProductGridProps extends SimpleGridProps {
   heading?: string
   products: ShopifyProduct[]
+  scrollRestoration?: boolean
   prefixPath?: string
   searchLocation?: string
   wholesale?: boolean
@@ -23,6 +24,7 @@ export interface ProductGridProps extends SimpleGridProps {
 export const ProductGrid = ({
   heading,
   products,
+  scrollRestoration,
   prefixPath,
   searchLocation,
   wholesale,
@@ -32,26 +34,15 @@ export const ProductGrid = ({
     ? useBreakpointValue(gridProps.columns as any)
     : 0 || 0
 
-  const containerRef = useRef(null)
-
-  const location = useLocation()
-
-  // Save the scroll position on unmounting the component
   useEffect(() => {
-    return () => {
-      if (containerRef.current) {
-        sessionStorage.setItem('scrollPosition', containerRef.current.scrollTop)
-      }
-    }
-  }, [location.pathname])
+    const scrollPosition = window.sessionStorage.getItem('scrollPosition')
 
-  // Restore the scroll position on mounting the component
-  useEffect(() => {
-    const scrollPosition = sessionStorage.getItem('scrollPosition')
-    if (scrollPosition && containerRef.current) {
-      containerRef.current.scrollTop = parseInt(scrollPosition, 10)
+    if (scrollPosition && scrollRestoration) {
+      window.scrollTo(0, parseInt(scrollPosition))
+
+      window.sessionStorage.removeItem('scrollPosition')
     }
-  }, [location.pathname])
+  }, [scrollRestoration])
 
   return (
     <>
@@ -61,17 +52,28 @@ export const ProductGrid = ({
         </Box>
       )}
 
-      <SimpleGrid ref={containerRef} {...gridProps}>
+      <SimpleGrid {...gridProps}>
         {products.map((item, index) => {
           return (
-            <ProductCard
-              prefixPath={prefixPath}
-              searchLocation={searchLocation}
-              product={item}
+            <Box
+              id={`product-${item.id}`}
               key={item.id}
-              left={(index + 1) % v === 0}
-              wholesale={wholesale}
-            />
+              onClick={() => {
+                if (scrollRestoration) {
+                  window.sessionStorage.setItem(
+                    'scrollPosition',
+                    window.scrollY.toString()
+                  )
+                }
+              }}>
+              <ProductCard
+                prefixPath={prefixPath}
+                searchLocation={searchLocation}
+                product={item}
+                left={(index + 1) % v === 0}
+                wholesale={wholesale}
+              />
+            </Box>
           )
         })}
       </SimpleGrid>

diff --git a/src/components/templates/ProductTemplate/ProductTemplate.tsx b/src/components/templates/ProductTemplate/ProductTemplate.tsx
@@ -116,10 +116,7 @@ export const ProductTemplate = ({
         <Stack spacing={12}>
           <Breadcrumb separator={<ChevronRightIcon boxSize="6" />}>
             <BreadcrumbItem>
-              <BreadcrumbLink
-                onClick={() => {
-                  window.history.back()
-                }}>
+              <BreadcrumbLink as={Link} to="/products">
                 Alle Artikel
               </BreadcrumbLink>
             </BreadcrumbItem>

diff --git a/src/components/templates/ProductsTemplate/ProductsTemplate.tsx b/src/components/templates/ProductsTemplate/ProductsTemplate.tsx
@@ -58,6 +58,7 @@ export const ProductsTemplate = (props: ProductsTemplateProps) => {
   return (
     <Box w="full" pt="4" pl={{base: '2', md: '12'}} pr={{base: '2', md: '12'}}>
       <ProductGrid
+        scrollRestoration
         wholesale={props.wholesale}
         products={props.products}
         columns={{base: 1, sm: 2, md: 3, lg: 3, xl: 4, '2xl': 5}}