@buerokratt-ria/menu 0.1.13 → 0.1.15

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All changes to this project will be documented in this file.
 
+## [0.1.15] - 10-06-2024
+
+- Fix a bug
+
+## [0.1.14] - 07-06-2024
+
+- Fix a bug
+
 ## [0.1.13] - 07-06-2024
 
 - Fix a bug

package/README.md

@@ -34,35 +34,14 @@ To publish created package:
   * `import { MainNavigation } from '@buerokratt-ria/menu/src'` for Header and Menu
   * If you want to use local package, put created package to the root of react app and add dependency like "@buerokratt-ria/header": "file:buerokratt-ria-menu-0.0.5.tgz" (use proper version)
 ### Using MainNavigation component
-  * In Layout component you need to provide fetching and caching the `menu.json` file, code snippet would be:  
-```
-    const CACHE_NAME = 'mainmenu-cache';
-    const [MainMenuItems, setMainMenuItems] = useState([])
-    const  {data, isLoading, status}  = useQuery({
-        queryKey: [import.meta.env.REACT_APP_MENU_URL + import.meta.env.REACT_APP_MENU_PATH],
-        onSuccess: (res: any) => {
-            try {
-                setMainMenuItems(res);
-                localStorage.setItem(CACHE_NAME, JSON.stringify(res));
-            } catch (e) {
-                console.log(e);
-            }
-        },
-        onError: (error: any) => {
-            setMainMenuItems(getCache());
-        }
-
-    });
-
-    function getCache(): any {
-        const cache = localStorage.getItem(CACHE_NAME) || '{}';
-        return JSON.parse(cache);
-    }
-```
-  * Then pass this MainMenu items to menu component `<MainNavigation serviceId={import.meta.env.REACT_APP_SERVICE_ID.split(',')} items={MainMenuItems}/>`
-    * If you want to use only local file provided by package then pass empty array instead `[]`
-    * REACT_APP_SERVICE_ID set of values seperated by comma resembling current module, examples of this value could
-    be found in following links
+  * MainNavigation uses four env variable:
+    * use `REACT_APP_MENU_URL` & `REACT_APP_MENU_PATH` to set the url for json that contains the menu item array
+    * use `REACT_APP_MENU_JSON` with json string of the menu item array
+      * `REACT_APP_MENU_JSON` will overrides buth the local file provieded by package and the `REACT_APP_MENU_URL` & `REACT_APP_MENU_PATH`
+    * If you want to use only local file provided by package then remove `REACT_APP_MENU_JSON`, `REACT_APP_MENU_URL` & `REACT_APP_MENU_PATH` variables
+    * `REACT_APP_SERVICE_ID` set of values seperated by comma resembling current module, examples of this value could be found in following links
+    
+    
 
 ### Implemented examples:
 * https://github.com/buerokratt/Training-Module

package/package.json

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

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

@@ -22,7 +22,9 @@ const MenuTree: FC<MenuTreeProps> = ({
 }) => {
   const currentlySelectedLanguage = useTranslation().i18n.language;
 
-  return menuItems.map((menuItem) => (
+  return menuItems
+    .filter(x => !x.hidden)
+    .map((menuItem) => (
       <li key={menuItem.label[currentlySelectedLanguage]}>
         {!!menuItem.children ? (
             <>

package/src/menu/hooks/useMenuItems.tsx

@@ -5,27 +5,22 @@ import { MenuItem } from "../types/menuItem";
 
 const useMenuItems = () => {
   const externalMenuItems = import.meta.env.REACT_APP_MENU_JSON;
-
-  const [mainMenuItems, setMainMenuItems] = useState<MenuItem[] | null>([]);
+  const cachedMenu = getMenuCache();
+  const [mainMenuItems, setMainMenuItems] = useState<MenuItem[] | null>(cachedMenu ?? []);
 
   useQuery({
-    enabled: !externalMenuItems,
+    enabled: !externalMenuItems && !cachedMenu,
     queryKey: [import.meta.env.REACT_APP_MENU_URL + import.meta.env.REACT_APP_MENU_PATH],
     onSuccess: (res: any) => {
       try {
         setMainMenuItems(res);
+        setCache(res);
       } catch (e) {
-        setMainMenuItems(null);
         console.error(e);
       }
-      setCache(res);
     },
     onError: () => {
-      const cached = getCache();
-      if(cached.length > 0) 
-        setMainMenuItems(cached);
-      else
-        setMainMenuItems(null);
+      setMainMenuItems(cachedMenu);
     },
   });
 
@@ -33,21 +28,29 @@ const useMenuItems = () => {
     let externals;
     
     try {
-      externals = JSON.parse(externalMenuItems);
-      if(!externals.isArray) {
-        console.error('REACT_APP_MENU_JSON was ignored becuase it wasn\'t an array');
+      if(externalMenuItems) {
+        externals = JSON.parse(externalMenuItems);
+        if(!Array.isArray(externals)) {
+          console.warn('REACT_APP_MENU_JSON was ignored becuase it wasn\'t an array');
+        }
       }
     } catch (e) {
-      console.error(e);
+      console.warn(e);
     }
 
-    const allItems = externals ?? mainMenuItems ?? menuStructure ?? [];
-    return allItems.filter(x => !x.hidden);
+    return externals ?? mainMenuItems ?? menuStructure ?? [];
   }, [externalMenuItems, mainMenuItems, menuStructure]);
   
   return items;
 }
 
+function getMenuCache(): any {
+  const cached = getCache();
+  if(Array.isArray(cached) && cached.length > 0)
+    return cached;
+  return null;
+}
+
 function getCache(): any {
   const cache = localStorage.getItem('mainmenu-cache') ?? '[]';
   return JSON.parse(cache);