feat: add ScrollToTop component to reset scroll on route change

Author: elainefan331

src/components/Routes.tsx

@@ -1,3 +1,4 @@
+import ScrollToTop from "./ScrollToTop";
 import FullScreen from "design/Layouts/FullScreen";
 import AboutPage from "pages/AboutPage";
 import DatabasePage from "pages/DatabasePage";
@@ -11,34 +12,37 @@ import { Navigate, Route, Routes as RouterRoutes } from "react-router-dom";
 import RoutesEnum from "types/routes.enum";
 
 const Routes = () => (
-  <RouterRoutes>
-    {/* FullScreen Layout */}
-    <Route element={<FullScreen />}>
-      {/* Home Page */}
-      <Route path={RoutesEnum.HOME} element={<Home />} />
-      {/* Databases Page */}
-      <Route path={RoutesEnum.DATABASES} element={<DatabasePage />} />
+  <>
+    <ScrollToTop />
+    <RouterRoutes>
+      {/* FullScreen Layout */}
+      <Route element={<FullScreen />}>
+        {/* Home Page */}
+        <Route path={RoutesEnum.HOME} element={<Home />} />
+        {/* Databases Page */}
+        <Route path={RoutesEnum.DATABASES} element={<DatabasePage />} />
 
-      {/* Dataset List Page */}
-      <Route
-        path={`${RoutesEnum.DATABASES}/:dbName`}
-        // element={<DatasetPage />}
-        element={<NewDatasetPage />}
-      />
+        {/* Dataset List Page */}
+        <Route
+          path={`${RoutesEnum.DATABASES}/:dbName`}
+          // element={<DatasetPage />}
+          element={<NewDatasetPage />}
+        />
 
-      {/* Dataset Details Page */}
-      <Route
-        path={`${RoutesEnum.DATABASES}/:dbName/:docId`}
-        element={<DatasetDetailPage />}
-      />
+        {/* Dataset Details Page */}
+        <Route
+          path={`${RoutesEnum.DATABASES}/:dbName/:docId`}
+          element={<DatasetDetailPage />}
+        />
 
-      {/* Search Page */}
-      <Route path={RoutesEnum.SEARCH} element={<SearchPage />} />
+        {/* Search Page */}
+        <Route path={RoutesEnum.SEARCH} element={<SearchPage />} />
 
-      {/* About Page */}
-      <Route path={RoutesEnum.ABOUT} element={<AboutPage />} />
-    </Route>
-  </RouterRoutes>
+        {/* About Page */}
+        <Route path={RoutesEnum.ABOUT} element={<AboutPage />} />
+      </Route>
+    </RouterRoutes>
+  </>
 );
 
 export default Routes;

src/components/ScrollToTop.tsx

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo({ top: 0, left: 0, behavior: "instant" as ScrollBehavior });
+  }, [pathname]);
+
+  return null;
+};
+
+export default ScrollToTop;