nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 06:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Catalog updates

Browse Source
This commit is contained in:
Bill 2021-07-23 13:23:31 -04:00
parent ee2b7b7c8b
commit faff2451c4
3 changed files with 68 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/catalog/CatalogView.tsx
View File

@ -18,8 +18,10 @@ export const CatalogView: FC<CatalogViewProps> = props =>
{
const [ isVisible, setIsVisible ] = useState(false);
const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
const [ pendingPageId, setPendingPageId ] = useState(-1);
const [ pendingTree, setPendingTree ] = useState<ICatalogPageData[]>(null);
const [ catalogState, dispatchCatalogState ] = useReducer(CatalogReducer, initialCatalog);
const { root = null, currentTab = null, pageParser = null, activeOffer = null, searchResult = null } = catalogState;
const { root = null, currentTab = null, pageParser = null, activeOffer = null, searchResult = null} = catalogState;
const onCatalogEvent = useCallback((event: CatalogEvent) =>
{
@ -52,23 +54,16 @@ export const CatalogView: FC<CatalogViewProps> = props =>
});
}, [ dispatchCatalogState ]);
const navigateThroughTree = useCallback((tree: ICatalogPageData[]) =>
{
setCurrentTab(tree.shift());
}, [ setCurrentTab ]);
const navigateToPage = useCallback((pageId: number) =>
const buildCatalogPageTree = useCallback((page: ICatalogPageData, targetPageId: number) =>
{
const pageTree: ICatalogPageData[] = [];
GetCatalogPageTree(root, pageId, pageTree);
GetCatalogPageTree(page, targetPageId, pageTree);
if(!pageTree.length) return;
if(pageTree.length) pageTree.reverse();
pageTree.reverse();
navigateThroughTree(pageTree);
}, [ root, navigateThroughTree ]);
return pageTree;
}, []);
const linkReceived = useCallback((url: string) =>
{
@ -81,7 +76,12 @@ export const CatalogView: FC<CatalogViewProps> = props =>
case 'open':
if(parts.length > 2)
{
navigateToPage(parseInt(parts[2]));
dispatchCatalogState({
type: CatalogActions.SET_PENDING_PAGE_ID,
payload: {
pendingPageId: parseInt(parts[2])
}
});
}
else
{
@ -89,7 +89,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
}
return;
}
}, [ navigateToPage ]);
}, [ dispatchCatalogState ]);
useEffect(() =>
{
@ -105,16 +105,32 @@ export const CatalogView: FC<CatalogViewProps> = props =>
useEffect(() =>
{
if(!isVisible) return;
if(!catalogState.root)
const loadCatalog = (((pendingPageId > -1) && !catalogState.root) || (isVisible && !catalogState.root));
if(loadCatalog)
{
SendMessageHook(new CatalogModeComposer(CatalogMode.MODE_NORMAL));
SendMessageHook(new CatalogRequestGiftConfigurationComposer());
}
console.log(catalogState.root)
}, [ isVisible, catalogState.root ]);
if(catalogState.root)
{
if(!isVisible && (pendingPageId > -1))
{
setIsVisible(true);
return;
}
if(pendingPageId > -1)
{
const tree = buildCatalogPageTree(catalogState.root, pendingPageId);
setCurrentTab(tree.shift());
setPendingTree(tree);
}
}
}, [ isVisible, pendingPageId, catalogState.root, buildCatalogPageTree, setCurrentTab ]);
useEffect(() =>
{
@ -158,7 +174,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
</NitroCardTabsView>
<NitroCardContentView>
<div className="row h-100">
{ pageParser && !pageParser.frontPageItems.length &&
{ (!pageParser || (pageParser && !pageParser.frontPageItems.length)) &&
<div className="col-3 d-flex flex-column h-100">
<CatalogNavigationView page={ currentNavigationPage } />
</div> }

11
src/views/catalog/reducers/CatalogReducer.tsx
View File

@ -19,6 +19,7 @@ export interface ICatalogState
clubOffers: CatalogClubOfferData[];
subscriptionInfo: SubscriptionInfo;
giftConfiguration: GiftWrappingConfiguration;
pendingPageId: number;
}
export interface ICatalogAction
@ -37,6 +38,7 @@ export interface ICatalogAction
clubOffers?: CatalogClubOfferData[];
subscriptionInfo?: SubscriptionInfo;
giftConfiguration?: CatalogGiftConfigurationParser;
pendingPageId?: number;
}
}
@ -54,6 +56,7 @@ export class CatalogActions
public static SET_SEARCH_RESULT: string = 'CA_SET_SEARCH_RESULT';
public static SET_SUBSCRIPTION_INFO: string = 'CA_SET_SUBSCRIPTION_INFO';
public static SET_GIFT_CONFIGURATION: string = 'CA_SET_GIFT_CONFIGURATION';
public static SET_PENDING_PAGE_ID: string = 'CA_SET_PENDING_PAGE_ID';
}
export const initialCatalog: ICatalogState = {
@ -68,7 +71,8 @@ export const initialCatalog: ICatalogState = {
petPalettes: [],
clubOffers: null,
subscriptionInfo: new SubscriptionInfo(),
giftConfiguration: null
giftConfiguration: null,
pendingPageId: -1
}
export const CatalogReducer: Reducer<ICatalogState, ICatalogAction> = (state, action) =>
@ -168,6 +172,11 @@ export const CatalogReducer: Reducer<ICatalogState, ICatalogAction> = (state, ac
return { ...state, giftConfiguration };
}
case CatalogActions.SET_PENDING_PAGE_ID: {
const pendingPageId = (action.payload.pendingPageId || -1);
return { ...state, pendingPageId };
}
default:
return state;
}

