@buerokratt-ria/menu 0.1.16 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/menu",
-  "version": "0.1.16",
+  "version": "0.2.0",
   "description": "Generic MainNavigation component that would be injected as dependency.",
   "main": "index.js",
   "scripts": {},

package/src/menu/components/menuTree/index.tsx

@@ -15,9 +15,22 @@ interface MenuTreeProps {
   handleNavToggle: (event: MouseEvent) => void;
 }
 
+interface MenuItemLabelProps {
+  menuItem: MenuItem
+  currentlySelectedLanguage: string
+}
+
+const MenuItemLabel: React.FC<MenuItemLabelProps> = ({ menuItem, currentlySelectedLanguage }) => {
+  return (
+    <>
+      {menuItem.label[currentlySelectedLanguage]} {menuItem.count != null ? `(${menuItem.count})` : ''}
+    </>
+  );
+};
+
 const MenuTree: FC<MenuTreeProps> = ({
-  menuItems, 
-  serviceId, 
+  menuItems,
+  serviceId,
   handleNavToggle,
 }) => {
   const currentlySelectedLanguage = useTranslation().i18n.language;
@@ -50,10 +63,10 @@ const MenuTree: FC<MenuTreeProps> = ({
         ) : (
           serviceId.includes(menuItem.id!)
             ? <NavLink to={menuItem.path || '#'}>
-                {menuItem.label[currentlySelectedLanguage]}
+                <MenuItemLabel menuItem={menuItem} currentlySelectedLanguage={currentlySelectedLanguage} />
               </NavLink>
             : <a href={(menuData.find(dataItem => dataItem.id === menuItem.id)?.url ?? '') + menuItem.path}>
-                {menuItem.label[currentlySelectedLanguage]}
+                <MenuItemLabel menuItem={menuItem} currentlySelectedLanguage={currentlySelectedLanguage} />
               </a>
         )}
       </li>

package/src/menu/hooks/useFilteredMenuItems.tsx

@@ -1,32 +1,38 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { MenuItem } from "../types/menuItem";
 import useMenuItems from "./useMenuItems";
+import { CountConf } from "../types/countConf";
 
-const useFilteredMenuItems = () => {
-  const items = useMenuItems();
+const useFilteredMenuItems = (countConf?: CountConf) => {
+  const items = useMenuItems(countConf);
   const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
 
-  useQuery({
+  const { data } = useQuery<{ response: [] }>({
     queryKey: ['accounts/user-role', 'prod'],
-    onSuccess: (res: any) => {
-      const filteredItems = items.filter((item) => {
-        const role = res.response;
-        if (role.includes('ROLE_ADMINISTRATOR'))
-          return item.id;
-        if (role.includes('ROLE_SERVICE_MANAGER'))
-          return item.id != "settings" && item.id != "training";
-        if (role.includes('ROLE_CUSTOMER_SUPPORT_AGENT'))
-          return item.id != "settings" && item.id != "analytics";
-        if (role.includes('ROLE_CHATBOT_TRAINER'))
-          return item.id != "settings" && item.id != "conversations";
-        if (role.includes('ROLE_ANALYST'))
-          return item.id == "analytics" || item.id == "monitoring"; 
-      });
-      setMenuItems(filteredItems ?? []);
-    },
   });
 
+  useEffect(() => {
+    const filteredItems = items.filter((item) => {
+      if (!data) {
+        return;
+      }
+      const role: any[] = data.response;
+      if (role.includes('ROLE_ADMINISTRATOR'))
+        return item.id;
+      if (role.includes('ROLE_SERVICE_MANAGER'))
+        return item.id != "settings" && item.id != "training";
+      if (role.includes('ROLE_CUSTOMER_SUPPORT_AGENT'))
+        return item.id != "settings" && item.id != "analytics";
+      if (role.includes('ROLE_CHATBOT_TRAINER'))
+        return item.id != "settings" && item.id != "conversations";
+      if (role.includes('ROLE_ANALYST'))
+        return item.id == "analytics" || item.id == "monitoring";
+    });
+
+    setMenuItems(filteredItems ?? []);
+  }, [items, data]);
+
   return menuItems;
 }
 

package/src/menu/hooks/useMenuItems.tsx

@@ -2,8 +2,9 @@ import { useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import menuStructure from '../data/menu-structure.json';
 import { MenuItem } from "../types/menuItem";
+import { CountConf } from "../types/countConf";
 
-const useMenuItems = () => {
+const useMenuItems = (count?: CountConf) => {
   const externalMenuItems = import.meta.env.REACT_APP_MENU_JSON;
   const cachedMenu = getMenuCache();
   const [mainMenuItems, setMainMenuItems] = useState<MenuItem[] | null>(cachedMenu ?? []);
@@ -26,11 +27,11 @@ const useMenuItems = () => {
 
   const items = useMemo(() => {
     let externals;
-    
+
     try {
-      if(externalMenuItems) {
+      if (externalMenuItems) {
         externals = JSON.parse(externalMenuItems);
-        if(!Array.isArray(externals)) {
+        if (!Array.isArray(externals)) {
           console.warn('REACT_APP_MENU_JSON was ignored becuase it wasn\'t an array');
         }
       }
@@ -38,15 +39,28 @@ const useMenuItems = () => {
       console.warn(e);
     }
 
-    return externals ?? mainMenuItems ?? menuStructure ?? [];
-  }, [externalMenuItems, mainMenuItems, menuStructure]);
-  
+    const addCountToPathFields = (item: MenuItem) => {
+      if (count && item.path in count) {
+        item.count = count[item.path]
+      }
+
+      if (item.children) {
+        item.children.forEach(child => addCountToPathFields(child));
+      }
+    }
+
+    const finalMenu = externals ?? mainMenuItems ?? menuStructure ?? [];
+    finalMenu.forEach((item: MenuItem) => addCountToPathFields(item))
+
+    return finalMenu;
+  }, [externalMenuItems, mainMenuItems, menuStructure, count]);
+
   return items;
 }
 
 function getMenuCache(): any {
   const cached = getCache();
-  if(Array.isArray(cached) && cached.length > 0)
+  if (Array.isArray(cached) && cached.length > 0)
     return cached;
   return null;
 }

package/src/menu/index.tsx

@@ -6,10 +6,15 @@ import { useTranslation } from "react-i18next";
 import MenuTree from './components/menuTree';
 import useFilteredMenuItems from './hooks/useFilteredMenuItems';
 import './main-navigation.scss';
+import { CountConf } from "./types/countConf";
 
-const MainNavigation: FC = () => {
+interface MainNavigationProps {
+  countConf?: CountConf
+}
+
+const MainNavigation: FC<MainNavigationProps> = ({countConf}) => {
   const { t } = useTranslation();
-  const menuItems = useFilteredMenuItems();
+  const menuItems = useFilteredMenuItems(countConf);
   const serviceId = useMemo(() => import.meta.env.REACT_APP_SERVICE_ID.split(','), []);
 
   const [navCollapsed, setNavCollapsed] = useState(false);

package/src/menu/types/countConf.ts

@@ -0,0 +1,3 @@
+export interface CountConf {
+   [key: string]: number
+}

package/src/menu/types/menuItem.ts

@@ -10,4 +10,5 @@ export interface MenuItem {
   target?: '_blank' | '_self';
   children?: MenuItem[];
   hidden?: boolean;
+  count?: number
 }

package/tsconfig.base.json

@@ -16,6 +16,7 @@
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
+    "jsx": "react"
   },
   "exclude": ["node_modules", "tmp"]
 }