Adapt route nodes to be used with redux

Each routes should be adapted to have its own title based on a `BASE_TITLE`. Besides, the routing slice should update the data based on the current page information (i.e. when this is first loaded). Signed-off-by: Carla Martinez <[email protected]>
carma12 · May 22, 2024 · fa99bfd · fa99bfd
1 parent 07c90d0
commit fa99bfd
Show file tree

Hide file tree

Showing 3 changed files with 217 additions and 97 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,6 +7,11 @@ import { Spinner } from "@patternfly/react-core";
 import { AppLayout } from "./AppLayout";
 // Navigation
 import { AppRoutes } from "./navigation/AppRoutes";
+import {
+  getBreadCrumbByPath,
+  getGroupByPath,
+  getTitleByPath,
+} from "./navigation/NavRoutes";
 // RPC client
 import { Command, useBatchCommandQuery } from "./services/rpc";
 // Redux
@@ -21,39 +26,52 @@ import {
   updateCaIsEnabled,
   updateVaultConfiguration,
 } from "src/store/Global/global-slice";
-
-// Context
-export const Context = React.createContext<{
-  groupActive: string;
-  setGroupActive: React.Dispatch<any>;
-  browserTitle: string;
-  setBrowserTitle: React.Dispatch<any>;
-  superGroupActive: string;
-  setSuperGroupActive: React.Dispatch<any>;
-}>({
-  groupActive: "active-users",
-  setGroupActive: () => null,
-  browserTitle: "Active users title",
-  setBrowserTitle: () => null,
-  superGroupActive: "users",
-  setSuperGroupActive: () => null,
-});
+import {
+  updateBreadCrumbPath,
+  updateActivePageName,
+  updateActiveFirstLevel,
+  updateActiveSecondLevel,
+  updateBrowserTitle,
+} from "src/store/Global/routes-slice";
+// Router DOM
+import { useLocation, useNavigate } from "react-router-dom";
 
 const App: React.FunctionComponent = () => {
-  // Dispatch (Redux)
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  // When accessing to a given URL directly from the browser, the routing data is loaded
+  useEffect(() => {
+    // Get group data based on current path
+    const loadedGroup = getGroupByPath(pathname);
+    if (loadedGroup.length > 0) {
+      let currentFirstLevel = loadedGroup[loadedGroup.length - 2];
+      const currentSecondLevel = loadedGroup[loadedGroup.length - 1];
+      // If no second level is present, first and second levels have the same value
+      // This allows the navbar item to be expanded and highlighted
+      // E.g.: ['', 'services']
+      if (currentFirstLevel === "") {
+        currentFirstLevel = currentSecondLevel;
+      }
+      dispatch(updateActiveFirstLevel(currentFirstLevel));
+      dispatch(updateActiveSecondLevel(currentSecondLevel));
+      dispatch(updateActivePageName(currentSecondLevel)); // Corresponds to the page name
+    }
 
-  // - Initial active group
-  const [groupActive, setGroupActive] = React.useState("active-users");
-  // - Initial title
-  const [browserTitle, setBrowserTitle] = React.useState("Active users title");
-  // - Initial active super group
-  const [superGroupActive, setSuperGroupActive] = React.useState("users");
+    // Get breadcrumb data based on current path
+    const loadedBreadCrumb = getBreadCrumbByPath(pathname);
+    if (loadedBreadCrumb.length > 0) {
+      dispatch(updateBreadCrumbPath(loadedBreadCrumb));
+    }
 
-  // Update the 'browserTitle' on document.title when this changes
-  React.useEffect(() => {
-    document.title = browserTitle;
-  }, [browserTitle]);
+    // Get browser title based on current path
+    const currentTitle = getTitleByPath(pathname);
+    if (currentTitle) {
+      dispatch(updateBrowserTitle(currentTitle));
+    }
+    navigate(pathname);
+  }, []);
 
   // [API Call] Get initial data
   // TODO: Move this call into a sequential endpoint to execute this
@@ -118,27 +136,16 @@ const App: React.FunctionComponent = () => {
   }, [isInitialBatchLoading]);
 
   return (
-    <Context.Provider
-      value={{
-        groupActive,
-        setGroupActive,
-        browserTitle,
-        setBrowserTitle,
-        superGroupActive,
-        setSuperGroupActive,
-      }}
-    >
-      <AppLayout>
-        {!isInitialBatchLoading ? (
-          <AppRoutes />
-        ) : (
-          <Spinner
-            style={{ alignSelf: "center", marginTop: "15%" }}
-            aria-label="Spinner waiting to load page"
-          />
-        )}
-      </AppLayout>
-    </Context.Provider>
+    <AppLayout>
+      {!isInitialBatchLoading ? (
+        <AppRoutes />
+      ) : (
+        <Spinner
+          style={{ alignSelf: "center", marginTop: "15%" }}
+          aria-label="Spinner waiting to load page"
+        />
+      )}
+    </AppLayout>
   );
 };
 

