feat: scroll-restore at all page

hyesungoh · Nov 6, 2023 · bcea3ed · bcea3ed
1 parent 3bad461
commit bcea3ed
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 8 deletions.
diff --git a/apps/blog/src/hooks/useScrollRestoration.ts b/apps/blog/src/hooks/useScrollRestoration.ts
@@ -21,18 +21,16 @@ function useScrollRestoration() {
   useEffect(() => {
     if ('scrollRestoration' in window.history) {
       window.history.scrollRestoration = 'manual';
-      restoreScrollPos(router.asPath);
 
-      const onBeforeUnload = event => {
+      const onBeforeUnload = () => {
         saveScrollPos(router.asPath);
-        delete event['returnValue'];
       };
 
       const onRouteChangeStart = () => {
         saveScrollPos(router.asPath);
       };
 
-      const onRouteChangeComplete = url => {
+      const onRouteChangeComplete = (url: string) => {
         if (shouldScrollRestore) {
           shouldScrollRestore = false;
           restoreScrollPos(url);

diff --git a/apps/blog/src/pages/_app.page.tsx b/apps/blog/src/pages/_app.page.tsx
@@ -6,6 +6,7 @@ import { NextUIProvider } from '@nextui-org/react';
 import { darkTheme, lightTheme } from 'core';
 import { KBarProvider, useRegisterActions } from 'kbar';
 
+import useScrollRestoration from '../hooks/useScrollRestoration';
 import generateKbarAction from '../libs/kbarActions';
 
 const KbarComponent = dynamic(() => import('core/components/Kbar'), {
@@ -16,6 +17,8 @@ export default function BlogApp({ Component, pageProps }: AppProps) {
   const router = useRouter();
   const kbarActions = generateKbarAction(router);
 
+  useScrollRestoration();
+
   return (
     <NextThemesProvider
       defaultTheme="system"

diff --git a/apps/blog/src/pages/category/[category].page.tsx b/apps/blog/src/pages/category/[category].page.tsx
@@ -6,7 +6,6 @@ import { MainHeader } from '../../components/Header';
 import PostCard from '../../components/PostCard';
 import SEO from '../../components/SEO';
 import useInfiniteScroll from '../../hooks/useInfiniteScroll';
-import useScrollRestoration from '../../hooks/useScrollRestoration';
 import { getAllCategories, getAllPostsByCategory } from '../../libs/api';
 
 interface Props {
@@ -16,7 +15,6 @@ interface Props {
 
 function EachCategory({ category, allPosts }: Props) {
   const { theme } = useTheme();
-  useScrollRestoration();
 
   const { setTarget, elements: posts, isEnded } = useInfiniteScroll<PostType>({ offset: 12, fullElements: allPosts });
 

diff --git a/apps/blog/src/pages/index.page.tsx b/apps/blog/src/pages/index.page.tsx
@@ -5,7 +5,6 @@ import { MainHeader } from '../components/Header';
 import PostCard from '../components/PostCard';
 import SEO from '../components/SEO';
 import useInfiniteScroll from '../hooks/useInfiniteScroll';
-import useScrollRestoration from '../hooks/useScrollRestoration';
 import { getAllPosts } from '../libs/api';
 
 interface Props {
@@ -14,7 +13,6 @@ interface Props {
 
 function Blog({ allPosts }: Props) {
   const { theme } = useTheme();
-  useScrollRestoration();
 
   const {
     setTarget,