Creazione di una nuova voce di menu

Step 1

Assicurarsi che alla creazione di una nuova tab l’id generato venga passato tramite query param, altrimenti i singoli componenti non hanno modo di sapere a quale tab devono fare riferimento per recuperare i dati.

INSERIRE ESEMPIO

Step 2

Utilizzare il componente TabWrapper per recuperare il tabId e renderizzare correttamente il componente “Tab” Il componente TabWrapper utilizza il tabId come chiave per il componente “Tab” ed in questo modo ad ogni cambio di tabId nel query param le tab si aggiornano correttamente.

<PrivateRoute path="/etichette-frontalini">
  <TabWrapper>
    <EtichetteFrontalini fallback={<FallbackComponent />} />
  </TabWrapper>
</PrivateRoute>

Step 3

Nel nostro componente tab invece come prima cosa recuperiamo il tabId (e eventualmente il parentId se stiamo lavorando su un TabChild)

const query = useQuery()
const tabId = query.get("tabId")
const parentId = query.get("parentId") // opzionale

Usiamo useTabStorage

const { onAddChildTab, getTabState, updateTabState, getTabById } = useTabStorage()

Aggiungiamo uno stato isMounted

const [isMounted, setIsMounted] = useState<boolean>(false)

Aggiungiamo una ref stateRef che verrà usata per tenere traccia dei cambiamenti degli stati del componente

const stateRef = useRef<any>()

Subito dopo la dichiarazione di tutti gli stati del nostro componente, utilizziamo lo stateRef per tenere traccia dei cambiamenti

stateRef.current = {
  paginazioneArticoli,
  showSelection,
  testoFiltroRicerca,
  listaTesteFinale,
  selection
}

Aggiungiamo uno useEffect, che si occuperà di caricare lo stato da localStorage oppure salvare nel localStorage lo stato corrente durante i cicli di mount ed unmount (per sicurezza utilizziamo ?? quando recuperiamo i valori dallo storage)

useEffect(() => {
  if (tabId) {
  const tmp = getTabState(tabId)
  if (tmp) {
  setPaginazioneArticoli(tmp.paginazioneArticoli ?? 50)
  setShowSelection(tmp.showSelection ?? false)
  if(tmp.search){
  setTestoFiltroRicerca(tmp.search)
}else{
  setTestoFiltroRicerca(tmp.testoFiltroRicerca ?? "")
}
  setSelection(tmp.selection ?? [])
  setListaTesteFinale(tmp.listaTesteFinale)
}
}
  setIsMounted(true)
 
  return (() => {
  if (tabId) {
  const tmp = getTabState(tabId)
  updateTabState(tabId, {
  ...tmp,
  ...stateRef.current
})
}
})
}, [])

Componenti Personalizzazioni