mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-21 06:26:26 +00:00
Maurice
5a0e03929d
useListsSubTab remembers whether the packing or the to-do sub tab was open, for ListsContainer and MTripShell. The desktop restores any stored value, the phone restores todo and otherwise falls back to packing.
26 lines
1.0 KiB
TypeScript
26 lines
1.0 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
/** The two lists the Lists tab switches between. */
|
|
export type ListsSubTab = 'packing' | 'todo';
|
|
|
|
const storageKey = (tripId: number) => `trip-lists-subtab-${tripId}`;
|
|
|
|
/**
|
|
* The Lists tab's sub-tab, remembered per trip for the browser session. Both the
|
|
* desktop container and the phone shell read and write the same key. The phone
|
|
* shell only takes a stored value it knows (`onlyKnownTabs`); the desktop one
|
|
* takes whatever is stored, as it always has.
|
|
*/
|
|
export function useListsSubTab(tripId: number, { onlyKnownTabs = false }: { onlyKnownTabs?: boolean } = {}) {
|
|
const [subTab, setSubTabState] = useState<ListsSubTab>(() => {
|
|
const saved = sessionStorage.getItem(storageKey(tripId));
|
|
if (onlyKnownTabs) return saved === 'todo' ? 'todo' : 'packing';
|
|
return (saved as ListsSubTab) || 'packing';
|
|
});
|
|
const setSubTab = (tab: ListsSubTab) => {
|
|
setSubTabState(tab);
|
|
sessionStorage.setItem(storageKey(tripId), tab);
|
|
};
|
|
return [subTab, setSubTab] as const;
|
|
}
|