Clickable front page links

src/views/catalog/CatalogView.tsx

@@ -18,7 +18,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
     const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
-    const [ pendingPageId, setPendingPageId ] = useState(-1);
+    const [ pendingPageLookup, setPendingPageLookup ] = useState<string>(null);
     const [ pendingTree, setPendingTree ] = useState<ICatalogPageData[]>(null);
     const [ catalogState, dispatchCatalogState ] = useReducer(CatalogReducer, initialCatalog);
     const [ currentTab, setCurrentTab ] = useState<ICatalogPageData>(null);
@@ -56,7 +56,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
             case 'open':
                 if(parts.length > 2)
                 {
-                    setPendingPageId(parseInt(parts[2]));
+                    setPendingPageLookup(parts[2]);
                 }
                 else
                 {
@@ -80,7 +80,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
 
     useEffect(() =>
     {
-        const loadCatalog = (((pendingPageId > -1) && !catalogState.root) || (isVisible && !catalogState.root));
+        const loadCatalog = (((pendingPageLookup !== null) && !catalogState.root) || (isVisible && !catalogState.root));
 
         if(loadCatalog)
         {
@@ -92,24 +92,23 @@ export const CatalogView: FC<CatalogViewProps> = props =>
 
         if(catalogState.root)
         {
-            if(!isVisible && (pendingPageId > -1))
+            if(!isVisible && (pendingPageLookup !== null))
             {
                 setIsVisible(true);
 
                 return;
             }
 
-            if(pendingPageId > -1)
+            if(pendingPageLookup !== null)
             {
-                const tree = BuildCatalogPageTree(catalogState.root, pendingPageId);
+                const tree = BuildCatalogPageTree(catalogState.root, pendingPageLookup);
 
                 setCurrentTab(tree.shift());
-                setPendingPageId(-1);
+                setPendingPageLookup(null);
                 setPendingTree(tree);
             }
             else
             {
-
                 setCurrentTab(prevValue =>
                     {
                         if(catalogState.root.children.length)
@@ -126,7 +125,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                     });
             }
         }
-    }, [ isVisible, pendingPageId, catalogState.root, setCurrentTab ]);
+    }, [ isVisible, pendingPageLookup, catalogState.root, setCurrentTab ]);
 
     useEffect(() =>
     {

src/views/catalog/common/CatalogUtilities.ts

@@ -150,13 +150,13 @@ export function GetPetAvailableColors(petIndex: number, palettes: SellablePetPal
     }
 }
 
-export function GetCatalogPageTree(page: ICatalogPageData, targetPageId: number, tree: ICatalogPageData[])
+export function GetCatalogPageTreeByName(page: ICatalogPageData, lookup: string, tree: ICatalogPageData[])
 {
-    if(page.pageId === targetPageId) return page;
+    if(page.pageName === lookup) return page;
 
     for(const pageData of page.children)
     {
-        const foundPageData = GetCatalogPageTree(pageData, targetPageId, tree);
+        const foundPageData = GetCatalogPageTreeByName(pageData, lookup, tree);
 
         if(foundPageData)
         {
@@ -167,11 +167,35 @@ export function GetCatalogPageTree(page: ICatalogPageData, targetPageId: number,
     }
 }
 
-export function BuildCatalogPageTree(page: ICatalogPageData, targetPageId: number)
+export function GetCatalogPageTreeById(page: ICatalogPageData, lookup: number, tree: ICatalogPageData[])
+{
+    if(page.pageId === lookup) return page;
+
+    for(const pageData of page.children)
+    {
+        const foundPageData = GetCatalogPageTreeById(pageData, lookup, tree);
+
+        if(foundPageData)
+        {
+            tree.push(pageData);
+
+            return pageData;
+        }
+    }
+}
+
+export function BuildCatalogPageTree(page: ICatalogPageData, lookup: string)
 {
     const pageTree: ICatalogPageData[] = [];
 
-    GetCatalogPageTree(page, targetPageId, pageTree);
+    if(isNaN((lookup as unknown) as number))
+    {
+        GetCatalogPageTreeByName(page, lookup, pageTree);
+    }
+    else
+    {
+        GetCatalogPageTreeById(page, parseInt(lookup), pageTree);
+    }
 
     if(pageTree.length) pageTree.reverse();
 

src/views/catalog/views/page/layout/frontpage4/CatalogLayoutFrontpage4View.tsx

@@ -1,56 +1,48 @@
+import { CatalogFrontPageItem } from 'nitro-renderer';
 import { FC, useCallback, useMemo } from 'react';
-import { GetConfiguration } from '../../../../../../api';
+import { CreateLinkEvent, GetConfiguration } from '../../../../../../api';
 import { CatalogLayoutFrontpage4ViewProps } from './CatalogLayoutFrontpage4View.types';
 
 export const CatalogLayoutFrontpage4View: FC<CatalogLayoutFrontpage4ViewProps> = props =>
 {
     const { pageParser = null } = props;
 
-    const getFrontPageItem = useCallback((position: number) =>
-    {
-        for(const item of pageParser.frontPageItems)
-        {
-            if(item.position !== position) continue;
-
-            return item;
-        }
-    }, [ pageParser ]);
-
-    const getFrontPageItemImage = useCallback((position: number) =>
-    {
-        const item = getFrontPageItem(position);
-
-        if(!item) return null;
-
-        return item.itemPromoImage;
-    }, [ getFrontPageItem ]);
-
     const imageLibraryUrl = useMemo(() =>
     {
         return GetConfiguration<string>('image.library.url');
     }, []);
 
+    const selectItem = useCallback((item: CatalogFrontPageItem) =>
+    {
+        switch(item.type)
+        {
+            case CatalogFrontPageItem.ITEM_CATALOGUE_PAGE:
+                CreateLinkEvent(`catalog/open/${ item.catalogPageLocation }`);
+                return;
+        }
+    }, []);
+
     if(!pageParser) return null;
 
     return (
         <div className="row h-100 nitro-catalog-layout-frontpage4">
             <div className="col-4">
                 { pageParser.frontPageItems[0] &&
-                    <div className="front-page-item h-100" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[0].itemPromoImage }')`}}>
+                    <div className="front-page-item h-100" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[0].itemPromoImage }')`}} onClick={ event => selectItem(pageParser.frontPageItems[0]) }>
                         <div className="front-page-item-caption">{ pageParser.frontPageItems[0].itemName }</div>
                     </div> }
             </div>
             <div className="d-flex col-8 flex-column">
                 { pageParser.frontPageItems[1] &&
-                    <div className="front-page-item h-100 mb-2" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[1].itemPromoImage }')`}}>
+                    <div className="front-page-item h-100 mb-2" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[1].itemPromoImage }')`}} onClick={ event => selectItem(pageParser.frontPageItems[1]) }>
                         <div className="front-page-item-caption">{ pageParser.frontPageItems[1].itemName }</div>
                     </div> }
                 { pageParser.frontPageItems[2] &&
-                    <div className="front-page-item h-100 mb-2" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[2].itemPromoImage }')`}}>
+                    <div className="front-page-item h-100 mb-2" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[2].itemPromoImage }')`}} onClick={ event => selectItem(pageParser.frontPageItems[2]) }>
                         <div className="front-page-item-caption">{ pageParser.frontPageItems[2].itemName }</div>
                     </div> }
                 { pageParser.frontPageItems[3] &&
-                    <div className="front-page-item h-100" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[3].itemPromoImage }')`}}>
+                    <div className="front-page-item h-100" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[3].itemPromoImage }')`}} onClick={ event => selectItem(pageParser.frontPageItems[3]) }>
                         <div className="front-page-item-caption">{ pageParser.frontPageItems[3].itemName }</div>
                     </div> }
             </div>