From 33fa4b5373c6195f24cf6be62226db5daff301fa Mon Sep 17 00:00:00 2001 From: dalejh Date: Thu, 14 Jul 2022 01:35:35 -0400 Subject: [PATCH] Routes refactor --- front-end/src/datatypes/{Role.tsx => Role.ts} | 0 front-end/src/datatypes/{User.tsx => User.ts} | 0 front-end/src/index.tsx | 91 +++----------- front-end/src/main.tsx | 7 ++ front-end/src/routes.tsx | 115 ++++++++++++++++++ 5 files changed, 142 insertions(+), 71 deletions(-) rename front-end/src/datatypes/{Role.tsx => Role.ts} (100%) rename front-end/src/datatypes/{User.tsx => User.ts} (100%) create mode 100644 front-end/src/main.tsx create mode 100644 front-end/src/routes.tsx diff --git a/front-end/src/datatypes/Role.tsx b/front-end/src/datatypes/Role.ts similarity index 100% rename from front-end/src/datatypes/Role.tsx rename to front-end/src/datatypes/Role.ts diff --git a/front-end/src/datatypes/User.tsx b/front-end/src/datatypes/User.ts similarity index 100% rename from front-end/src/datatypes/User.tsx rename to front-end/src/datatypes/User.ts diff --git a/front-end/src/index.tsx b/front-end/src/index.tsx index 218b94a..7ca75ff 100644 --- a/front-end/src/index.tsx +++ b/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 ( + <> + + +
+ + + ); +}; -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( - <> - - - - }> - } /> - - {/* authentication */} - } /> - } /> - }> - } /> - }> - } /> - } /> - - - - {/* core functionality */} - }> - } /> - } /> - - - {/* admin */} - }> - } /> - } /> - - }> - } /> - } /> - - - - - {/* links */} - } /> - - - +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + ); // 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)) diff --git a/front-end/src/main.tsx b/front-end/src/main.tsx new file mode 100644 index 0000000..b520ab2 --- /dev/null +++ b/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); +}; diff --git a/front-end/src/routes.tsx b/front-end/src/routes.tsx new file mode 100644 index 0000000..1dc971e --- /dev/null +++ b/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: , + }, + [RoutesEnum.REGISTER]: { + path: "register", + element: , + }, + [RoutesEnum.LOGIN]: { + path: "login", + element: , + }, + [RoutesEnum.PASSPHRASE]: { + path: "passphrase", + element: , + }, + [RoutesEnum.RESET]: { + path: "reset", + element: , + }, + [RoutesEnum.CONFIRM]: { + path: "confirm", + element: , + }, + [RoutesEnum.SEARCH]: { + path: "search/:articleId", + element: , + isProtected: true, + }, + [RoutesEnum.ARTICLES]: { + path: "articles/:articleId", + element:
, + isProtected: true, + }, + [RoutesEnum.USERS]: { + path: "users/:userId", + element: , + isProtected: true, + }, + [RoutesEnum.CODE]: { + path: "code", + element: , + 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 ? ( + {route.element} + ) : ( + route.element + ), + })); +}; + +export const routes = makeRoutes();