mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-26 23:50:52 +01:00
More changes
This commit is contained in:
parent
a91bff333a
commit
945894db9d
@ -26,6 +26,7 @@ import { MarketplacePostOfferView } from './views/page/layout/marketplace/Market
|
|||||||
import { CatalogTabsViews } from './views/tabs/CatalogTabsView';
|
import { CatalogTabsViews } from './views/tabs/CatalogTabsView';
|
||||||
|
|
||||||
const DUMMY_PAGE_ID_FOR_OFFER_SEARCH: number = -12345678;
|
const DUMMY_PAGE_ID_FOR_OFFER_SEARCH: number = -12345678;
|
||||||
|
const REQUESTED_PAGE = new RequestedPage();
|
||||||
|
|
||||||
export const CatalogView: FC<{}> = props =>
|
export const CatalogView: FC<{}> = props =>
|
||||||
{
|
{
|
||||||
@ -43,11 +44,7 @@ export const CatalogView: FC<{}> = props =>
|
|||||||
const [ purchasableOffer, setPurchasableOffer ] = useState<IPurchasableOffer>(null);
|
const [ purchasableOffer, setPurchasableOffer ] = useState<IPurchasableOffer>(null);
|
||||||
const [ currentTab, setCurrentTab ] = useState<ICatalogNode>(null);
|
const [ currentTab, setCurrentTab ] = useState<ICatalogNode>(null);
|
||||||
const [ activeNodes, setActiveNodes ] = useState<ICatalogNode[]>([]);
|
const [ activeNodes, setActiveNodes ] = useState<ICatalogNode[]>([]);
|
||||||
const [ lastActiveNodes, setLastActiveNodes ] = useState<ICatalogNode[]>(null);
|
|
||||||
const [ frontPageItems, setFrontPageItems ] = useState<FrontPageItem[]>([]);
|
const [ frontPageItems, setFrontPageItems ] = useState<FrontPageItem[]>([]);
|
||||||
|
|
||||||
|
|
||||||
const [ requestedPage, setRequestedPage ] = useState(new RequestedPage());
|
|
||||||
const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
|
const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
|
||||||
const [ catalogState, dispatchCatalogState ] = useReducer(CatalogReducer, initialCatalog);
|
const [ catalogState, dispatchCatalogState ] = useReducer(CatalogReducer, initialCatalog);
|
||||||
|
|
||||||
@ -64,18 +61,35 @@ export const CatalogView: FC<{}> = props =>
|
|||||||
setPurchasableOffer(null);
|
setPurchasableOffer(null);
|
||||||
setCurrentTab(null);
|
setCurrentTab(null);
|
||||||
setActiveNodes([]);
|
setActiveNodes([]);
|
||||||
setLastActiveNodes(null);
|
|
||||||
setFrontPageItems([]);
|
setFrontPageItems([]);
|
||||||
setIsInitialized(false);
|
setIsInitialized(false);
|
||||||
setIsVisible(true);
|
setIsVisible(true);
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const getNodesByOfferId = useCallback((offerId: number) =>
|
const getNodeById = useCallback((id: number, node: ICatalogNode = null) =>
|
||||||
|
{
|
||||||
|
if(!node) node = rootNode;
|
||||||
|
|
||||||
|
if(!node) return null;
|
||||||
|
|
||||||
|
if((node.pageId === id) && (node !== rootNode)) return node;
|
||||||
|
|
||||||
|
for(const child of node.children)
|
||||||
|
{
|
||||||
|
const n = (getNodeById(id, child) as ICatalogNode);
|
||||||
|
|
||||||
|
if(n) return n;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}, [ rootNode ]);
|
||||||
|
|
||||||
|
const getNodesByOfferId = useCallback((offerId: number, flag: boolean = false) =>
|
||||||
{
|
{
|
||||||
if(!currentOffers || !currentOffers.size) return null;
|
if(!currentOffers || !currentOffers.size) return null;
|
||||||
|
|
||||||
if(true)
|
if(flag)
|
||||||
{
|
{
|
||||||
const nodes: ICatalogNode[] = [];
|
const nodes: ICatalogNode[] = [];
|
||||||
const offers = currentOffers.get(offerId);
|
const offers = currentOffers.get(offerId);
|
||||||
@ -91,7 +105,7 @@ export const CatalogView: FC<{}> = props =>
|
|||||||
return currentOffers.get(offerId);
|
return currentOffers.get(offerId);
|
||||||
}, [ currentOffers ]);
|
}, [ currentOffers ]);
|
||||||
|
|
||||||
const loadCatalogPage = useCallback((pageId: number, offerId: number, forceRefresh: boolean = false) =>
|
const loadCatalogPage = useCallback((pageId: number, offerId: number) =>
|
||||||
{
|
{
|
||||||
if(pageId < 0) return;
|
if(pageId < 0) return;
|
||||||
|
|
||||||
@ -99,8 +113,6 @@ export const CatalogView: FC<{}> = props =>
|
|||||||
{
|
{
|
||||||
setIsBusy(true);
|
setIsBusy(true);
|
||||||
setPageId(pageId);
|
setPageId(pageId);
|
||||||
|
|
||||||
if(forceRefresh) setForceRefresh(true);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
SendMessageHook(new GetCatalogPageComposer(pageId, offerId, currentType));
|
SendMessageHook(new GetCatalogPageComposer(pageId, offerId, currentType));
|
||||||
@ -135,7 +147,7 @@ export const CatalogView: FC<{}> = props =>
|
|||||||
});
|
});
|
||||||
}, [ currentPage, forceRefresh, selectOffer ]);
|
}, [ currentPage, forceRefresh, selectOffer ]);
|
||||||
|
|
||||||
const selectCatalogNode = useCallback((targetNode: ICatalogNode) =>
|
const activateNode = useCallback((targetNode: ICatalogNode) =>
|
||||||
{
|
{
|
||||||
setActiveNodes(prevValue =>
|
setActiveNodes(prevValue =>
|
||||||
{
|
{
|
||||||
@ -167,7 +179,7 @@ export const CatalogView: FC<{}> = props =>
|
|||||||
return newNodes;
|
return newNodes;
|
||||||
});
|
});
|
||||||
|
|
||||||
if(targetNode.pageId > -1) loadCatalogPage(targetNode.pageId, -1, true);
|
if(targetNode.pageId > -1) loadCatalogPage(targetNode.pageId, -1);
|
||||||
}, [ setActiveNodes, loadCatalogPage ]);
|
}, [ setActiveNodes, loadCatalogPage ]);
|
||||||
|
|
||||||
const onCatalogEvent = useCallback((event: CatalogEvent) =>
|
const onCatalogEvent = useCallback((event: CatalogEvent) =>
|
||||||
@ -215,13 +227,10 @@ export const CatalogView: FC<{}> = props =>
|
|||||||
switch(parts[2])
|
switch(parts[2])
|
||||||
{
|
{
|
||||||
case 'offerId':
|
case 'offerId':
|
||||||
//setPendingPageLookup({ value: parts[3], isOffer: true });
|
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//setPendingPageLookup({ value: parts[2], isOffer: false });
|
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
@ -270,42 +279,37 @@ export const CatalogView: FC<{}> = props =>
|
|||||||
{
|
{
|
||||||
if(!rootNode) return;
|
if(!rootNode) return;
|
||||||
|
|
||||||
BatchUpdates(() =>
|
setIsInitialized(true);
|
||||||
{
|
|
||||||
setIsInitialized(true);
|
|
||||||
|
|
||||||
if(rootNode.isBranch)
|
switch(REQUESTED_PAGE.requestType)
|
||||||
{
|
{
|
||||||
for(const child of rootNode.children)
|
case RequestedPage.REQUEST_TYPE_NONE:
|
||||||
|
BatchUpdates(() =>
|
||||||
{
|
{
|
||||||
if(child && child.isVisible)
|
setIsInitialized(true);
|
||||||
|
|
||||||
|
if(rootNode.isBranch)
|
||||||
{
|
{
|
||||||
setCurrentTab(child);
|
for(const child of rootNode.children)
|
||||||
|
{
|
||||||
|
if(child && child.isVisible)
|
||||||
|
{
|
||||||
|
setCurrentTab(child);
|
||||||
|
|
||||||
return;
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
}
|
return;
|
||||||
});
|
|
||||||
}, [ rootNode ]);
|
|
||||||
|
|
||||||
useEffect(() =>
|
|
||||||
{
|
|
||||||
if(!rootNode) return;
|
|
||||||
|
|
||||||
switch(requestedPage.requestType)
|
|
||||||
{
|
|
||||||
// case RequestedPage.REQUEST_TYPE_NONE:
|
|
||||||
// loadFrontPage();
|
|
||||||
// return;
|
|
||||||
case RequestedPage.REQUEST_TYPE_ID:
|
case RequestedPage.REQUEST_TYPE_ID:
|
||||||
requestedPage.resetRequest();
|
REQUESTED_PAGE.resetRequest();
|
||||||
return;
|
return;
|
||||||
case RequestedPage.REQUEST_TYPE_NAME:
|
case RequestedPage.REQUEST_TYPE_NAME:
|
||||||
requestedPage.resetRequest();
|
REQUESTED_PAGE.resetRequest();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}, [ rootNode, requestedPage ]);
|
}, [ rootNode ]);
|
||||||
|
|
||||||
useEffect(() =>
|
useEffect(() =>
|
||||||
{
|
{
|
||||||
@ -317,16 +321,16 @@ export const CatalogView: FC<{}> = props =>
|
|||||||
{
|
{
|
||||||
if(!child.isVisible) continue;
|
if(!child.isVisible) continue;
|
||||||
|
|
||||||
selectCatalogNode(child);
|
activateNode(child);
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
loadCatalogPage(currentTab.pageId, -1, true);
|
loadCatalogPage(currentTab.pageId, -1);
|
||||||
}
|
}
|
||||||
}, [ currentTab, selectCatalogNode, loadCatalogPage ]);
|
}, [ currentTab, activateNode, loadCatalogPage ]);
|
||||||
|
|
||||||
useEffect(() =>
|
useEffect(() =>
|
||||||
{
|
{
|
||||||
@ -335,23 +339,6 @@ export const CatalogView: FC<{}> = props =>
|
|||||||
setCurrentOffer(null);
|
setCurrentOffer(null);
|
||||||
}, [ currentPage ]);
|
}, [ currentPage ]);
|
||||||
|
|
||||||
useEffect(() =>
|
|
||||||
{
|
|
||||||
if(!isVisible && !lastActiveNodes && activeNodes && activeNodes.length)
|
|
||||||
{
|
|
||||||
setLastActiveNodes(activeNodes.concat());
|
|
||||||
}
|
|
||||||
|
|
||||||
else if(isVisible && lastActiveNodes)
|
|
||||||
{
|
|
||||||
BatchUpdates(() =>
|
|
||||||
{
|
|
||||||
setActiveNodes(lastActiveNodes.concat());
|
|
||||||
setLastActiveNodes(null);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [ isVisible, lastActiveNodes, activeNodes ]);
|
|
||||||
|
|
||||||
UseMountEffect(() =>
|
UseMountEffect(() =>
|
||||||
{
|
{
|
||||||
SendMessageHook(new GetMarketplaceConfigurationMessageComposer());
|
SendMessageHook(new GetMarketplaceConfigurationMessageComposer());
|
||||||
@ -360,7 +347,7 @@ export const CatalogView: FC<{}> = props =>
|
|||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CatalogContextProvider value={ { isVisible, isBusy, setIsBusy, pageId, currentType, setCurrentType, rootNode, setRootNode, currentOffers, setCurrentOffers, currentPage, setCurrentPage, currentOffer, setCurrentOffer, purchasableOffer, setPurchasableOffer, activeNodes, setActiveNodes, frontPageItems, setFrontPageItems, resetState, loadCatalogPage, showCatalogPage, selectCatalogNode, catalogState, dispatchCatalogState } }>
|
<CatalogContextProvider value={ { isVisible, isBusy, setIsBusy, pageId, currentType, setCurrentType, rootNode, setRootNode, currentOffers, setCurrentOffers, currentPage, setCurrentPage, currentOffer, setCurrentOffer, purchasableOffer, setPurchasableOffer, activeNodes, setActiveNodes, frontPageItems, setFrontPageItems, resetState, loadCatalogPage, showCatalogPage, activateNode, catalogState, dispatchCatalogState } }>
|
||||||
<CatalogMessageHandler />
|
<CatalogMessageHandler />
|
||||||
{ isVisible &&
|
{ isVisible &&
|
||||||
<NitroCardView uniqueKey="catalog" className="nitro-catalog">
|
<NitroCardView uniqueKey="catalog" className="nitro-catalog">
|
||||||
|
@ -5,27 +5,15 @@ export class RequestedPage
|
|||||||
public static REQUEST_TYPE_NAME: number = 2;
|
public static REQUEST_TYPE_NAME: number = 2;
|
||||||
|
|
||||||
private _requestType: number;
|
private _requestType: number;
|
||||||
private _requestId: number;
|
private _requestById: number;
|
||||||
private _requestedOfferId: number;
|
private _requestedOfferId: number;
|
||||||
private _requestName: string;
|
private _requestByName: string;
|
||||||
|
|
||||||
constructor()
|
constructor()
|
||||||
{
|
{
|
||||||
this._requestType = RequestedPage.REQUEST_TYPE_NONE;
|
this._requestType = RequestedPage.REQUEST_TYPE_NONE;
|
||||||
}
|
}
|
||||||
|
|
||||||
public setRequestById(id: number):void
|
|
||||||
{
|
|
||||||
this._requestType = RequestedPage.REQUEST_TYPE_ID;
|
|
||||||
this._requestId = id;
|
|
||||||
}
|
|
||||||
|
|
||||||
public setRequestByName(name: string):void
|
|
||||||
{
|
|
||||||
this._requestType = RequestedPage.REQUEST_TYPE_NAME;
|
|
||||||
this._requestName = name;
|
|
||||||
}
|
|
||||||
|
|
||||||
public resetRequest():void
|
public resetRequest():void
|
||||||
{
|
{
|
||||||
this._requestType = RequestedPage.REQUEST_TYPE_NONE;
|
this._requestType = RequestedPage.REQUEST_TYPE_NONE;
|
||||||
@ -37,9 +25,26 @@ export class RequestedPage
|
|||||||
return this._requestType;
|
return this._requestType;
|
||||||
}
|
}
|
||||||
|
|
||||||
public get requestId(): number
|
public get requestById(): number
|
||||||
{
|
{
|
||||||
return this._requestId;
|
return this._requestById;
|
||||||
|
}
|
||||||
|
|
||||||
|
public set requestById(id: number)
|
||||||
|
{
|
||||||
|
this._requestType = RequestedPage.REQUEST_TYPE_ID;
|
||||||
|
this._requestById = id;
|
||||||
|
}
|
||||||
|
|
||||||
|
public get requestByName(): string
|
||||||
|
{
|
||||||
|
return this._requestByName;
|
||||||
|
}
|
||||||
|
|
||||||
|
public set requestByName(name: string)
|
||||||
|
{
|
||||||
|
this._requestType = RequestedPage.REQUEST_TYPE_NAME;
|
||||||
|
this._requestByName = name;
|
||||||
}
|
}
|
||||||
|
|
||||||
public get requestedOfferId(): number
|
public get requestedOfferId(): number
|
||||||
@ -51,9 +56,4 @@ export class RequestedPage
|
|||||||
{
|
{
|
||||||
this._requestedOfferId = offerId;
|
this._requestedOfferId = offerId;
|
||||||
}
|
}
|
||||||
|
|
||||||
public get requestName(): string
|
|
||||||
{
|
|
||||||
return this._requestName;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -29,9 +29,9 @@ export interface ICatalogContext
|
|||||||
frontPageItems: FrontPageItem[];
|
frontPageItems: FrontPageItem[];
|
||||||
setFrontPageItems: Dispatch<SetStateAction<FrontPageItem[]>>;
|
setFrontPageItems: Dispatch<SetStateAction<FrontPageItem[]>>;
|
||||||
resetState: () => void;
|
resetState: () => void;
|
||||||
loadCatalogPage: (pageId: number, offerId: number, forceRefresh?: boolean) => void;
|
loadCatalogPage: (pageId: number, offerId: number) => void;
|
||||||
showCatalogPage: (pageId: number, layoutCode: string, localization: IPageLocalization, offers: IPurchasableOffer[], offerId: number, acceptSeasonCurrencyAsCredits: boolean) => void;
|
showCatalogPage: (pageId: number, layoutCode: string, localization: IPageLocalization, offers: IPurchasableOffer[], offerId: number, acceptSeasonCurrencyAsCredits: boolean) => void;
|
||||||
selectCatalogNode: (targetNode: ICatalogNode) => void;
|
activateNode: (targetNode: ICatalogNode) => void;
|
||||||
|
|
||||||
catalogState: ICatalogState;
|
catalogState: ICatalogState;
|
||||||
dispatchCatalogState: Dispatch<ICatalogAction>;
|
dispatchCatalogState: Dispatch<ICatalogAction>;
|
||||||
@ -61,7 +61,7 @@ const CatalogContext = createContext<ICatalogContext>({
|
|||||||
resetState: null,
|
resetState: null,
|
||||||
loadCatalogPage: null,
|
loadCatalogPage: null,
|
||||||
showCatalogPage: null,
|
showCatalogPage: null,
|
||||||
selectCatalogNode: null,
|
activateNode: null,
|
||||||
catalogState: null,
|
catalogState: null,
|
||||||
dispatchCatalogState: null
|
dispatchCatalogState: null
|
||||||
});
|
});
|
||||||
|
@ -15,11 +15,11 @@ export interface CatalogNavigationItemViewProps
|
|||||||
export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = props =>
|
export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = props =>
|
||||||
{
|
{
|
||||||
const { node = null } = props;
|
const { node = null } = props;
|
||||||
const { selectCatalogNode = null } = useCatalogContext();
|
const { activateNode = null } = useCatalogContext();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<LayoutGridItem column={ false } itemActive={ node.isActive } onClick={ event => selectCatalogNode(node) }>
|
<LayoutGridItem column={ false } itemActive={ node.isActive } onClick={ event => activateNode(node) }>
|
||||||
<CatalogIconView icon={ node.iconId } />
|
<CatalogIconView icon={ node.iconId } />
|
||||||
<Text grow truncate>{ node.localization }</Text>
|
<Text grow truncate>{ node.localization }</Text>
|
||||||
{ node.isBranch &&
|
{ node.isBranch &&
|
||||||
|
Loading…
Reference in New Issue
Block a user