refactor(client): refactor Routes ready for migration to `createBrows…

…erRouter`

client/src/components/App.tsx

@@ -1,28 +1,79 @@
-import { Header, Nav as EriNav } from "eri";
-import * as React from "react";
-import useUser from "./hooks/useUser";
-import Nav from "./Nav";
-import useNotes from "./hooks/useNotes";
-import { Link } from "react-router-dom";
-import Routes from "./Routes";
+import {
+  Route,
+  Routes as ReactRouterRoutes,
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+import About from "./pages/About";
+import AddNote from "./pages/AddNote";
+import EditNote from "./pages/EditNote";
+import Home from "./pages/Home";
+import ResendVerification from "./pages/ResendVerification";
+import SeeAlso from "./pages/SeeAlso";
+import SignIn from "./pages/SignIn";
+import SignUp from "./pages/SignUp";
+import Verify from "./pages/Verify";
+import ForgotPassword from "./pages/ForgotPassword";
+import ResetPassword from "./pages/ResetPassword";
+import ChangePassword from "./pages/ChangePassword";
+import Tag from "./pages/Tag";
+import { useContext } from "react";
+import { StateContext } from "./AppState";
+import { Spinner } from "eri";
+import RedirectHome from "./shared/RedirectHome";
+import Layout from "./Layout";
 
-export default function App() {
-  useUser();
-  useNotes();
-  const [isNavOpen, setIsNavOpen] = React.useState(false);
+function Root() {
+  const { isNotesLoading, isUserLoading, userEmail } = useContext(StateContext);
+  const userIsLoggedIn = Boolean(userEmail);
 
   return (
-    <>
-      <Header>
-        <h1>
-          <Link to="/">Webnotes</Link>
-        </h1>
-        <EriNav.Button onClick={() => setIsNavOpen(true)} />
-      </Header>
-      <Nav handleNavClose={() => setIsNavOpen(false)} open={isNavOpen} />
-      <main>
-        <Routes />
-      </main>
-    </>
+    <ReactRouterRoutes>
+      <Route element={<Layout />}>
+        <Route path="about" element={<About />} />
+        <Route path="see-also" element={<SeeAlso />} />
+        {isUserLoading ? (
+          <Route path="*" element={<Spinner />} />
+        ) : (
+          <>
+            <Route path="/" element={<Home />} />
+            {userIsLoggedIn ? (
+              <>
+                {isNotesLoading ? (
+                  <Route path="*" element={<Spinner />} />
+                ) : (
+                  <>
+                    <Route path="add" element={<AddNote />} />
+                    <Route path="edit/:dateCreated" element={<EditNote />} />
+                    <Route path="tags" element={<Tag />} />
+                    <Route path="tags/:tag" element={<Tag />} />
+                  </>
+                )}
+                <Route path="change-password" element={<ChangePassword />} />
+              </>
+            ) : (
+              <>
+                <Route path="forgot-password" element={<ForgotPassword />} />
+                <Route
+                  path="resend-verification"
+                  element={<ResendVerification />}
+                />
+                <Route path="reset-password" element={<ResetPassword />} />
+                <Route path="sign-in" element={<SignIn />} />
+                <Route path="sign-up" element={<SignUp />} />
+                <Route path="verify" element={<Verify />} />
+              </>
+            )}
+            <Route path="*" element={<RedirectHome />} />
+          </>
+        )}
+      </Route>
+    </ReactRouterRoutes>
   );
 }
+
+const router = createBrowserRouter([{ path: "*", Component: Root }]);
+
+export default function App() {
+  return <RouterProvider router={router} />;
+}

client/src/components/Layout.tsx

@@ -0,0 +1,27 @@
+import { Header, Nav as EriNav } from "eri";
+import * as React from "react";
+import useUser from "./hooks/useUser";
+import Nav from "./Nav";
+import useNotes from "./hooks/useNotes";
+import { Link, Outlet } from "react-router-dom";
+
+export default function Layout() {
+  useUser();
+  useNotes();
+  const [isNavOpen, setIsNavOpen] = React.useState(false);
+
+  return (
+    <>
+      <Header>
+        <h1>
+          <Link to="/">Webnotes</Link>
+        </h1>
+        <EriNav.Button onClick={() => setIsNavOpen(true)} />
+      </Header>
+      <Nav handleNavClose={() => setIsNavOpen(false)} open={isNavOpen} />
+      <main>
+        <Outlet />
+      </main>
+    </>
+  );
+}

client/src/index.tsx

@@ -2,17 +2,14 @@ import "./sentry";
 import "eri/dist/index.css";
 import { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
-import App from "./components/App";
 import AppState from "./components/AppState";
+import Routes from "./components/App";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <BrowserRouter>
-      <AppState>
-        <App />
-      </AppState>
-    </BrowserRouter>
+    <AppState>
+      <Routes />
+    </AppState>
   </StrictMode>,
 );