frontend: improve scrolling to top

It now includes paging.
rr- · Nov 12, 2024 · 7085ff5 · 7085ff5
1 parent 8b35b56
commit 7085ff5
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -4,7 +4,6 @@ import { Routes } from "react-router-dom";
 import { Route } from "react-router-dom";
 import { NavBar } from "src/components/common/NavBar";
 import { PageMetadata } from "src/components/common/PageMetadata";
-import { ScrollToTop } from "src/components/common/ScrollToTop";
 import { AboutPage } from "src/components/pages/AboutPage";
 import { AwardsGuidePage } from "src/components/pages/AwardsGuidePage";
 import { EmailConfirmationPage } from "src/components/pages/EmailConfirmationPage";
@@ -58,7 +57,6 @@ const App = () => {
     <ConfigContextProvider>
       <UserContextProvider>
         <PageMetadata />
-        <ScrollToTop />
         <NavBar />
         <main id="Content" className="MainContainer">
           <Routes>

diff --git a/frontend/src/components/common/ScrollToTop/index.tsx b/frontend/src/components/common/ScrollToTop/index.tsx
@@ -2,14 +2,14 @@ import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 
 const ScrollToTop = () => {
-  const { pathname } = useLocation();
+  const location = useLocation();
   useEffect(() => {
     window.scrollTo({
       top: 0,
       left: 0,
       behavior: "smooth",
     });
-  }, [pathname]);
+  }, [location]);
 
   return null;
 };

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -6,6 +6,7 @@ import ReactDOM from "react-dom";
 import { QueryClient } from "react-query";
 import { QueryClientProvider } from "react-query";
 import { BrowserRouter } from "react-router-dom";
+import { ScrollToTop } from "src/components/common/ScrollToTop";
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
@@ -14,6 +15,7 @@ const queryClient = new QueryClient({
 ReactDOM.render(
   <React.StrictMode>
     <BrowserRouter>
+      <ScrollToTop />
       <QueryClientProvider client={queryClient} contextSharing={true}>
         <App />
       </QueryClientProvider>