Merge getActiveKey and getPathKey

onaio · Jun 9, 2023 · 7317422 · 7317422
1 parent df4765b
commit 7317422
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 29 deletions.
diff --git a/app/src/components/page/Sidebar/index.tsx b/app/src/components/page/Sidebar/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { Dictionary } from '@onaio/utils';
 import { Layout, Menu } from 'antd';
 import { Link, useLocation } from 'react-router-dom';
 import { URL_HOME } from '../../../constants';
 import { Route, getRoutes } from '../../../routes';
-import { getActiveKey, getPathKey } from './utils';
+import { getActivePath } from './utils';
 import { MAIN_LOGO_SRC, OPENSRP_WEB_VERSION } from '../../../configs/env';
 import { useTranslation } from '../../../mls';
 import './Sidebar.css';
@@ -27,7 +27,8 @@ export const SidebarComponent: React.FC<SidebarProps> = (props: SidebarProps) =>
   const { extraData } = props;
   const { roles } = extraData;
   let location = useLocation();
-  const [openKeys, setOpenKeys] = React.useState<React.Key[]>([]);
+
+  // const [collapsedKeys, setCollapsedKeys] = React.useState<React.Key[]>([activePaths.activePaths]);
 
   const routes = React.useMemo(() => getRoutes(roles as string[], t), [roles, t]);
 
@@ -55,8 +56,20 @@ export const SidebarComponent: React.FC<SidebarProps> = (props: SidebarProps) =>
     return routes.map(mapChildren);
   }, [routes]);
 
-  const activePaths = getPathKey(location.pathname, routes);
-  const activeKey = getActiveKey(location.pathname, routes);
+  const { activeKey, activePaths } = getActivePath(location.pathname, routes);
+
+  // const activePaths = getActivePath(location.pathname, routes)
+
+  // console.log(activePaths)
+  const [collapsedKeys, setCollapsedKeys] = React.useState(activePaths);
+  console.log({collapsedKeys, activePaths})
+
+  useEffect(() => {
+    setCollapsedKeys(activePaths)
+  }, [])
+
+  // const activePaths = getPathKey(location.pathname, routes);
+  // const activeKey = getActiveKey(location.pathname, routes);
 
   return (
     <Layout.Sider width="275px" className="layout-sider">
@@ -73,10 +86,10 @@ export const SidebarComponent: React.FC<SidebarProps> = (props: SidebarProps) =>
         key="main-menu"
         theme="dark"
         selectedKeys={[activeKey ?? '']}
-        openKeys={openKeys.length ? (openKeys as string[]) : activePaths}
+        openKeys={collapsedKeys}
         defaultOpenKeys={activePaths}
         defaultSelectedKeys={[activeKey ?? '']}
-        onOpenChange={(keys) => setOpenKeys(keys)}
+        onOpenChange={(openKeys) => setCollapsedKeys(openKeys)}
         mode="inline"
         className="menu-dark"
       >

diff --git a/app/src/components/page/Sidebar/utils.tsx b/app/src/components/page/Sidebar/utils.tsx
@@ -5,38 +5,41 @@ import { Route } from '../../../routes';
  * @param routes - The routes to get search the active route from
  * @param path - an array of menu location path
  */
-export function getActiveKey(path: string, routes: Route[]) {
-  let activeKey: string | undefined;
+// export function getActiveKey(path: string, routes: Route[]) {
+//   let activeKey: string | undefined;
 
-  function mapMenus(menu: Route) {
-    // Exact Match
-    if (path === menu.url) activeKey = menu.key;
-    // Trying to Match with Children
-    if (menu.children) menu.children.forEach(mapMenus);
-  }
+//   function mapMenus(menu: Route) {
+//     // Exact Match
+//     if (path === menu.url) activeKey = menu.key;
+//     // Trying to Match with Children
+//     if (menu.children) menu.children.forEach(mapMenus);
+//   }
 
-  for (let i: number = 0; i < routes.length; i++) {
-    let route = routes[i];
-    if (activeKey === undefined) {
-      mapMenus(route);
-    }
-  }
+//   for (let i: number = 0; i < routes.length; i++) {
+//     let route = routes[i];
+//     if (activeKey === undefined) {
+//       mapMenus(route);
+//     }
+//   }
 
-  return activeKey;
-}
+//   return activeKey;
+// }
 
-export function getPathKey(path: string, routes: Route[]) {
+export function getActivePath(path: string, routes: Route[]) {
   let activePaths: string[] = [];
+  let activeKey: string | undefined;
   let openKey: string | undefined;
 
   function mapPaths(menu: Route) {
+    if (path === menu.url) activeKey = menu.key;
     // Check if the menu has children
     if (menu.children) {
       // Recursively call mapMenus on each child
       for (const child of menu.children) {
         // Exact Match
         if (path === child.url) {
           openKey = menu.key;
+          activeKey = child.key;
         }
         mapPaths(child);
         if (openKey) {
@@ -49,12 +52,17 @@ export function getPathKey(path: string, routes: Route[]) {
     }
   }
 
-  for (let i: number = 0; i < routes.length; i++) {
-    let route = routes[i];
-    if (openKey === undefined) {
-      mapPaths(route);
+  for (const route of routes) {
+    if(activeKey === undefined) {
+      mapPaths(route)
     }
+    if (activeKey) break;
   }
+
   activePaths = activePaths.reverse();
-  return activePaths;
+
+  return {
+    activeKey,
+    activePaths
+  }
 }