diff --git a/src/views/catalog/CatalogView.tsx b/src/views/catalog/CatalogView.tsx index 8f6c6ff5..8d59384e 100644 --- a/src/views/catalog/CatalogView.tsx +++ b/src/views/catalog/CatalogView.tsx @@ -1,7 +1,6 @@ -import { CatalogModeComposer, CatalogRequestGiftConfigurationComposer, ICatalogPageData, RoomPreviewer } from 'nitro-renderer'; +import { CatalogModeComposer, CatalogPageComposer, CatalogRequestGiftConfigurationComposer, ICatalogPageData, ILinkEventTracker, RoomPreviewer } from 'nitro-renderer'; import { FC, useCallback, useEffect, useReducer, useState } from 'react'; -import { GetRoomEngine } from '../../api'; -import { GetCatalogPageComposer } from '../../api/catalog/GetCatalogPageComposer'; +import { AddEventLinkTracker, GetRoomEngine, RemoveLinkEventTracker } from '../../api'; import { CatalogEvent } from '../../events'; import { useUiEvent } from '../../hooks/events/ui/ui-event'; import { SendMessageHook } from '../../hooks/messages/message-event'; @@ -9,6 +8,7 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, Nitro import { LocalizeText } from '../../utils/LocalizeText'; import { CatalogMessageHandler } from './CatalogMessageHandler'; import { CatalogMode, CatalogViewProps } from './CatalogView.types'; +import { GetCatalogPageTree } from './common/CatalogUtilities'; import { CatalogContextProvider } from './context/CatalogContext'; import { CatalogActions, CatalogReducer, initialCatalog } from './reducers/CatalogReducer'; import { CatalogNavigationView } from './views/navigation/CatalogNavigationView'; @@ -42,6 +42,67 @@ export const CatalogView: FC = props => useUiEvent(CatalogEvent.TOGGLE_CATALOG, onCatalogEvent); useUiEvent(CatalogEvent.CATALOG_RESET, onCatalogEvent); + const setCurrentTab = useCallback((page: ICatalogPageData) => + { + dispatchCatalogState({ + type: CatalogActions.SET_CATALOG_CURRENT_TAB, + payload: { + currentTab: page + } + }); + }, [ dispatchCatalogState ]); + + const navigateThroughTree = useCallback((tree: ICatalogPageData[]) => + { + setCurrentTab(tree.shift()); + }, [ setCurrentTab ]); + + const navigateToPage = useCallback((pageId: number) => + { + const pageTree: ICatalogPageData[] = []; + + GetCatalogPageTree(root, pageId, pageTree); + + if(!pageTree.length) return; + + pageTree.reverse(); + + navigateThroughTree(pageTree); + }, [ root, navigateThroughTree ]); + + const linkReceived = useCallback((url: string) => + { + const parts = url.split('/'); + + if(parts.length < 2) return; + + switch(parts[1]) + { + case 'open': + if(parts.length > 2) + { + navigateToPage(parseInt(parts[2])); + } + else + { + setIsVisible(true); + } + return; + } + }, [ navigateToPage ]); + + useEffect(() => + { + const linkTracker: ILinkEventTracker = { + linkReceived, + eventUrlPrefix: 'catalog/' + }; + + AddEventLinkTracker(linkTracker); + + return () => RemoveLinkEventTracker(linkTracker); + }, [ linkReceived]); + useEffect(() => { if(!isVisible) return; @@ -51,13 +112,15 @@ export const CatalogView: FC = props => SendMessageHook(new CatalogModeComposer(CatalogMode.MODE_NORMAL)); SendMessageHook(new CatalogRequestGiftConfigurationComposer()); } + + console.log(catalogState.root) }, [ isVisible, catalogState.root ]); useEffect(() => { if(!currentTab) return; - SendMessageHook(GetCatalogPageComposer(currentTab.pageId, -1, CatalogMode.MODE_NORMAL)); + SendMessageHook(new CatalogPageComposer(currentTab.pageId, -1, CatalogMode.MODE_NORMAL)); }, [ currentTab ]); useEffect(() => @@ -75,16 +138,6 @@ export const CatalogView: FC = props => } }, []); - const setCurrentTab = useCallback((page: ICatalogPageData) => - { - dispatchCatalogState({ - type: CatalogActions.SET_CATALOG_CURRENT_TAB, - payload: { - currentTab: page - } - }); - }, [ dispatchCatalogState ]); - const currentNavigationPage = ((searchResult && searchResult.page) || currentTab); return ( diff --git a/src/views/catalog/common/CatalogUtilities.ts b/src/views/catalog/common/CatalogUtilities.ts index 26aac5d1..d8cd2a3f 100644 --- a/src/views/catalog/common/CatalogUtilities.ts +++ b/src/views/catalog/common/CatalogUtilities.ts @@ -149,3 +149,20 @@ export function GetPetAvailableColors(petIndex: number, palettes: SellablePetPal } } } + +export function GetCatalogPageTree(page: ICatalogPageData, targetPageId: number, tree: ICatalogPageData[]) +{ + if(page.pageId === targetPageId) return page; + + for(const pageData of page.children) + { + const foundPageData = GetCatalogPageTree(pageData, targetPageId, tree); + + if(foundPageData) + { + tree.push(pageData); + + return pageData; + } + } +} diff --git a/src/views/navigator/NavigatorView.tsx b/src/views/navigator/NavigatorView.tsx index 68560927..9318e48e 100644 --- a/src/views/navigator/NavigatorView.tsx +++ b/src/views/navigator/NavigatorView.tsx @@ -1,6 +1,7 @@ import { ILinkEventTracker, NavigatorInitComposer, NavigatorSearchComposer, RoomSessionEvent } from 'nitro-renderer'; import { FC, useCallback, useEffect, useReducer, useState } from 'react'; import { AddEventLinkTracker, RemoveLinkEventTracker } from '../../api'; +import { TryVisitRoom } from '../../api/navigator/TryVisitRoom'; import { NavigatorEvent } from '../../events'; import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event'; import { useUiEvent } from '../../hooks/events/ui/ui-event'; @@ -93,7 +94,7 @@ export const NavigatorView: FC = props => default: { const roomId = parseInt(parts[2]); - //if(roomId > 0) this.goToPrivateRoom(roomId); + TryVisitRoom(roomId); } } } @@ -105,7 +106,7 @@ export const NavigatorView: FC = props => { const linkTracker: ILinkEventTracker = { linkReceived, - eventUrlPrefix: 'navigator' + eventUrlPrefix: 'navigator/' }; AddEventLinkTracker(linkTracker);