Refactor BrowserRouter to RouterProvider for hpc-cdm

https://reactrouter.com/6.28.0/components/routes#routes In `hpc-cdm` there are many `<Routes />` elements, for the way is built it makes sense to let these `<Routes />` where they are instead of briging all of them to `main.tsx` since we have logic inside these `<Routes />`. In documentation they say that from `v6` and on, it is an 'uncommon practice', but for the way this was thought out, it would need a major rewrite or to let as it is for readability and maintenence ease purpose.
UN-OCHA · Dec 16, 2024 · da2476e · da2476e
1 parent e063c20
commit da2476e
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 78 deletions.
diff --git a/apps/hpc-cdm/src/app/app.tsx b/apps/hpc-cdm/src/app/app.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Navigate, Route, Routes } from 'react-router';
+import { Outlet } from 'react-router';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
@@ -11,13 +11,8 @@ import { LANGUAGE_CHOICE, LanguageKey, t } from '../i18n';
 import { Z_INDEX } from './layout';
 import * as paths from './paths';
 import PageMeta from './components/page-meta';
-import { RouteParamsValidator } from './components/route-params-validator';
 
-import PageAdmin from './pages/admin';
 import PageNotLoggedIn from './pages/not-logged-in';
-import PageNotFound from './pages/not-found';
-import PageOperationsList from './pages/operations-list';
-import PageOperation from './pages/operation';
 
 const environmentWarning = (env: Environment, lang: LanguageKey) => {
   const warning = env.getDevHeaderWarning(lang);
@@ -143,32 +138,7 @@ export const App = () => {
                             : []),
                         ]}
                       />
-                      <Routes>
-                        <Route
-                          path={paths.home()}
-                          element={<Navigate to={paths.operations()} />}
-                        />
-                        <Route
-                          path={paths.operations()}
-                          element={<PageOperationsList />}
-                        />
-                        <Route
-                          path={paths.operationRoot()}
-                          element={
-                            <RouteParamsValidator
-                              element={<PageOperation />}
-                              routeParam="id"
-                            />
-                          }
-                        />
-                        {canModifyGlobalUserAccess && (
-                          <Route
-                            path={paths.adminRoot()}
-                            element={<PageAdmin />}
-                          />
-                        )}
-                        <Route path={paths.root()} element={<PageNotFound />} />
-                      </Routes>
+                      <Outlet />
                     </LoggedInContainer>
                   ) : (
                     <>

diff --git a/apps/hpc-cdm/src/app/pages/admin.tsx b/apps/hpc-cdm/src/app/pages/admin.tsx
@@ -12,44 +12,50 @@ import PageMeta from '../components/page-meta';
 const PageAdmin = () => {
   return (
     <AppContext.Consumer>
-      {({ lang }) => (
-        <div className={CLASSES.CONTAINER.CENTERED}>
-          <PageMeta title={[t.t(lang, (s) => s.navigation.admin)]} />
-          <C.SidebarNavigation
-            menu={[
-              {
-                label: t.t(lang, (s) => s.navigation.manageAccess),
-                path: paths.adminAccess(),
-              },
-            ]}
-          >
-            <Routes>
-              <Route
-                path={paths.home()}
-                element={<Navigate to={paths.access()} />}
-              />
-              <Route
-                path={paths.access()}
-                element={
-                  <TargetAccessManagement
-                    target={{
-                      type: 'global',
-                    }}
-                  />
-                }
-              />
-              <Route
-                path={paths.root()}
-                element={
-                  <C.NotFound
-                    strings={t.get(lang, (s) => s.components.notFound)}
-                  />
-                }
-              />
-            </Routes>
-          </C.SidebarNavigation>
-        </div>
-      )}
+      {({ lang, access }) => {
+        const { canModifyGlobalUserAccess } = access().permissions;
+        if (!canModifyGlobalUserAccess) {
+          return <Navigate to={paths.home()} />;
+        }
+        return (
+          <div className={CLASSES.CONTAINER.CENTERED}>
+            <PageMeta title={[t.t(lang, (s) => s.navigation.admin)]} />
+            <C.SidebarNavigation
+              menu={[
+                {
+                  label: t.t(lang, (s) => s.navigation.manageAccess),
+                  path: paths.adminAccess(),
+                },
+              ]}
+            >
+              <Routes>
+                <Route
+                  path={paths.home()}
+                  element={<Navigate to={paths.access()} />}
+                />
+                <Route
+                  path={paths.access()}
+                  element={
+                    <TargetAccessManagement
+                      target={{
+                        type: 'global',
+                      }}
+                    />
+                  }
+                />
+                <Route
+                  path={paths.root()}
+                  element={
+                    <C.NotFound
+                      strings={t.get(lang, (s) => s.components.notFound)}
+                    />
+                  }
+                />
+              </Routes>
+            </C.SidebarNavigation>
+          </div>
+        );
+      }}
     </AppContext.Consumer>
   );
 };

diff --git a/apps/hpc-cdm/src/main.tsx b/apps/hpc-cdm/src/main.tsx
@@ -1,21 +1,48 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router';
+import { createBrowserRouter, Navigate, RouterProvider } from 'react-router';
 import { ThemeProvider } from '@unocha/hpc-ui';
 
 import App from './app/app';
 import './assets/styles/enketo.css';
+import { RouteParamsValidator } from './app/components/route-params-validator';
+import * as paths from './app/paths';
+
+import PageAdmin from './app/pages/admin';
+import PageNotFound from './app/pages/not-found';
+import PageOperationsList from './app/pages/operations-list';
+import PageOperation from './app/pages/operation';
 
 const rootElement = document.getElementById('root');
 if (!rootElement) {
   throw new Error('Failed to find the root element');
 }
 const root = ReactDOM.createRoot(rootElement);
 
-root.render(
-  <BrowserRouter>
-    <ThemeProvider>
-      <App />
-    </ThemeProvider>
-  </BrowserRouter>
-);
+const router = createBrowserRouter([
+  {
+    path: paths.home(),
+    element: (
+      <ThemeProvider>
+        <App />
+      </ThemeProvider>
+    ),
+    children: [
+      { path: paths.home(), element: <Navigate to={paths.operations()} /> },
+      { path: paths.operations(), element: <PageOperationsList /> },
+      {
+        path: paths.operationRoot(),
+        element: (
+          <RouteParamsValidator element={<PageOperation />} routeParam="id" />
+        ),
+      },
+      {
+        path: paths.adminRoot(),
+        element: <PageAdmin />,
+      },
+      { path: paths.root(), element: <PageNotFound /> },
+    ],
+  },
+]);
+
+root.render(<RouterProvider router={router} />);