Open catalog page by name working

This commit is contained in:
Bill 2022-01-20 13:24:51 -05:00
parent 2fc709511c
commit c19810327d
8 changed files with 68 additions and 20 deletions

View File

@ -2,5 +2,7 @@ import { GetNitroInstance } from './GetNitroInstance';
export function CreateLinkEvent(link: string): void export function CreateLinkEvent(link: string): void
{ {
link = (link.startsWith('event:') ? link.substring(6) : link);
GetNitroInstance().createLinkEvent(link); GetNitroInstance().createLinkEvent(link);
} }

View File

@ -27,7 +27,7 @@ import { CatalogActions } from './reducers/CatalogReducer';
export const CatalogMessageHandler: FC<{}> = props => export const CatalogMessageHandler: FC<{}> = props =>
{ {
const { setIsBusy, pageId, currentType, setRootNode, setCurrentOffers, currentPage, setCurrentOffer, setPurchasableOffer, setFrontPageItems, resetState, showCatalogPage, catalogState, dispatchCatalogState } = useCatalogContext(); const { setIsBusy, pageId, currentType, setRootNode, setOffersToNodes, currentPage, setCurrentOffer, setPurchasableOffer, setFrontPageItems, resetState, showCatalogPage, catalogState, dispatchCatalogState } = useCatalogContext();
const onCatalogPagesListEvent = useCallback((event: CatalogPagesListEvent) => const onCatalogPagesListEvent = useCallback((event: CatalogPagesListEvent) =>
{ {
@ -54,9 +54,9 @@ export const CatalogMessageHandler: FC<{}> = props =>
BatchUpdates(() => BatchUpdates(() =>
{ {
setRootNode(getCatalogNode(parser.root, 0, null)); setRootNode(getCatalogNode(parser.root, 0, null));
setCurrentOffers(offers); setOffersToNodes(offers);
}); });
}, [ setRootNode, setCurrentOffers ]); }, [ setRootNode, setOffersToNodes ]);
const onCatalogPageMessageEvent = useCallback((event: CatalogPageMessageEvent) => const onCatalogPageMessageEvent = useCallback((event: CatalogPageMessageEvent) =>
{ {
@ -274,8 +274,6 @@ export const CatalogMessageHandler: FC<{}> = props =>
if(!parser) return; if(!parser) return;
console.log(parser);
dispatchCatalogState({ dispatchCatalogState({
type: CatalogActions.SET_MARKETPLACE_CONFIGURATION, type: CatalogActions.SET_MARKETPLACE_CONFIGURATION,
payload: { payload: {

View File

@ -42,7 +42,6 @@ export const CatalogView: FC<{}> = props =>
const [ currentPage, setCurrentPage ] = useState<ICatalogPage>(null); const [ currentPage, setCurrentPage ] = useState<ICatalogPage>(null);
const [ currentOffer, setCurrentOffer ] = useState<IPurchasableOffer>(null); const [ currentOffer, setCurrentOffer ] = useState<IPurchasableOffer>(null);
const [ purchasableOffer, setPurchasableOffer ] = useState<IPurchasableOffer>(null); const [ purchasableOffer, setPurchasableOffer ] = useState<IPurchasableOffer>(null);
const [ currentTab, setCurrentTab ] = useState<ICatalogNode>(null);
const [ activeNodes, setActiveNodes ] = useState<ICatalogNode[]>([]); const [ activeNodes, setActiveNodes ] = useState<ICatalogNode[]>([]);
const [ searchResult, setSearchResult ] = useState<SearchResult>(null); const [ searchResult, setSearchResult ] = useState<SearchResult>(null);
const [ frontPageItems, setFrontPageItems ] = useState<FrontPageItem[]>([]); const [ frontPageItems, setFrontPageItems ] = useState<FrontPageItem[]>([]);
@ -60,7 +59,6 @@ export const CatalogView: FC<{}> = props =>
setCurrentPage(null); setCurrentPage(null);
setCurrentOffer(null); setCurrentOffer(null);
setPurchasableOffer(null); setPurchasableOffer(null);
setCurrentTab(null);
setActiveNodes([]); setActiveNodes([]);
setSearchResult(null); setSearchResult(null);
setFrontPageItems([]); setFrontPageItems([]);
@ -68,6 +66,20 @@ export const CatalogView: FC<{}> = props =>
}); });
}, []); }, []);
const getFirstNodeByName = useCallback((name: string, node: ICatalogNode) =>
{
if((node.pageName === name) && (node !== rootNode)) return node;
for(const child of node.children)
{
const found = (getFirstNodeByName(name, child) as ICatalogNode);
if(found) return found;
}
return null;
}, [ rootNode ]);
const getNodesByOfferId = useCallback((offerId: number, flag: boolean = false) => const getNodesByOfferId = useCallback((offerId: number, flag: boolean = false) =>
{ {
if(!offersToNodes || !offersToNodes.size) return null; if(!offersToNodes || !offersToNodes.size) return null;
@ -194,6 +206,27 @@ export const CatalogView: FC<{}> = props =>
if(targetNode.pageId > -1) loadCatalogPage(targetNode.pageId, offerId); if(targetNode.pageId > -1) loadCatalogPage(targetNode.pageId, offerId);
}, [ setActiveNodes, loadCatalogPage ]); }, [ setActiveNodes, loadCatalogPage ]);
const openPageByName = useCallback((name: string) =>
{
BatchUpdates(() =>
{
setSearchResult(null);
if(!isVisible)
{
REQUESTED_PAGE.requestByName = name;
setIsVisible(true);
}
else
{
const node = getFirstNodeByName(name, rootNode);
if(node) activateNode(node);
}
});
}, [ isVisible, rootNode, getFirstNodeByName, activateNode ]);
const openPageByOfferId = useCallback((offerId: number) => const openPageByOfferId = useCallback((offerId: number) =>
{ {
BatchUpdates(() => BatchUpdates(() =>
@ -258,6 +291,12 @@ export const CatalogView: FC<{}> = props =>
return; return;
} }
} }
else
{
openPageByName(parts[2]);
return;
}
} }
else else
{ {
@ -266,7 +305,7 @@ export const CatalogView: FC<{}> = props =>
return; return;
} }
}, [ openPageByOfferId ]); }, [ openPageByOfferId, openPageByName ]);
useEffect(() => useEffect(() =>
{ {
@ -335,10 +374,11 @@ export const CatalogView: FC<{}> = props =>
REQUESTED_PAGE.resetRequest(); REQUESTED_PAGE.resetRequest();
return; return;
case RequestedPage.REQUEST_TYPE_NAME: case RequestedPage.REQUEST_TYPE_NAME:
openPageByName(REQUESTED_PAGE.requestByName);
REQUESTED_PAGE.resetRequest(); REQUESTED_PAGE.resetRequest();
return; return;
} }
}, [ isVisible, rootNode, activeNodes, activateNode, openPageByOfferId ]); }, [ isVisible, rootNode, activeNodes, activateNode, openPageByOfferId, openPageByName ]);
useEffect(() => useEffect(() =>
{ {
@ -348,7 +388,7 @@ export const CatalogView: FC<{}> = props =>
}, [ currentPage ]); }, [ currentPage ]);
return ( return (
<CatalogContextProvider value={ { isVisible, isBusy, setIsBusy, pageId, currentType, setCurrentType, rootNode, setRootNode, currentOffers: offersToNodes, setCurrentOffers: setOffersToNodes, currentPage, setCurrentPage, currentOffer, setCurrentOffer, purchasableOffer, setPurchasableOffer, activeNodes, setActiveNodes, searchResult, setSearchResult, frontPageItems, setFrontPageItems, roomPreviewer, resetState, loadCatalogPage, showCatalogPage, activateNode, catalogState, dispatchCatalogState } }> <CatalogContextProvider value={ { isVisible, isBusy, setIsBusy, pageId, currentType, setCurrentType, rootNode, setRootNode, offersToNodes, setOffersToNodes, currentPage, setCurrentPage, currentOffer, setCurrentOffer, purchasableOffer, setPurchasableOffer, activeNodes, setActiveNodes, searchResult, setSearchResult, frontPageItems, setFrontPageItems, roomPreviewer, resetState, loadCatalogPage, showCatalogPage, activateNode, catalogState, dispatchCatalogState } }>
<CatalogMessageHandler /> <CatalogMessageHandler />
{ isVisible && { isVisible &&
<NitroCardView uniqueKey="catalog" className="nitro-catalog"> <NitroCardView uniqueKey="catalog" className="nitro-catalog">

View File

@ -17,8 +17,8 @@ export interface ICatalogContext
setCurrentType: Dispatch<SetStateAction<string>>; setCurrentType: Dispatch<SetStateAction<string>>;
rootNode: ICatalogNode; rootNode: ICatalogNode;
setRootNode: Dispatch<SetStateAction<ICatalogNode>>; setRootNode: Dispatch<SetStateAction<ICatalogNode>>;
currentOffers: Map<number, ICatalogNode[]>; offersToNodes: Map<number, ICatalogNode[]>;
setCurrentOffers: Dispatch<SetStateAction<Map<number, ICatalogNode[]>>>; setOffersToNodes: Dispatch<SetStateAction<Map<number, ICatalogNode[]>>>;
currentPage: ICatalogPage; currentPage: ICatalogPage;
setCurrentPage: Dispatch<SetStateAction<ICatalogPage>>; setCurrentPage: Dispatch<SetStateAction<ICatalogPage>>;
currentOffer: IPurchasableOffer; currentOffer: IPurchasableOffer;
@ -50,8 +50,8 @@ const CatalogContext = createContext<ICatalogContext>({
setCurrentType: null, setCurrentType: null,
rootNode: null, rootNode: null,
setRootNode: null, setRootNode: null,
currentOffers: null, offersToNodes: null,
setCurrentOffers: null, setOffersToNodes: null,
currentPage: null, currentPage: null,
setCurrentPage: null, setCurrentPage: null,
currentOffer: null, currentOffer: null,

View File

@ -2,6 +2,7 @@ import { NitroToolbarAnimateIconEvent, TextureUtils, ToolbarIconEnum } from '@ni
import { FC, useCallback, useRef, useState } from 'react'; import { FC, useCallback, useRef, useState } from 'react';
import { GetRoomEngine } from '../../../../api'; import { GetRoomEngine } from '../../../../api';
import { CatalogEvent, CatalogSelectProductEvent } from '../../../../events'; import { CatalogEvent, CatalogSelectProductEvent } from '../../../../events';
import { CatalogWidgetEvent } from '../../../../events/catalog/CatalogWidgetEvent';
import { useUiEvent } from '../../../../hooks'; import { useUiEvent } from '../../../../hooks';
import { RoomPreviewerView } from '../../../../views/shared/room-previewer/RoomPreviewerView'; import { RoomPreviewerView } from '../../../../views/shared/room-previewer/RoomPreviewerView';
import { RoomPreviewerViewProps } from '../../../../views/shared/room-previewer/RoomPreviewerView.types'; import { RoomPreviewerViewProps } from '../../../../views/shared/room-previewer/RoomPreviewerView.types';
@ -18,7 +19,7 @@ export const CatalogRoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
setOffer(event.offer); setOffer(event.offer);
}, []); }, []);
useUiEvent(CatalogSelectProductEvent.SELECT_PRODUCT, onCatalogSelectProductEvent) useUiEvent(CatalogWidgetEvent.SELECT_PRODUCT, onCatalogSelectProductEvent)
const animatePurchase = useCallback(() => const animatePurchase = useCallback(() =>
{ {

View File

@ -48,3 +48,10 @@
width: $marketplace-post-offer-width; width: $marketplace-post-offer-width;
height: $marketplace-post-offer-height; height: $marketplace-post-offer-height;
} }
.nitro-catalog-layout-bundle-grid {
.layout-grid-item {
background-color: transparent;
}
}

View File

@ -19,7 +19,7 @@ import { useCatalogContext } from '../../context/CatalogContext';
export const CatalogSearchView: FC<{}> = props => export const CatalogSearchView: FC<{}> = props =>
{ {
const [ searchValue, setSearchValue ] = useState(''); const [ searchValue, setSearchValue ] = useState('');
const { currentType = null, rootNode = null, setActiveNodes = null, currentOffers = null, searchResult = null, setSearchResult = null, setCurrentPage = null } = useCatalogContext(); const { currentType = null, rootNode = null, setActiveNodes = null, offersToNodes = null, searchResult = null, setSearchResult = null, setCurrentPage = null } = useCatalogContext();
const processSearch = useCallback((search: string) => const processSearch = useCallback((search: string) =>
{ {
@ -54,8 +54,8 @@ export const CatalogSearchView: FC<{}> = props =>
else else
{ {
const foundNodes = [ const foundNodes = [
...GetOfferNodes(currentOffers, furniture.purchaseOfferId), ...GetOfferNodes(offersToNodes, furniture.purchaseOfferId),
...GetOfferNodes(currentOffers, furniture.rentOfferId) ...GetOfferNodes(offersToNodes, furniture.rentOfferId)
]; ];
if(foundNodes.length) if(foundNodes.length)
@ -81,7 +81,7 @@ export const CatalogSearchView: FC<{}> = props =>
setSearchResult(new SearchResult(search, offers, nodes.filter(node => (node.isVisible)))); setSearchResult(new SearchResult(search, offers, nodes.filter(node => (node.isVisible))));
setActiveNodes(prevValue => prevValue.slice(0, 1)); setActiveNodes(prevValue => prevValue.slice(0, 1));
}); });
}, [ currentOffers, currentType, rootNode, setCurrentPage, setSearchResult, setActiveNodes ]); }, [ offersToNodes, currentType, rootNode, setCurrentPage, setSearchResult, setActiveNodes ]);
useEffect(() => useEffect(() =>
{ {

View File

@ -182,7 +182,7 @@ export class NotificationUtilities
} }
else else
{ {
CreateLinkEvent(url.substring(6)); CreateLinkEvent(url);
} }
} }