Edit

Editing: MenuData.js

import {create} from 'zustand';
import getAnchor from "../utils/getAnchor";

if ( typeof fields !== 'undefined' ) {
            let subMenu = getSubMenu(menu, selectedMainMenuItem);
            const selectedSubMenuItem = getSelectedSubMenuItem(subMenu, fields);
            subMenu.menu_items = dropEmptyMenuItems(subMenu.menu_items, fields, selectedSubMenuItem);
            const { nextMenuItem, previousMenuItem }  = getPreviousAndNextMenuItems(menu, selectedSubMenuItem, fields);
            const hasPremiumItems =  subMenu.menu_items.filter((item) => {return (item.premium===true)}).length>0;
            set((state) => ({subMenuLoaded:true, menu: menu, nextMenuItem:nextMenuItem, previousMenuItem:previousMenuItem, selectedMainMenuItem: selectedMainMenuItem, selectedSubMenuItem:selectedSubMenuItem, subMenu: subMenu, hasPremiumItems: hasPremiumItems}));
        } else {
            set((state) => ({menu: menu, selectedMainMenuItem: selectedMainMenuItem}));

}
    },
    getDefaultSubMenuItem: async (fields) => {
        let subMenuLoaded = get().subMenuLoaded;
        if (!subMenuLoaded){
            await get().fetchMenuData(fields);
        }
        let subMenu = get().subMenu;
        let fallBackMenuItem = subMenuLoaded && subMenu.hasOwnProperty(0) ? subMenu[0].id : 'general';
        let anchor = getAnchor('menu');
        let foundAnchorInMenu = false;
        //check if this anchor actually exists in our current submenu. If not, clear it
        for (const key in this.menu.menu_items) {
            if ( subMenu.hasOwnProperty(key) &&  subMenu[key].id === anchor ){
                foundAnchorInMenu=true;
            }
        }
        if ( !foundAnchorInMenu ) anchor = false;
        return anchor ? anchor : fallBackMenuItem;
    }
}));
export default useMenu;

// Parses menu items and nested items in single array
const menuItemParser = (parsedMenuItems, menuItems, fields) => {
    menuItems.forEach((menuItem) => {
        if( menuItem.visible ) {
            parsedMenuItems.push(menuItem.id);
            if( menuItem.hasOwnProperty('menu_items') ) {
                menuItem.menu_items = dropEmptyMenuItems(menuItem.menu_items, fields );
                menuItemParser(parsedMenuItems, menuItem.menu_items, fields);
            }
        }
    });
    return parsedMenuItems;
}

const dropEmptyMenuItems = (menuItems, fields) => {

if (!Array.isArray(fields)) {
        return menuItems;  // return the original menuItems unchanged
    }

const newMenuItems = menuItems;
    for (const [index, menuItem] of menuItems.entries()) {
        let menuItemFields = fields.filter((field) => {
            return (field.menu_id === menuItem.id )
        });

menuItemFields = menuItemFields.filter((field) => {
            return ( field.visible )
        });
        if ( menuItemFields.length === 0 && !menuItem.hasOwnProperty('menu_items') )  {
            if (typeof newMenuItems[index] === 'object' && newMenuItems[index] !== null) {
                newMenuItems[index].visible = false;
            }
        } else {
            if (typeof newMenuItems[index] === 'object' && newMenuItems[index] !== null) {
                newMenuItems[index].visible = true;
            }
            if( menuItem.hasOwnProperty('menu_items') ) {
                newMenuItems[index].menu_items = dropEmptyMenuItems(menuItem.menu_items, fields);
            }
        }

}
    return newMenuItems;
}

/*
* filter sidebar menu from complete menu structure
*/
const getSubMenu = (menu, selectedMainMenuItem) => {

let subMenu = [];
    for (const key in menu) {
        if ( menu.hasOwnProperty(key) && menu[key].id === selectedMainMenuItem ){
            subMenu = menu[key];
        }
    }

subMenu = addVisibleToMenuItems(subMenu);
    return subMenu;
}

/*
* Get the main menu item for a submenu item
*/
const getMainMenuForSubMenu = (findMenuItem) => {
    let menu = rsssl_settings.menu;
    for (const mainKey in menu) {
        let mainMenuItem = menu[mainKey];
        if (mainMenuItem.id===findMenuItem) {
            return mainMenuItem.id;
        }
        if (mainMenuItem.menu_items){
            for (const subKey in mainMenuItem.menu_items) {
                let subMenuItem = mainMenuItem.menu_items[subKey];
                if (subMenuItem.id===findMenuItem) {
                    return mainMenuItem.id;
                }
                if (subMenuItem.menu_items){
                    for (const sub2Key in subMenuItem.menu_items) {
                        let sub2MenuItem = subMenuItem.menu_items[sub2Key];
                        if (sub2MenuItem.id===findMenuItem) {
                            return mainMenuItem.id;
                        }
                    }
                }
            }
        }
    }
    return false;
}

/**
 * Get the current selected menu item based on the hash, selecting subitems if the main one is empty.
 */
const getSelectedSubMenuItem = (subMenu, fields) => {
    let fallBackMenuItem = subMenu && subMenu.menu_items.hasOwnProperty(0) ? subMenu.menu_items[0].id : 'general';
    let foundAnchorInMenu;

//get flat array of menu items
    let parsedMenuItems = menuItemParser([], subMenu.menu_items);
    let anchor = getAnchor('menu');
    //check if this anchor actually exists in our current submenu. If not, clear it
    foundAnchorInMenu = parsedMenuItems.filter(menu_item => menu_item === anchor);
    if ( !foundAnchorInMenu ) {
        anchor = false;
    }
    let selectedMenuItem =  anchor ? anchor : fallBackMenuItem;
    //check if menu item has fields. If not, try a subitem
    let fieldsInMenu = fields.filter(field => field.menu_id === selectedMenuItem);
    if ( fieldsInMenu.length===0 ) {
        //look up the current menu item
        let menuItem = getMenuItemByName(selectedMenuItem, subMenu.menu_items);
        if (menuItem && menuItem.menu_items && menuItem.menu_items.hasOwnProperty(0)) {
            selectedMenuItem = menuItem.menu_items[0].id;
        }
    }
    return selectedMenuItem;
}

//Get a menu item by name from the menu array
const getMenuItemByName = (name, menuItems) => {
    for (const key in menuItems ){
        let menuItem = menuItems[key];
        if ( menuItem.id === name ) {
            return menuItem;
        }
        if ( menuItem.menu_items ) {
            let found = getMenuItemByName(name, menuItem.menu_items);
            if (found) return found;
        }
    }
    return false;
}

const addVisibleToMenuItems = (menu) => {

let newMenuItems = Array.isArray(menu.menu_items) ? menu.menu_items : Object.values(menu.menu_items);

for (let [index, menuItem] of newMenuItems.entries()) {
        if (typeof menuItem === 'object' && menuItem !== null) {
            menuItem.visible = true;
            if (menuItem.hasOwnProperty('menu_items')) {
                menuItem = addVisibleToMenuItems(menuItem);
            }
            newMenuItems[index] = menuItem;
        }
    }
    menu.menu_items = newMenuItems;
    menu.visible = true;
    return menu;
}

Back