Routes refactor

front-end/src/datatypes/Role.ts

@@ -0,0 +1,7 @@
+enum Role {
+  Administrator = "ADMINISTRATOR",
+  Reviewer = "REVIEWER",
+  Reader = "READER"
+}
+
+export { Role };

front-end/src/datatypes/User.ts

@@ -0,0 +1,7 @@
+interface User {
+  id: string;
+  email: string;
+  roles?: string[];
+};
+
+export type { User };

front-end/src/index.tsx

@@ -1,85 +1,34 @@
-import React from 'react';
+import React from "react";
 import ReactDOM from "react-dom/client";
-import {
-  BrowserRouter,
-  Outlet,
-  Routes,
-  Route,
-} from "react-router-dom";
+import { BrowserRouter } from "react-router-dom";
 
-import { ColorModeScript } from "@chakra-ui/react"
-import { Arad } from './Arad';
+import { ColorModeScript } from "@chakra-ui/react";
 
-import { Login } from './identification/Login';
-import { Register } from './identification/Register';
-import { Request as PassphraseResetRequest } from './identification/Passphrase/Reset/Request';
-import { Confirm as PassphraseResetConfirm } from './identification/Passphrase/Reset/Confirm';
-import { Change as PassphraseChange } from './identification/Passphrase/Change';
+import reportWebVitals from "./reportWebVitals";
+import * as serviceWorker from "./serviceWorker";
 
-import { Search } from './core/Search';
-import { Analytics } from './core/Analytics';
+import "./index.css";
+import { Main } from "./main";
 
-import { Article } from './administration/Article';
-import { Articles } from './administration/Articles';
-import { User } from './administration/User';
-import { Users } from './administration/Users';
+const App = () => {
+  return (
+    <>
+      <ColorModeScript />
+      <BrowserRouter>
+        <Main />
+      </BrowserRouter>
+    </>
+  );
+};
 
-import reportWebVitals from './reportWebVitals';
-import * as serviceWorker from "./serviceWorker"
-
-import './index.css';
-import { Redirect } from './core/Redirect';
-
-ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-).render(
-  <>
-    <ColorModeScript />
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Arad />}>
-          <Route index element={<Search />} />
-
-          {/* authentication */}
-          <Route path="register" element={<Register />} /> 
-          <Route path="login" element={<Login />} />
-          <Route path="passphrase" element={<Outlet />}>
-            <Route index element={<PassphraseChange />} />
-            <Route path="reset" element={<Outlet />}>
-              <Route index element={<PassphraseResetRequest />} />
-              <Route path="confirm" element={<PassphraseResetConfirm />} />
-            </Route>
-          </Route>
-
-          {/* core functionality */}
-          <Route path="search" element={<Outlet />}>
-            <Route index element={<Search />} />
-            <Route path=":articleId" element={<Analytics />} />
-          </Route>
-
-          {/* admin */}
-          <Route path="articles" element={<Outlet />}>
-            <Route index element={<Articles />} />
-            <Route path=":articleId" element={<Article />} />
-          </Route>
-          <Route path="users" element={<Outlet />}>
-            <Route index element={<Users />} />
-            <Route path=":userId" element={<User />} />
-          </Route>
-
-        </Route>
-
-        {/* links */}
-        <Route path="/code" element={<Redirect url="https://github.com/jasoncolburne/arad" />} />
-      </Routes>
-    </BrowserRouter>
-  </>
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <App />
 );
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://cra.link/PWA
-serviceWorker.unregister()
+serviceWorker.unregister();
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

front-end/src/main.tsx

@@ -0,0 +1,7 @@
+import { useRoutes } from "react-router-dom";
+
+import { routes } from "./routes";
+
+export const Main = () => {
+  return useRoutes(routes);
+};

front-end/src/routes.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { useEffect } from "react";
+import { useLocation } from "react-router";
+import { RouteObject, useNavigate } from "react-router-dom";
+import { Article } from "./administration/Article";
+import { User } from "./administration/User";
+import { Analytics } from "./core/Analytics";
+import { Request as PassphraseResetRequest } from "./identification/Passphrase/Reset/Request";
+import { Confirm as PassphraseResetConfirm } from "./identification/Passphrase/Reset/Confirm";
+import { Change as PassphraseChange } from "./identification/Passphrase/Change";
+import { Register } from "./identification/Register";
+import { Arad } from "./Arad";
+import { Login } from "./identification/Login";
+import { Redirect } from "./core/Redirect";
+
+export enum RoutesEnum {
+  HOME,
+  REGISTER,
+  LOGIN,
+  PASSPHRASE,
+  RESET,
+  CONFIRM,
+  SEARCH,
+  ARTICLES,
+  USERS,
+  CODE,
+}
+
+const ROUTE_MAP: {
+  [key in RoutesEnum]: RouteObject & {
+    element: JSX.Element;
+    isProtected?: boolean;
+  };
+} = {
+  [RoutesEnum.HOME]: {
+    path: "/",
+    element: <Arad />,
+  },
+  [RoutesEnum.REGISTER]: {
+    path: "register",
+    element: <Register />,
+  },
+  [RoutesEnum.LOGIN]: {
+    path: "login",
+    element: <Login />,
+  },
+  [RoutesEnum.PASSPHRASE]: {
+    path: "passphrase",
+    element: <PassphraseChange />,
+  },
+  [RoutesEnum.RESET]: {
+    path: "reset",
+    element: <PassphraseResetRequest />,
+  },
+  [RoutesEnum.CONFIRM]: {
+    path: "confirm",
+    element: <PassphraseResetConfirm />,
+  },
+  [RoutesEnum.SEARCH]: {
+    path: "search/:articleId",
+    element: <Analytics />,
+    isProtected: true,
+  },
+  [RoutesEnum.ARTICLES]: {
+    path: "articles/:articleId",
+    element: <Article />,
+    isProtected: true,
+  },
+  [RoutesEnum.USERS]: {
+    path: "users/:userId",
+    element: <User />,
+    isProtected: true,
+  },
+  [RoutesEnum.CODE]: {
+    path: "code",
+    element: <Redirect url="https://github.com/jasoncolburne/arad" />,
+    isProtected: true,
+  },
+};
+
+export const RequireAuth: React.FC<{ children: JSX.Element }> = ({
+  children,
+}) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  useEffect(() => {
+    // TODO: get the user object here...
+    if (!user.isAuthenticated) {
+      // save where they were going originally
+      const query = new URLSearchParams();
+      query.set("to", encodeURIComponent(location.pathname));
+      // navigate to login with original query
+      navigate(`/login?${query.toString()}`);
+    }
+  }, [location.pathname, navigate]);
+
+  return children;
+};
+
+export const getPathByRoute = (route: RoutesEnum): string => {
+  return ROUTE_MAP[route].path!;
+};
+
+const makeRoutes = (): RouteObject[] => {
+  return Object.values(ROUTE_MAP).map((route) => ({
+    path: route.path,
+    element: route.isProtected ? (
+      <RequireAuth>{route.element}</RequireAuth>
+    ) : (
+      route.element
+    ),
+  }));
+};
+
+export const routes = makeRoutes();