diff --git a/src/navigation/Nav.tsx b/src/navigation/Nav.tsx
@@ -3,25 +3,34 @@ import React from "react";
 import { NavLink } from "react-router-dom";
 // Navigation (PatternFly)
 import { navigationRoutes } from "./NavRoutes";
-// Context
-import { Context } from "../App";
+// Redux
+import { useAppDispatch, useAppSelector } from "src/store/hooks";
+import {
+  updateBreadCrumbPath,
+  updateActivePageName,
+  updateActiveFirstLevel,
+  updateActiveSecondLevel,
+  updateBrowserTitle,
+} from "src/store/Global/routes-slice";
 
 // Renders NavItem
 const renderNavItem = (
   item: { label: string; group: string; path: string; title: string },
   id: number,
   superGroup: string
 ) => {
-  const { groupActive, setGroupActive, setBrowserTitle, setSuperGroupActive } =
-    React.useContext(Context);
+  const dispatch = useAppDispatch();
+  const activePageName = useAppSelector((state) => state.routes.activePageName);
   return (
     <NavItem
       key={id}
-      isActive={groupActive === item.group}
+      isActive={activePageName === item.group}
       onClick={() => {
-        setGroupActive(item.group);
-        setBrowserTitle(item.title);
-        setSuperGroupActive(superGroup);
+        dispatch(updateActiveSecondLevel(item.group));
+        dispatch(updateActivePageName(item.group));
+        dispatch(updateBrowserTitle(item.title));
+        dispatch(updateActiveFirstLevel(superGroup));
+        dispatch(updateBreadCrumbPath([{ name: item.label, url: item.path }]));
       }}
     >
       <NavLink to={item.path}>{item.label}</NavLink>
@@ -31,7 +40,11 @@ const renderNavItem = (
 
 // Renders 'Navigation'
 const Navigation = () => {
-  const { superGroupActive } = React.useContext(Context);
+  // The first level will determine if the section is expanded and highligted
+  const activeFirstLevel = useAppSelector(
+    (state) => state.routes.activeFirstLevel
+  );
+
   return (
     <Nav>
       <NavList>
@@ -41,20 +54,20 @@ const Navigation = () => {
               key={id}
               title={section.label}
               isActive={section.items.some(
-                (route) => route.group === superGroupActive
+                (route) => route.group === activeFirstLevel
               )}
               isExpanded={section.items.some(
-                (route) => route.group === superGroupActive
+                (route) => route.group === activeFirstLevel
               )}
             >
               {section.items.map((subsection, sid) => {
-                if (subsection.items.length > 0) {
+                if (subsection.items && subsection.items.length > 0) {
                   return (
                     <NavExpandable
                       key={sid}
                       title={subsection.label}
-                      isActive={superGroupActive === subsection.group}
-                      isExpanded={superGroupActive === subsection.group}
+                      isActive={activeFirstLevel === subsection.group}
+                      isExpanded={activeFirstLevel === subsection.group}
                     >
                       {subsection.items.map(
                         (linkItem, lid) =>