From faff2451c44e35bdf290e244a38187c92263fa02 Mon Sep 17 00:00:00 2001 From: Bill Date: Fri, 23 Jul 2021 13:23:31 -0400 Subject: [PATCH] Catalog updates --- src/views/catalog/CatalogView.tsx | 58 ++++++++++++------- src/views/catalog/reducers/CatalogReducer.tsx | 11 +++- .../item/CatalogNavigationItemView.tsx | 39 +++++++------ 3 files changed, 68 insertions(+), 40 deletions(-) diff --git a/src/views/catalog/CatalogView.tsx b/src/views/catalog/CatalogView.tsx index 8d59384e..0162cffd 100644 --- a/src/views/catalog/CatalogView.tsx +++ b/src/views/catalog/CatalogView.tsx @@ -18,8 +18,10 @@ export const CatalogView: FC = props => { const [ isVisible, setIsVisible ] = useState(false); const [ roomPreviewer, setRoomPreviewer ] = useState(null); + const [ pendingPageId, setPendingPageId ] = useState(-1); + const [ pendingTree, setPendingTree ] = useState(null); const [ catalogState, dispatchCatalogState ] = useReducer(CatalogReducer, initialCatalog); - const { root = null, currentTab = null, pageParser = null, activeOffer = null, searchResult = null } = catalogState; + const { root = null, currentTab = null, pageParser = null, activeOffer = null, searchResult = null} = catalogState; const onCatalogEvent = useCallback((event: CatalogEvent) => { @@ -52,23 +54,16 @@ export const CatalogView: FC = props => }); }, [ dispatchCatalogState ]); - const navigateThroughTree = useCallback((tree: ICatalogPageData[]) => - { - setCurrentTab(tree.shift()); - }, [ setCurrentTab ]); - - const navigateToPage = useCallback((pageId: number) => + const buildCatalogPageTree = useCallback((page: ICatalogPageData, targetPageId: number) => { const pageTree: ICatalogPageData[] = []; - GetCatalogPageTree(root, pageId, pageTree); + GetCatalogPageTree(page, targetPageId, pageTree); - if(!pageTree.length) return; + if(pageTree.length) pageTree.reverse(); - pageTree.reverse(); - - navigateThroughTree(pageTree); - }, [ root, navigateThroughTree ]); + return pageTree; + }, []); const linkReceived = useCallback((url: string) => { @@ -81,7 +76,12 @@ export const CatalogView: FC = props => case 'open': if(parts.length > 2) { - navigateToPage(parseInt(parts[2])); + dispatchCatalogState({ + type: CatalogActions.SET_PENDING_PAGE_ID, + payload: { + pendingPageId: parseInt(parts[2]) + } + }); } else { @@ -89,7 +89,7 @@ export const CatalogView: FC = props => } return; } - }, [ navigateToPage ]); + }, [ dispatchCatalogState ]); useEffect(() => { @@ -105,16 +105,32 @@ export const CatalogView: FC = props => useEffect(() => { - if(!isVisible) return; - - if(!catalogState.root) + const loadCatalog = (((pendingPageId > -1) && !catalogState.root) || (isVisible && !catalogState.root)); + + if(loadCatalog) { SendMessageHook(new CatalogModeComposer(CatalogMode.MODE_NORMAL)); SendMessageHook(new CatalogRequestGiftConfigurationComposer()); } - console.log(catalogState.root) - }, [ isVisible, catalogState.root ]); + if(catalogState.root) + { + if(!isVisible && (pendingPageId > -1)) + { + setIsVisible(true); + + return; + } + + if(pendingPageId > -1) + { + const tree = buildCatalogPageTree(catalogState.root, pendingPageId); + + setCurrentTab(tree.shift()); + setPendingTree(tree); + } + } + }, [ isVisible, pendingPageId, catalogState.root, buildCatalogPageTree, setCurrentTab ]); useEffect(() => { @@ -158,7 +174,7 @@ export const CatalogView: FC = props =>
- { pageParser && !pageParser.frontPageItems.length && + { (!pageParser || (pageParser && !pageParser.frontPageItems.length)) &&
} diff --git a/src/views/catalog/reducers/CatalogReducer.tsx b/src/views/catalog/reducers/CatalogReducer.tsx index 0d70095e..3ee02bdb 100644 --- a/src/views/catalog/reducers/CatalogReducer.tsx +++ b/src/views/catalog/reducers/CatalogReducer.tsx @@ -19,6 +19,7 @@ export interface ICatalogState clubOffers: CatalogClubOfferData[]; subscriptionInfo: SubscriptionInfo; giftConfiguration: GiftWrappingConfiguration; + pendingPageId: number; } export interface ICatalogAction @@ -37,6 +38,7 @@ export interface ICatalogAction clubOffers?: CatalogClubOfferData[]; subscriptionInfo?: SubscriptionInfo; giftConfiguration?: CatalogGiftConfigurationParser; + pendingPageId?: number; } } @@ -54,6 +56,7 @@ export class CatalogActions public static SET_SEARCH_RESULT: string = 'CA_SET_SEARCH_RESULT'; public static SET_SUBSCRIPTION_INFO: string = 'CA_SET_SUBSCRIPTION_INFO'; public static SET_GIFT_CONFIGURATION: string = 'CA_SET_GIFT_CONFIGURATION'; + public static SET_PENDING_PAGE_ID: string = 'CA_SET_PENDING_PAGE_ID'; } export const initialCatalog: ICatalogState = { @@ -68,7 +71,8 @@ export const initialCatalog: ICatalogState = { petPalettes: [], clubOffers: null, subscriptionInfo: new SubscriptionInfo(), - giftConfiguration: null + giftConfiguration: null, + pendingPageId: -1 } export const CatalogReducer: Reducer = (state, action) => @@ -168,6 +172,11 @@ export const CatalogReducer: Reducer = (state, ac return { ...state, giftConfiguration }; } + case CatalogActions.SET_PENDING_PAGE_ID: { + const pendingPageId = (action.payload.pendingPageId || -1); + + return { ...state, pendingPageId }; + } default: return state; } diff --git a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx b/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx index 302f7aed..baebd013 100644 --- a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx +++ b/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx @@ -1,7 +1,8 @@ -import { CatalogPageComposer } from 'nitro-renderer'; +import { CatalogPageComposer, ICatalogPageData } from 'nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; import { SendMessageHook } from '../../../../../hooks/messages/message-event'; import { CatalogMode } from '../../../CatalogView.types'; +import { useCatalogContext } from '../../../context/CatalogContext'; import { CatalogIconView } from '../../catalog-icon/CatalogIconView'; import { CatalogNavigationSetView } from '../set/CatalogNavigationSetView'; import { CatalogNavigationItemViewProps } from './CatalogNavigationItemView.types'; @@ -10,42 +11,44 @@ export const CatalogNavigationItemView: FC = pro { const { page = null, isActive = false, setActiveChild = null } = props; const [ isExpanded, setIsExpanded ] = useState(false); + const [ myTree, setMyTree ] = useState(null); + const { dispatchCatalogState = null } = useCatalogContext(); - useEffect(() => + const select = useCallback((selectPage: ICatalogPageData) => { - if(!isActive || !page) return; - - setIsExpanded(true); - - SendMessageHook(new CatalogPageComposer(page.pageId, -1, CatalogMode.MODE_NORMAL)); - }, [ isActive, page ]); - - const select = useCallback(() => - { - if(!page) return; + if(!selectPage) return; setActiveChild(prevValue => { - if(prevValue === page) + if(prevValue === selectPage) { - SendMessageHook(new CatalogPageComposer(page.pageId, -1, CatalogMode.MODE_NORMAL)); + SendMessageHook(new CatalogPageComposer(selectPage.pageId, -1, CatalogMode.MODE_NORMAL)); } - return page; + return selectPage; }); - if(page.children && page.children.length) + if(selectPage.children && selectPage.children.length) { setIsExpanded(prevValue => { return !prevValue; }); } - }, [ page, setActiveChild ]); + }, [ setActiveChild ]); + + useEffect(() => + { + if(!isActive || !page) return; + + setIsExpanded(true); + + SendMessageHook(new CatalogPageComposer(page.pageId, -1, CatalogMode.MODE_NORMAL)); + }, [ isActive, page, select, dispatchCatalogState ]); return (
-
+
select(page) }>
{ page.localization }
{ (page.children.length > 0) && }