feat: support offset when nav back to home screen

Yaronglp · Feb 6, 2023 · c09dec0 · c09dec0 · vercel · Feb 6, 2023
1 parent c7ed078
commit c09dec0
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 13 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react'
 import { Router, useRouter } from 'next/router'
 import { Loading } from '../components/loading'
 import { ErrorBoundary } from '../components/ErrorBoundary'
+import { ScrollContextProvider } from '../providers/scroll'
 
 export default function App({ Component, pageProps }: AppProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -31,18 +32,20 @@ export default function App({ Component, pageProps }: AppProps) {
 
   return (
     <>
-      <Header
-        customTitle={!isRouterQueryEmpty ? 'Go Back' : undefined} 
-        activateLink={ isActivatedLink }/>
-      {
-        isLoading ? 
-        <Loading/> :
-      (<WrapperStyled>
-        <ErrorBoundary>
-          <Component {...pageProps} />
-        </ErrorBoundary>
-      </WrapperStyled>)
-      }
+      <ScrollContextProvider>
+        <Header
+          customTitle={!isRouterQueryEmpty ? 'Go Back' : undefined} 
+          activateLink={ isActivatedLink }/>
+        {
+          isLoading ? 
+          <Loading/> :
+        (<WrapperStyled>
+          <ErrorBoundary>
+            <Component {...pageProps} />
+          </ErrorBoundary>
+        </WrapperStyled>)
+        }
+      </ScrollContextProvider>
     </>
   )
 }

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,6 +1,8 @@
 import Head from 'next/head'
-import React from 'react'
+import { Router } from 'next/router'
+import React, { useContext, useEffect } from 'react'
 import CardList from '../components/cardList'
+import { ScrollContext } from '../providers/scroll'
 import { POKEMON_BASE_URL, POKEMON_LIST_URL } from '../utils/constants'
 
 interface IPokemonItem {
@@ -10,6 +12,29 @@ interface IPokemonItem {
 }
 
 const Pokemon = ({pokemon = []}: {pokemon: IPokemonItem[]}) => {
+  const { offsetY, updateOffsetY } = useContext(ScrollContext)
+
+  useEffect(() => {
+    const handleRouteChange = (url: unknown) => {
+      updateOffsetY(window.pageYOffset)
+    }
+
+    Router.events.on('routeChangeStart', handleRouteChange)
+
+    return () => {
+      Router.events.off('routeChangeStart', handleRouteChange)
+    }
+  }, [updateOffsetY])
+
+  useEffect(() => {
+    if (offsetY > 0) {
+      window.scrollTo(0, offsetY)
+      setTimeout(() => {
+        updateOffsetY(0)
+      }, 0)
+    }
+  }, [offsetY, updateOffsetY])
+
   return (
     <>
       <Head>

diff --git a/providers/scroll.tsx b/providers/scroll.tsx
@@ -0,0 +1,26 @@
+import { useState, createContext } from 'react'
+
+interface IScrollContext {
+  offsetY: number
+  updateOffsetY: (offset: number) => void
+}
+
+const INITIAL_STATE: IScrollContext = {
+  offsetY: 0,
+  updateOffsetY: (offset: number) => {offset}
+}
+
+export const ScrollContext = createContext(INITIAL_STATE)
+
+export const ScrollContextProvider = ({ children }: {children: React.ReactNode}) => {
+  const [offsetY, setOffsetY] = useState<number>(0)
+
+  const updateOffsetY = (offset: number) => {
+    setOffsetY(offset)
+  }
+
+  return (
+    <ScrollContext.Provider value={{ offsetY, updateOffsetY }}>
+      {children}
+    </ScrollContext.Provider>)
+}