Busted catalog page selector

src/views/catalog/CatalogView.tsx

@@ -76,12 +76,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
             case 'open':
                 if(parts.length > 2)
                 {
-                    dispatchCatalogState({
+                    setPendingPageId(parseInt(parts[2]));
-                        type: CatalogActions.SET_PENDING_PAGE_ID,
-                        payload: {
-                            pendingPageId: parseInt(parts[2])
-                        }
-                    });
                 }
                 else
                 {
@@ -89,7 +84,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                 }
                 return;
         }
-    }, [ dispatchCatalogState ]);
+    }, []);
 
     useEffect(() =>
     {
@@ -128,6 +123,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
 
                 setCurrentTab(tree.shift());
                 setPendingTree(tree);
+                setPendingPageId(-1);
             }
         }
     }, [ isVisible, pendingPageId, catalogState.root, buildCatalogPageTree, setCurrentTab ]);
@@ -176,7 +172,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                         <div className="row h-100">
                             { (!pageParser || (pageParser && !pageParser.frontPageItems.length)) &&
                                 <div className="col-3 d-flex flex-column h-100">
-                                    <CatalogNavigationView page={ currentNavigationPage } />
+                                    <CatalogNavigationView page={ currentNavigationPage } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
                                 </div> }
                             <div className="col h-100">
                                 <CatalogPageView roomPreviewer={ roomPreviewer } />

src/views/catalog/views/navigation/CatalogNavigationView.tsx

@@ -1,28 +1,18 @@
-import { ICatalogPageData } from 'nitro-renderer';
+import { FC } from 'react';
-import { FC, useEffect } from 'react';
 import { CatalogSearchView } from '../search/CatalogSearchView';
 import { CatalogNavigationViewProps } from './CatalogNavigationView.types';
 import { CatalogNavigationSetView } from './set/CatalogNavigationSetView';
 
-export let ACTIVE_PAGES: ICatalogPageData[] = [];
-
 export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
 {
-    const { page = null } = props;
+    const { page = null, pendingTree = null, setPendingTree = null } = props;
-
-    useEffect(() =>
-    {
-        if(!page) return;
-
-        ACTIVE_PAGES = [ page ];
-    }, [ page ]);
     
     return (
         <>
             <CatalogSearchView />
             <div className="border border-2 rounded overflow-hidden nitro-catalog-navigation p-1 h-100">
                 <div className="navigation-container h-100">
-                    <CatalogNavigationSetView page={ page } isFirstSet={ true } />
+                    <CatalogNavigationSetView page={ page } isFirstSet={ true } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
                 </div>
             </div>
         </>

src/views/catalog/views/navigation/CatalogNavigationView.types.ts

@@ -1,6 +1,9 @@
 import { ICatalogPageData } from 'nitro-renderer';
+import { Dispatch, SetStateAction } from 'react';
 
 export interface CatalogNavigationViewProps
 {
     page: ICatalogPageData;
+    pendingTree: ICatalogPageData[];
+    setPendingTree: Dispatch<SetStateAction<ICatalogPageData[]>>;
 }

src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx

@@ -9,9 +9,8 @@ import { CatalogNavigationItemViewProps } from './CatalogNavigationItemView.type
 
 export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = props =>
 {
-    const { page = null, isActive = false, setActiveChild = null } = props;
+    const { page = null, isActive = false, pendingTree = null, setPendingTree = null, setActiveChild = null } = props;
     const [ isExpanded, setIsExpanded ] = useState(false);
-    const [ myTree, setMyTree ] = useState<ICatalogPageData[]>(null);
     const { dispatchCatalogState = null } = useCatalogContext();
 
     const select = useCallback((selectPage: ICatalogPageData) =>
@@ -46,7 +45,18 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
         SendMessageHook(new CatalogPageComposer(page.pageId, -1, CatalogMode.MODE_NORMAL));
     }, [ isActive, page, select, dispatchCatalogState ]);
 
-    if(!page.visible) return null;
+    useEffect(() =>
+    {
+        if(!page || !pendingTree || !pendingTree.length) return;
+
+        const index = pendingTree.indexOf(page);
+
+        if(index === -1) return;
+
+        //if(!pendingTree.length) setPendingTree(null);
+
+        select(page);
+    }, [ pendingTree, page, select, setPendingTree ]);
     
     return (
         <div className="col pb-1 catalog-navigation-item-container">
@@ -57,7 +67,7 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
             </div>
             { isActive && isExpanded && page.children && (page.children.length > 0) &&
                 <div className="d-flex flex-column mt-1">
-                    <CatalogNavigationSetView page={ page } />
+                    <CatalogNavigationSetView page={ page } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
                 </div> }
         </div>
     );

src/views/catalog/views/navigation/item/CatalogNavigationItemView.types.ts

@@ -5,5 +5,7 @@ export interface CatalogNavigationItemViewProps
 {
     page: ICatalogPageData;
     isActive: boolean;
+    pendingTree: ICatalogPageData[];
+    setPendingTree: Dispatch<SetStateAction<ICatalogPageData[]>>;
     setActiveChild: Dispatch<SetStateAction<ICatalogPageData>>;
 }

src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx

@@ -1,17 +1,16 @@
 import { ICatalogPageData } from 'nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { ACTIVE_PAGES } from '../CatalogNavigationView';
 import { CatalogNavigationItemView } from '../item/CatalogNavigationItemView';
 import { CatalogNavigationSetViewProps } from './CatalogNavigationSetView.types';
 
 export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props =>
 {
-    const { page = null, isFirstSet = false } = props;
+    const { page = null, isFirstSet = false, pendingTree = null, setPendingTree = null } = props;
     const [ activeChild, setActiveChild ] = useState<ICatalogPageData>(null);
 
     useEffect(() =>
     {
-        if(!isFirstSet || !page || (page.pageId === -1)) return;
+        if(!isFirstSet || !page || (page.pageId === -1) || pendingTree) return;
 
         if(page && page.children.length)
         {
@@ -19,19 +18,7 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
 
             setActiveChild(child);
         }
-    }, [ page, isFirstSet ]);
+    }, [ page, isFirstSet, pendingTree ]);
-
-    useEffect(() =>
-    {
-        if(!activeChild) return;
-
-        const index = (ACTIVE_PAGES.push(activeChild) - 1);
-
-        return () =>
-        {
-            ACTIVE_PAGES.splice(index, (ACTIVE_PAGES.length - index));
-        }
-    }, [ activeChild ]);
     
     return (
         <div className="row row-cols-1 g-0 catalog-navigation-set-container w-100">
@@ -39,7 +26,7 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
                 {
                     if(!page.visible) return null;
                     
-                    return <CatalogNavigationItemView key={ index } page={ page } isActive={ (activeChild === page) } setActiveChild={ setActiveChild } />
+                    return <CatalogNavigationItemView key={ index } page={ page } isActive={ (activeChild === page) } pendingTree={ pendingTree } setPendingTree={ setPendingTree } setActiveChild={ setActiveChild } />
                 }) }
         </div>
     );

src/views/catalog/views/navigation/set/CatalogNavigationSetView.types.ts

@@ -1,7 +1,10 @@
 import { ICatalogPageData } from 'nitro-renderer';
+import { Dispatch, SetStateAction } from 'react';
 
 export interface CatalogNavigationSetViewProps
 {
     page: ICatalogPageData;
     isFirstSet?: boolean;
+    pendingTree: ICatalogPageData[];
+    setPendingTree: Dispatch<SetStateAction<ICatalogPageData[]>>;
 }