Catalog updates

src/views/catalog/CatalogView.tsx

@@ -18,8 +18,10 @@ export const CatalogView: FC<CatalogViewProps> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
     const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
+    const [ pendingPageId, setPendingPageId ] = useState(-1);
+    const [ pendingTree, setPendingTree ] = useState<ICatalogPageData[]>(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<CatalogViewProps> = props =>
         });
     }, [ dispatchCatalogState ]);
 
-    const navigateThroughTree = useCallback((tree: ICatalogPageData[]) =>
+    const buildCatalogPageTree = useCallback((page: ICatalogPageData, targetPageId: number) =>
-    {
-        setCurrentTab(tree.shift());
-    }, [ setCurrentTab ]);
-
-    const navigateToPage = useCallback((pageId: number) =>
     {
         const pageTree: ICatalogPageData[] = [];
 
-        GetCatalogPageTree(root, pageId, pageTree);
+        GetCatalogPageTree(page, targetPageId, pageTree);
 
-        if(!pageTree.length) return;
+        if(pageTree.length) pageTree.reverse();
 
-        pageTree.reverse();
+        return pageTree;
-
+    }, []);
-        navigateThroughTree(pageTree);
-    }, [ root, navigateThroughTree ]);
 
     const linkReceived = useCallback((url: string) =>
     {
@@ -81,7 +76,12 @@ export const CatalogView: FC<CatalogViewProps> = 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<CatalogViewProps> = props =>
                 }
                 return;
         }
-    }, [ navigateToPage ]);
+    }, [ dispatchCatalogState ]);
 
     useEffect(() =>
     {
@@ -105,16 +105,32 @@ export const CatalogView: FC<CatalogViewProps> = props =>
 
     useEffect(() =>
     {
-        if(!isVisible) return;
+        const loadCatalog = (((pendingPageId > -1) && !catalogState.root) || (isVisible && !catalogState.root));
-        
+
-        if(!catalogState.root)
+        if(loadCatalog)
         {
             SendMessageHook(new CatalogModeComposer(CatalogMode.MODE_NORMAL));
             SendMessageHook(new CatalogRequestGiftConfigurationComposer());
         }
 
-        console.log(catalogState.root)
+        if(catalogState.root)
-    }, [ isVisible, 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<CatalogViewProps> = props =>
                     </NitroCardTabsView>
                     <NitroCardContentView>
                         <div className="row h-100">
-                            { pageParser && !pageParser.frontPageItems.length &&
+                            { (!pageParser || (pageParser && !pageParser.frontPageItems.length)) &&
                                 <div className="col-3 d-flex flex-column h-100">
                                     <CatalogNavigationView page={ currentNavigationPage } />
                                 </div> }

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<ICatalogState, ICatalogAction> = (state, action) =>
@@ -168,6 +172,11 @@ export const CatalogReducer: Reducer<ICatalogState, ICatalogAction> = (state, ac
 
             return { ...state, giftConfiguration };
         }
+        case CatalogActions.SET_PENDING_PAGE_ID: {
+            const pendingPageId = (action.payload.pendingPageId || -1);
+
+            return { ...state, pendingPageId };
+        }
         default:
             return state;
     }

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<CatalogNavigationItemViewProps> = pro
 {
     const { page = null, isActive = false, setActiveChild = null } = props;
     const [ isExpanded, setIsExpanded ] = useState(false);
+    const [ myTree, setMyTree ] = useState<ICatalogPageData[]>(null);
+    const { dispatchCatalogState = null } = useCatalogContext();
 
-    useEffect(() =>
+    const select = useCallback((selectPage: ICatalogPageData) =>
     {
-        if(!isActive || !page) return;
+        if(!selectPage) return;
-
-        setIsExpanded(true);
-
-        SendMessageHook(new CatalogPageComposer(page.pageId, -1, CatalogMode.MODE_NORMAL));
-    }, [ isActive, page ]);
-
-    const select = useCallback(() =>
-    {
-        if(!page) 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 (
         <div className="col pb-1 catalog-navigation-item-container">
-            <div className={ 'd-flex align-items-center cursor-pointer catalog-navigation-item ' + (isActive ? 'active ': '') } onClick={ select }>
+            <div className={ 'd-flex align-items-center cursor-pointer catalog-navigation-item ' + (isActive ? 'active ': '') } onClick={ event => select(page) }>
                 <CatalogIconView icon={ page.icon } />
                 <div className="flex-grow-1 text-black text-truncate px-1">{ page.localization }</div>
                 { (page.children.length > 0) && <i className={ 'fas fa-caret-' + (isExpanded ? 'up' : 'down') } /> }