scroll to latest y position after page reload

Author: StackOverflowIsBetterThanAnyAI

src/app/page.tsx

@@ -1,40 +1,59 @@
 'use client'
 
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import Feed from '@/components/feed/Feed'
 import Footer from '@/components/footer/Footer'
 import Hero from '@/components/hero/Hero'
 import Navigation from '@/components/navigation/Navigation'
 import Quote from '@/components/quote/Quote'
 import Users from '@/components/users/Users'
+import { ContextContentLoaded } from '@/context/ContextContentLoaded'
 import { ContextQuote } from '@/context/ContextQuote'
 import { ContextTopTenPosts } from '@/context/ContextTopTenPosts'
 import { ContextTopUsers } from '@/context/ContextTopUsers'
 import { useFocusTrap } from '@/hooks/useFocusTrap'
+import { useGotoWindowScrollY } from '@/hooks/useGotoWindowScrollY'
 import { useScrollRestoration } from '@/hooks/useScrollRestoration'
+import { useSetWindowScrollY } from '@/hooks/useSetWindowScrollY'
 
 export default function Home() {
+    const [contentLoaded, setContentLoaded] = useState<{
+        posts: boolean
+        quote: boolean
+        users: boolean
+    }>({
+        posts: false,
+        quote: false,
+        users: false,
+    })
+
     const quoteRef = useRef<HTMLQuoteElement>(null)
     const topTenPostsRef = useRef<HTMLDivElement | null>(null)
     const topUsersRef = useRef<HTMLDivElement | null>(null)
 
     useFocusTrap()
+    useGotoWindowScrollY(contentLoaded)
     useScrollRestoration()
+    useSetWindowScrollY()
 
     return (
         <div className="min-h-svh flex flex-col items-center justify-start bg-gradient-to-b from-stone-700 to-stone-800">
-            <ContextQuote.Provider value={quoteRef}>
-                <ContextTopTenPosts.Provider value={topTenPostsRef}>
-                    <ContextTopUsers.Provider value={topUsersRef}>
-                        <Navigation />
-                        <Hero />
-                        <Users />
-                        <Quote />
-                        <Feed />
-                        <Footer />
-                    </ContextTopUsers.Provider>
-                </ContextTopTenPosts.Provider>
-            </ContextQuote.Provider>
+            <ContextContentLoaded.Provider
+                value={[contentLoaded, setContentLoaded]}
+            >
+                <ContextQuote.Provider value={quoteRef}>
+                    <ContextTopTenPosts.Provider value={topTenPostsRef}>
+                        <ContextTopUsers.Provider value={topUsersRef}>
+                            <Navigation />
+                            <Hero />
+                            <Users />
+                            <Quote />
+                            <Feed />
+                            <Footer />
+                        </ContextTopUsers.Provider>
+                    </ContextTopTenPosts.Provider>
+                </ContextQuote.Provider>
+            </ContextContentLoaded.Provider>
         </div>
     )
 }

src/components/feed/Feed.tsx

@@ -21,11 +21,20 @@ import {
 } from '@/components/ui/carousel'
 import { Skeleton } from '@/components/ui/skeleton'
 import fetchFeedItems from '@/api/fetchFeedItems'