39
src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx
View File

@ -1,7 +1,8 @@
import { CatalogPageComposer } from 'nitro-renderer';
import { CatalogPageComposer, ICatalogPageData } from 'nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { SendMessageHook } from '../../../../../hooks/messages/message-event';
import { CatalogMode } from '../../../CatalogView.types';
import { useCatalogContext } from '../../../context/CatalogContext';
import { CatalogIconView } from '../../catalog-icon/CatalogIconView';
import { CatalogNavigationSetView } from '../set/CatalogNavigationSetView';
import { CatalogNavigationItemViewProps } from './CatalogNavigationItemView.types';
@ -10,42 +11,44 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
{
const { page = null, isActive = false, setActiveChild = null } = props;
const [ isExpanded, setIsExpanded ] = useState(false);
const [ myTree, setMyTree ] = useState<ICatalogPageData[]>(null);
const { dispatchCatalogState = null } = useCatalogContext();
useEffect(() =>
const select = useCallback((selectPage: ICatalogPageData) =>
{
if(!isActive || !page) return;
setIsExpanded(true);
SendMessageHook(new CatalogPageComposer(page.pageId, -1, CatalogMode.MODE_NORMAL));
}, [ isActive, page ]);
const select = useCallback(() =>
{
if(!page) return;
if(!selectPage) return;
setActiveChild(prevValue =>
{
if(prevValue === page)
if(prevValue === selectPage)
{
SendMessageHook(new CatalogPageComposer(page.pageId, -1, CatalogMode.MODE_NORMAL));
SendMessageHook(new CatalogPageComposer(selectPage.pageId, -1, CatalogMode.MODE_NORMAL));
}
return page;
return selectPage;
});
if(page.children && page.children.length)
if(selectPage.children && selectPage.children.length)
{
setIsExpanded(prevValue =>
{
return !prevValue;
});
}
}, [ page, setActiveChild ]);
}, [ setActiveChild ]);
useEffect(() =>
{
if(!isActive || !page) return;
setIsExpanded(true);
SendMessageHook(new CatalogPageComposer(page.pageId, -1, CatalogMode.MODE_NORMAL));
}, [ isActive, page, select, dispatchCatalogState ]);
return (
<div className="col pb-1 catalog-navigation-item-container">
<div className={ 'd-flex align-items-center cursor-pointer catalog-navigation-item ' + (isActive ? 'active ': '') } onClick={ select }>
<div className={ 'd-flex align-items-center cursor-pointer catalog-navigation-item ' + (isActive ? 'active ': '') } onClick={ event => select(page) }>
<CatalogIconView icon={ page.icon } />
<div className="flex-grow-1 text-black text-truncate px-1">{ page.localization }</div>
{ (page.children.length > 0) && <i className={ 'fas fa-caret-' + (isExpanded ? 'up' : 'down') } /> }