fix(status-page): remember scroll position when navigating home (#259)

Author: rogeriopvl

app/ca/page.tsx

@@ -3,6 +3,7 @@ import ThumbnailGrid from '@/components/ThumbnailGrid';
 import Thumbnail from '@/components/Thumbnail';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
+import ScrollRestore from '@/components/ScrollRestore';
 import { getTranslations } from '@/lib/translation';
 
 import statuses from '@/lib/statuses';
@@ -12,6 +13,7 @@ export default async function Home() {
 
   return (
     <>
+      <ScrollRestore />
       <Header t={t} />
       <main>
         <Usage t={t} />

app/page.tsx

@@ -3,6 +3,7 @@ import ThumbnailGrid from '@/components/ThumbnailGrid';
 import Thumbnail from '@/components/Thumbnail';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
+import ScrollRestore from '@/components/ScrollRestore';
 import { getTranslations } from '@/lib/translation';
 
 import statuses from '@/lib/statuses';
@@ -12,6 +13,7 @@ export default async function Home() {
 
   return (
     <>
+      <ScrollRestore />
       <Header t={t} />
       <main>
         <Usage t={t} />

app/status/[status]/page.tsx

@@ -21,7 +21,11 @@ export default async function Info({ params }: { params: { status: string } }) {
       <Header t={t} />
       <main>
         <nav>
-          <Link href="/" className="text-white">{`< ${t.BACK_TO_HOME}`}</Link>
+          <Link
+            href="/"
+            className="text-white"
+            scroll={false}
+          >{`< ${t.BACK_TO_HOME}`}</Link>
         </nav>
 
         <h1 className="text-center my-12">

components/ScrollRestore/ScrollRestore.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { useEffect } from 'react';
+
+const ScrollRestore = () => {
+  useEffect(() => {
+    const savedPosition = sessionStorage.getItem('homeScrollPosition');
+    if (savedPosition) {
+      window.scrollTo(0, parseInt(savedPosition, 10));
+      sessionStorage.removeItem('homeScrollPosition');
+    }
+  }, []);
+
+  return null;
+};
+
+export default ScrollRestore;

components/ScrollRestore/index.ts

@@ -0,0 +1 @@
+export { default } from './ScrollRestore';

components/Thumbnail/Thumbnail.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Link from 'next/link';
 import Image from 'next/image';
 
@@ -10,10 +12,15 @@ type ThumbnailProps = {
 const Thumbnail = ({ code, description, t }: ThumbnailProps) => {
   const hrefBase = t.LOCALE === 'ca' ? '/ca' : '';
 
+  const saveScrollPosition = () => {
+    sessionStorage.setItem('homeScrollPosition', window.scrollY.toString());
+  };
+
   return (
     <div id={`${code}`} className="flex flex-col flex-grow h-full text-white overflow-hidden rounded shadow bg-[--interactive]">
       <Link
         href={`${hrefBase}/status/${code}`}
+        onClick={saveScrollPosition}
         className="text-white no-underline"
       >
         <div className="pt-[56.25%] relative overflow-hidden">