Fix scroll restoration

src/App.jsx

@@ -1,26 +1,34 @@
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import Editor from "./pages/Editor";
 import Survey from "./pages/Survey";
 import BugReport from "./pages/BugReport";
 import Shortcuts from "./pages/Shortcuts";
 import Templates from "./pages/Templates";
-import Home from "./pages/Home";
+import { useEffect } from "react";
-import { CookiesProvider } from "react-cookie";
+import LandingPage from "./pages/LandingPage";
+
+const Wrapper = ({ children }) => {
+  const location = useLocation();
+  useEffect(() => {
+    window.scroll(0, 0);
+  }, [location.pathname]);
+  return children;
+};
 
 function App() {
   return (
-    <CookiesProvider>
+    <BrowserRouter>
-      <Router>
+      <Wrapper>
         <Routes>
-          <Route path="/" element={<Home />} />
+          <Route path="/" element={<LandingPage />} />
           <Route path="/editor" element={<Editor />} />
           <Route path="/survey" element={<Survey />} />
           <Route path="/shortcuts" element={<Shortcuts />} />
           <Route path="/bug_report" element={<BugReport />} />
           <Route path="/templates" element={<Templates />} />
         </Routes>
-      </Router>
+      </Wrapper>
-    </CookiesProvider>
+    </BrowserRouter>
   );
 }
 

src/pages/Editor.jsx

@@ -571,7 +571,7 @@ export default function Editor() {
   useEffect(() => {
     document.title = "Editor | drawDB";
 
-    const loadLatestDiagram = () => {
+    const loadLatestDiagram = async () => {
       db.diagrams
         .orderBy("lastModified")
         .last()
@@ -595,7 +595,7 @@ export default function Editor() {
         });
     };
 
-    const loadDiagram = (id) => {
+    const loadDiagram = async (id) => {
       db.diagrams
         .get(id)
         .then((diagram) => {
@@ -625,7 +625,7 @@ export default function Editor() {
         });
     };
 
-    const loadTemplate = (id) => {
+    const loadTemplate = async (id) => {
       db.templates
         .get(id)
         .then((diagram) => {

src/pages/Survey.jsx

@@ -236,6 +236,8 @@ function SurveyForm({ theme }) {
 export default function Survey() {
   const [theme, setTheme] = useState("");
 
+  useEffect(() => window.scroll(0, 0));
+
   useEffect(() => {
     const t = localStorage.getItem("theme");
     setTheme(t);
@@ -271,7 +273,7 @@ export default function Survey() {
   };
 
   return (
-    <>
+    <div>
       <div className="sm:py-3 py-5 md:px-8 px-20 flex justify-between items-center">
         <div className="flex items-center justify-start">
           <Link to="/">
@@ -329,6 +331,6 @@ export default function Survey() {
       <div className="text-center text-sm py-3">
         &copy; 2024 <strong>drawDB</strong> - All right reserved.
       </div>
-    </>
+    </div>
   );
 }