Componenti del menu

TabStorage

Lo slice tabstorage definisce le funzioni principali per gestire ogni pagina (route) del frontend come una tab.

Una tab è un oggetto dove vengono salvate le informazioni relative ad ogni istanza di ogni menu, ed è costituita dalle seguenti proprietà:

{
  id: Uuid
  key: Uuid
  feature:  {
    route: Routes
    title: string
    props ?: string
    parent: Routes // solo se tab "child"
    parentTitle: string // solo se tab "child"
  }
  collapsed: boolean
  children ?: Tab[]
}

Le Tab “child” sono delle tab che al loro interno contengo anche le informazioni su chi è il padre.

useStore & useTabStorage

L’utilizzo dello slice tabstorage si implementa mediante l’hook useStore

const tabsStore = useStore((state: any) => ({
  clear: state.removeAllTabs,
  add: state.addTab,
  addChild: state.addChildTabV2,
  addTabV2: state.addTabV2,
  removeChild: state.removeChildTabV2,
  removeTabs: state.removeTabs,
  updateState: state.updateTabState,
  getState: state.getTabState,
  updateChildState: state.updateTabChildrenState,
  getChildState: state.getTabChildrenState,
  remove: state.removeTab,
  getTab: state.getTab,
  getTabsByRoute: state.getTabsByRoute,
  getChildTab: state.getChildTab,
  getActiveTab: state.getActiveTab,
  getTabs: state.getTabs,
}))

useStore è stato wrappato in un altro hook chiamato useTabStorage per centralizzare tutte le funzioni con la stessa logica che nei singoli componenti avrebbero creato confusione e ridotto la manutenibilità.

useTabStorage contiene tutte le logiche di aggiunta, rimozione, modifica stato ed inizializzazione stato di una Tab e delle tab child della Tab stessa. Inoltre gestisce anche i cambi di rotta tra una tab e un’altra utilizzando solo gli identificativi delle tab stesse.

Strutture Creazione