@buerokratt-ria/menu 0.1.15 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All changes to this project will be documented in this file.
 
+## [0.1.16] - 10-06-2024
+
+- Improve close menu functionality
+
 ## [0.1.15] - 10-06-2024
 
 - Fix a bug

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/menu",
-  "version": "0.1.15",
+  "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

@@ -1,18 +1,20 @@
 import React, { FC, MouseEvent, useState, useMemo } from 'react';
 import clsx from 'clsx';
-import {
-    MdKeyboardArrowRight,
-    MdKeyboardArrowLeft,
-} from 'react-icons/md';
+import { MdClose } from 'react-icons/md';
 import Icon from './components/icons/icon/icon';
 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);
@@ -23,17 +25,19 @@ const MainNavigation: FC = () => {
     event.currentTarget.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
   };
 
+  const handleCloseButtonClick = () => {
+    const doesMenuHasExpandedItem =  !!document.querySelector('button[aria-expanded="true"]');
+    if(doesMenuHasExpandedItem)
+      setNavCollapsed(!navCollapsed);
+  }
+
   if (!menuItems) return null;
 
   return (
     <nav className={clsx('nav', { 'collapsed': navCollapsed })}>
-      <button className='nav__menu-toggle close-button-item' onClick={() => setNavCollapsed(!navCollapsed)}>
-        {
-          navCollapsed
-          ? <Icon icon={<MdKeyboardArrowRight className='menu-item-icon' />} size='large' />
-          : <Icon icon={<MdKeyboardArrowLeft className='menu-item-icon' />} size='large' />
-        }
-        <span className='menu-item-title'>{t('mainMenu.closeMenu')}</span>
+      <button className='nav__menu-toggle close-button-item' onClick={handleCloseButtonClick}>
+        <Icon icon={<MdClose />} />
+        <span className='menu-item-title'>{t(navCollapsed ? 'mainMenu.openMenu' : 'mainMenu.closeMenu' )}</span>
       </button>
       <ul className='nav__menu'>
         <MenuTree

package/src/menu/main-navigation.scss

@@ -116,24 +116,14 @@
 }
 
 .collapsed {
-  width: 64px;
-
-  .menu-item-arrow,
-  .menu-item-title {
-    display: none !important;
-  }
-  
-  .menu-item-icon {
-    height: 24px;
-    width: 24px;
-  }
-
-  .close-button-item,
-  button.nav__toggle {
-    justify-content: center;
+  .nav__submenu {
+    visibility: hidden;
+    height: 0;
   }
 
-  .nav__submenu {
-    display: none !important;
+  button[aria-expanded=true] {
+    .icon {
+      transform: rotate(0deg);
+    }
   }
 }

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"]
 }