add effect to set scroll when component mounted (#96)

bcgov · Jul 20, 2023 · 48c1f52 · 48c1f52
1 parent bf9880d
commit 48c1f52
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/frontend/src/app/App.tsx b/frontend/src/app/App.tsx
@@ -5,6 +5,7 @@ import Roles from "./constants/roles";
 import { ComplaintContainer } from "./components/containers/complaints/complaint-container";
 
 import ProtectedRoutes from "./components/routing";
+import ScrollToTop from "./common/scroll-to-top";
 import NotAuthorized, { NotFound } from "./components/containers/pages";
 import { ComplaintDetails } from "./components/containers/complaints/complaint-details";
 import ColorReference from "./components/reference";
@@ -25,6 +26,7 @@ const App: FC = () => {
 
   return (
     <Router>
+      <ScrollToTop />
       <Modal />
       <Routes>
         <Route element={<ProtectedRoutes roles={[Roles.COS_ADMINISTRATOR]} />}>

diff --git a/frontend/src/app/common/scroll-to-top.tsx b/frontend/src/app/common/scroll-to-top.tsx
@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}