+import { ContextContentLoaded } from '@/context/ContextContentLoaded'
 import { ContextTopTenPosts } from '@/context/ContextTopTenPosts'
 import { FeedItemsType } from '@/types/types'
 import { getItemFromSessionStorage } from '@/utils/getItemFromSessionStorage'
 
 const Feed = () => {
+    const contextContentLoaded = useContext(ContextContentLoaded)
+    if (!contextContentLoaded) {
+        throw new Error(
+            'Feed must be used within a ContextContentLoaded.Provider'
+        )
+    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [_contentLoaded, setContentLoaded] = contextContentLoaded
+
     const contextTopTenPosts = useContext(ContextTopTenPosts)
     if (!contextTopTenPosts) {
         throw new Error(
@@ -45,8 +54,9 @@ const Feed = () => {
         }
         setIsLoading(true)
         await fetchFeedItems(nextPage, PAGE_SIZE, setFeedItems)
+        setContentLoaded((prev) => ({ ...prev, posts: true }))
         setIsLoading(false)
-    }, [isLoading])
+    }, [isLoading, setContentLoaded])
 
     useEffect(() => {
         const parsedStorageData = getItemFromSessionStorage()
@@ -55,8 +65,10 @@ const Feed = () => {
 
         if (!parsedStorageData?.feedItems?.length) {
             loadMoreItems()
+        } else {
+            setContentLoaded((prev) => ({ ...prev, posts: true }))
         }
-    }, [loadMoreItems])
+    }, [loadMoreItems, setContentLoaded])
 
     useEffect(() => {
         const handleScroll = () => {

src/components/quote/Quote.tsx

@@ -1,11 +1,20 @@
 import { useCallback, useContext, useEffect, useState } from 'react'
+import { ContextContentLoaded } from '@/context/ContextContentLoaded'
 import { ContextQuote } from '@/context/ContextQuote'
 import { QuoteType } from '@/types/types'
 import fetchQuote from '@/api/fetchQuote'
 import { Skeleton } from '@/components/ui/skeleton'
 import { getItemFromSessionStorage } from '@/utils/getItemFromSessionStorage'
 
 const Quote = () => {
+    const contextContentLoaded = useContext(ContextContentLoaded)
+    if (!contextContentLoaded) {
+        throw new Error(
+            'Quote must be used within a ContextContentLoaded.Provider'
+        )
+    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [_contentLoaded, setContentLoaded] = contextContentLoaded
+
     const contextQuote = useContext(ContextQuote)
     if (!contextQuote) {
         throw new Error('Users must be used within a ContextQuote.Provider')
@@ -21,17 +30,20 @@ const Quote = () => {
         }
         setIsLoading(true)
         await fetchQuote(setQuote)
+        setContentLoaded((prev) => ({ ...prev, quote: true }))
         setIsLoading(false)
-    }, [isLoading])
+    }, [isLoading, setContentLoaded])
 
     useEffect(() => {
         const parsedStorageData = getItemFromSessionStorage()
         setQuote(parsedStorageData?.quote || null)
 
         if (!parsedStorageData?.quote) {
             loadQuote()
+        } else {
+            setContentLoaded((prev) => ({ ...prev, quote: true }))
         }
-    }, [loadQuote])
+    }, [loadQuote, setContentLoaded])
 
     return (
         <section className="w-full max-w-7xl" ref={quoteRef}>

src/components/users/Users.tsx

@@ -15,12 +15,21 @@ import {
 } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import fetchUsers from '@/api/fetchUsers'
+import { ContextContentLoaded } from '@/context/ContextContentLoaded'
 import { ContextTopUsers } from '@/context/ContextTopUsers'
 import { UsersType } from '@/types/types'
 import { getItemFromSessionStorage } from '@/utils/getItemFromSessionStorage'
 import { useScreenWidth } from '@/hooks/useScreenWidth'
 
 const Users = () => {
+    const contextContentLoaded = useContext(ContextContentLoaded)
+    if (!contextContentLoaded) {
+        throw new Error(
+            'Users must be used within a ContextContentLoaded.Provider'
+        )
+    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [_contentLoaded, setContentLoaded] = contextContentLoaded
+
     const contextTopUsersRef = useContext(ContextTopUsers)
     if (!contextTopUsersRef) {
         throw new Error('Users must be used within a ContextTopUsers.Provider')
@@ -38,17 +47,20 @@ const Users = () => {
         }
         setIsLoading(true)
         await fetchUsers(setUsers)
+        setContentLoaded((prev) => ({ ...prev, users: true }))
         setIsLoading(false)
-    }, [isLoading])
+    }, [isLoading, setContentLoaded])
 
     useEffect(() => {
         const parsedStorageData = getItemFromSessionStorage()
         setUsers(parsedStorageData?.users || [])
 
         if (!parsedStorageData?.users?.length) {
             loadUsers()
+        } else {
+            setContentLoaded((prev) => ({ ...prev, users: true }))
         }
-    }, [loadUsers])
+    }, [loadUsers, setContentLoaded])
 
     return (
         <section

src/context/ContextContentLoaded.ts

@@ -0,0 +1,19 @@
+import { createContext, Dispatch, SetStateAction } from 'react'
+
+export const ContextContentLoaded = createContext<
+    | [
+          {
+              posts: boolean
+              quote: boolean
+              users: boolean
+          },
+          Dispatch<
+              SetStateAction<{
+                  posts: boolean
+                  quote: boolean
+                  users: boolean
+              }>
+          >
+      ]
+    | undefined
+>(undefined)

src/hooks/useGotoWindowScrollY.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react'
+import { getItemFromSessionStorage } from '@/utils/getItemFromSessionStorage'
+
+export const useGotoWindowScrollY = (contentLoaded: {
+    posts: boolean
+    quote: boolean
+    users: boolean
+}) => {
+    useEffect(() => {
+        if (contentLoaded.posts && contentLoaded.quote && contentLoaded.users) {
+            const parsedStorageData = getItemFromSessionStorage()
+            if (parsedStorageData?.scrollY) {
+                window.scrollTo({
+                    top: parsedStorageData.scrollY,
+                    behavior: 'smooth',
+                })
+            }
+        }
+    }, [contentLoaded])
+}

src/hooks/useSetWindowScrollY.ts

@@ -0,0 +1,16 @@
+'use client'
+
+import { useEffect } from 'react'
+import { setItemInSessionStorage } from '@/utils/setItemInSessionStorage'
+
+export const useSetWindowScrollY = () => {
+    useEffect(() => {
+        const onScroll = () => {
+            setItemInSessionStorage('scrollY', window.scrollY)
+        }
+
+        window.addEventListener('scroll', onScroll)
+
+        return () => window.removeEventListener('scroll', onScroll)
+    }, [])
+}