Catalog remember last opened page

This commit is contained in:
Bill 2021-07-29 02:03:30 -04:00
parent 2961ef64ce
commit b200e93968
2 changed files with 32 additions and 10 deletions

View File

@ -11,7 +11,7 @@ import { CatalogMode, CatalogViewProps } from './CatalogView.types';
import { BuildCatalogPageTree } from './common/CatalogUtilities'; import { BuildCatalogPageTree } from './common/CatalogUtilities';
import { CatalogContextProvider } from './context/CatalogContext'; import { CatalogContextProvider } from './context/CatalogContext';
import { CatalogReducer, initialCatalog } from './reducers/CatalogReducer'; import { CatalogReducer, initialCatalog } from './reducers/CatalogReducer';
import { CatalogNavigationView } from './views/navigation/CatalogNavigationView'; import { ACTIVE_PAGES, CatalogNavigationView } from './views/navigation/CatalogNavigationView';
import { CatalogPageView } from './views/page/CatalogPageView'; import { CatalogPageView } from './views/page/CatalogPageView';
export const CatalogView: FC<CatalogViewProps> = props => export const CatalogView: FC<CatalogViewProps> = props =>
@ -20,25 +20,37 @@ export const CatalogView: FC<CatalogViewProps> = props =>
const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null); const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
const [ pendingPageLookup, setPendingPageLookup ] = useState<{ value: string, isOffer: boolean }>(null); const [ pendingPageLookup, setPendingPageLookup ] = useState<{ value: string, isOffer: boolean }>(null);
const [ pendingTree, setPendingTree ] = useState<ICatalogPageData[]>(null); const [ pendingTree, setPendingTree ] = useState<ICatalogPageData[]>(null);
const [ pendingOpenTree, setPendingOpenTree ] = useState<ICatalogPageData[]>(null);
const [ catalogState, dispatchCatalogState ] = useReducer(CatalogReducer, initialCatalog); const [ catalogState, dispatchCatalogState ] = useReducer(CatalogReducer, initialCatalog);
const [ currentTab, setCurrentTab ] = useState<ICatalogPageData>(null); const [ currentTab, setCurrentTab ] = useState<ICatalogPageData>(null);
const { root = null, pageParser = null, activeOffer = null, searchResult = null} = catalogState; const { root = null, pageParser = null, activeOffer = null, searchResult = null} = catalogState;
const saveActivePages = useCallback(() =>
{
setPendingOpenTree(ACTIVE_PAGES.slice());
}, []);
const onCatalogEvent = useCallback((event: CatalogEvent) => const onCatalogEvent = useCallback((event: CatalogEvent) =>
{ {
let save = false;
switch(event.type) switch(event.type)
{ {
case CatalogEvent.SHOW_CATALOG: case CatalogEvent.SHOW_CATALOG:
setIsVisible(true); setIsVisible(true);
return; return;
case CatalogEvent.HIDE_CATALOG: case CatalogEvent.HIDE_CATALOG:
save = true;
setIsVisible(false); setIsVisible(false);
return; return;
case CatalogEvent.TOGGLE_CATALOG: case CatalogEvent.TOGGLE_CATALOG:
save = true;
setIsVisible(value => !value); setIsVisible(value => !value);
return; return;
} }
}, []);
if(save) saveActivePages();
}, [ saveActivePages ]);
useUiEvent(CatalogEvent.SHOW_CATALOG, onCatalogEvent); useUiEvent(CatalogEvent.SHOW_CATALOG, onCatalogEvent);
useUiEvent(CatalogEvent.HIDE_CATALOG, onCatalogEvent); useUiEvent(CatalogEvent.HIDE_CATALOG, onCatalogEvent);
@ -88,7 +100,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
AddEventLinkTracker(linkTracker); AddEventLinkTracker(linkTracker);
return () => RemoveLinkEventTracker(linkTracker); return () => RemoveLinkEventTracker(linkTracker);
}, [ linkReceived]); }, [ linkReceived ]);
useEffect(() => useEffect(() =>
{ {
@ -111,11 +123,21 @@ export const CatalogView: FC<CatalogViewProps> = props =>
return; return;
} }
if(pendingPageLookup !== null) if(pendingPageLookup !== null || pendingOpenTree)
{ {
const tree = BuildCatalogPageTree(catalogState.root, pendingPageLookup.value, pendingPageLookup.isOffer); let tree: ICatalogPageData[] = [];
if(pendingPageLookup !== null)
{
tree = BuildCatalogPageTree(catalogState.root, pendingPageLookup.value, pendingPageLookup.isOffer);
}
else
{
tree = pendingOpenTree.slice();
}
setCurrentTab(tree.shift()); setCurrentTab(tree.shift());
setPendingOpenTree(null);
setPendingPageLookup(null); setPendingPageLookup(null);
setPendingTree(tree); setPendingTree(tree);
} }
@ -137,7 +159,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
}); });
} }
} }
}, [ isVisible, pendingPageLookup, catalogState.root, setCurrentTab ]); }, [ isVisible, pendingPageLookup, pendingOpenTree, catalogState.root, setCurrentTab ]);
useEffect(() => useEffect(() =>
{ {
@ -169,7 +191,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
<CatalogMessageHandler /> <CatalogMessageHandler />
{ isVisible && { isVisible &&
<NitroCardView className="nitro-catalog"> <NitroCardView className="nitro-catalog">
<NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => setIsVisible(false) } /> <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => { saveActivePages(); setIsVisible(false); } } />
<NitroCardTabsView> <NitroCardTabsView>
{ root && root.children.length && root.children.map((page, index) => { root && root.children.length && root.children.map((page, index) =>
{ {

View File

@ -4,7 +4,7 @@ import { CatalogSearchView } from '../search/CatalogSearchView';
import { CatalogNavigationViewProps } from './CatalogNavigationView.types'; import { CatalogNavigationViewProps } from './CatalogNavigationView.types';
import { CatalogNavigationSetView } from './set/CatalogNavigationSetView'; import { CatalogNavigationSetView } from './set/CatalogNavigationSetView';
export const ACTIVE_PAGES: ICatalogPageData[] = []; export let ACTIVE_PAGES: ICatalogPageData[] = [];
export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props => export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
{ {
@ -14,11 +14,11 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
{ {
if(!page) return; if(!page) return;
const index = (ACTIVE_PAGES.push(page) - 1); ACTIVE_PAGES = [ page ];
return () => return () =>
{ {
ACTIVE_PAGES.splice(index, 1); ACTIVE_PAGES = [];
} }
}, [ page ]); }, [ page ]);