added private routes

README.md

@@ -23,6 +23,5 @@ cp ./.env.template.local ./.env.production.local
 - [PM2](https://pm2.keymetrics.io/)
 
 # Roadmap
-- [ ] create private routes
-- [ ] fix errors
 - [ ] complete pages incl. password request and RAGChat
+- [ ] fix errors
\ No newline at end of file

README_tmp.html

@@ -389,9 +389,8 @@ cp ./.env.template.local ./.env.production.local
 </ul>
 <h1 id="roadmap">Roadmap</h1>
 <ul>
-<li><input type="checkbox" id="checkbox0"><label for="checkbox0">create private routes</label></li>
+<li><input type="checkbox" id="checkbox0"><label for="checkbox0">complete pages incl. password request and RAGChat</label></li>
 <li><input type="checkbox" id="checkbox1"><label for="checkbox1">fix errors</label></li>
-<li><input type="checkbox" id="checkbox2"><label for="checkbox2">complete pages incl. password request and RAGChat</label></li>
 </ul>
 
 </body>

src/contexts/Auth/AuthState.jsx

@@ -55,6 +55,7 @@ function AuthState({ children }) {
       value={{
         login,
         logout,
+        currentUser,
         USER_ACTIONS,
         dispatchCurrentUser
       }}>

src/routes/PrivateRoute.jsx

+import React from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../contexts/Auth/AuthState';
+
+function PrivateRoute({ children }) {
+  // #################################
+  // HOOKS
+  // #################################
+  // ### MAKE USE OF location
+  const location = useLocation();
+
+  // #################################
+  // FUNCTIONS
+  // #################################
+  // ### IMPORT CurrentUser FUNCTION FROM AuthContext
+  const { currentUser } = useAuth();
+
+  // #################################
+  // OUTPUT
+  // #################################
+  // if user is logged in, load children
+  // otherwise load login page, but remember originally requested page in location state.redirectTo
+  return currentUser ? children : <Navigate to='/login' replace state={{ redirectTo: location }} />;
+}
+
+export default PrivateRoute;
\ No newline at end of file

src/routes/WrapRoutes.jsx

 import { lazy, Suspense } from 'react';
+import PrivateRoute from './PrivateRoute';
 
 /**
  * Lazily load the mentioned component which resides in the page directory
@@ -8,15 +9,16 @@ import { lazy, Suspense } from 'react';
 export function loadComponent(componentPath, lazyLoad, privateRoute) {
 
   lazyLoad = typeof lazyLoad !== "undefined" ? lazyLoad : true;
+  privateRoute = typeof privateRoute !== "undefined" ? privateRoute : false;
 
   // It is not possible to use a fully dynamic import statement, such as import(foo). Because foo could potentially be any path to any file in your system or project.
   // The import() must contain at least some information about where the module is located.
 
   const Component = lazyLoad ? lazy(() => import(/* @vite-ignore */`../pages/${componentPath}`)) : import(/* @vite-ignore */`../pages/${componentPath}`);
 
+  let element = privateRoute ? <PrivateRoute><Component /></PrivateRoute> : <Component />;
 
-
-  let element = lazyLoad ? <Suspense fallback={<span>Loading...</span>}><Component /></Suspense> : <Component />;
+  element = lazyLoad ? <Suspense fallback={<span>Loading...</span>}>{element}</Suspense> : element;
 
   // Wrapping around the suspense component is mandatory
   return element;