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

Some catalog layouts

Browse Source
This commit is contained in:
MyNameIsBatman 2021-06-21 06:54:29 -03:00
parent 949f26c810
commit d70f24e38f
8 changed files with 134 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/catalog/CatalogMessageHandler.tsx
View File

@ -1,4 +1,4 @@
import { CatalogApproveNameResultEvent, CatalogClubEvent, CatalogPageEvent, CatalogPagesEvent, CatalogPurchaseEvent, CatalogPurchaseFailedEvent, CatalogPurchaseUnavailableEvent, CatalogSearchEvent, CatalogSoldOutEvent, CatalogUpdatedEvent, SellablePetPalettesEvent, UserSubscriptionEvent } from 'nitro-renderer';
import { CatalogApproveNameResultEvent, CatalogClubEvent, CatalogGroupsEvent, CatalogPageEvent, CatalogPagesEvent, CatalogPurchaseEvent, CatalogPurchaseFailedEvent, CatalogPurchaseUnavailableEvent, CatalogSearchEvent, CatalogSoldOutEvent, CatalogUpdatedEvent, SellablePetPalettesEvent, UserSubscriptionEvent } from 'nitro-renderer';
import { FC, useCallback } from 'react';
import { CatalogNameResultEvent, CatalogPurchaseFailureEvent } from '../../events';
import { CatalogPurchasedEvent } from '../../events/catalog/CatalogPurchasedEvent';
@ -31,8 +31,6 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
{
const parser = event.getParser();
console.log(parser)
dispatchCatalogState({
type: CatalogActions.SET_CATALOG_PAGE_PARSER,
payload: {
@ -109,6 +107,18 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
});
}, [ dispatchCatalogState ]);
const onCatalogGroupsEvent = useCallback((event: CatalogGroupsEvent) =>
{
const parser = event.getParser();
dispatchCatalogState({
type: CatalogActions.SET_GROUPS,
payload: {
groups: parser.groups
}
});
}, [ dispatchCatalogState ]);
const onUserSubscriptionEvent = useCallback((event: UserSubscriptionEvent) =>
{
const parser = event.getParser();
@ -142,6 +152,7 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
CreateMessageHook(CatalogPurchaseUnavailableEvent, onCatalogPurchaseUnavailableEvent);
CreateMessageHook(CatalogSoldOutEvent, onCatalogSoldOutEvent);
CreateMessageHook(CatalogSearchEvent, onCatalogSearchEvent);
CreateMessageHook(CatalogGroupsEvent, onCatalogGroupsEvent);
CreateMessageHook(SellablePetPalettesEvent, onSellablePetPalettesEvent);
CreateMessageHook(CatalogApproveNameResultEvent, onCatalogApproveNameResultEvent);
CreateMessageHook(CatalogClubEvent, onCatalogClubEvent);

4
src/views/catalog/CatalogView.scss
View File

@ -8,6 +8,10 @@
resize: vertical;
overflow:auto;
}
font[size="16"] {
font-size: 20px;
}
}
@import './views/CatalogViews';

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

@ -1,4 +1,4 @@
import { CatalogClubOfferData, CatalogPageOfferData, ICatalogPageData, ICatalogPageParser } from 'nitro-renderer';
import { CatalogClubOfferData, CatalogGroupData, CatalogPageOfferData, ICatalogPageData, ICatalogPageParser } from 'nitro-renderer';
import { Reducer } from 'react';
import { CatalogPetPalette } from '../utils/CatalogPetPalette';
import { ICatalogOffers, ICatalogSearchResult, SetOffersToNodes } from '../utils/CatalogUtilities';
@ -13,6 +13,7 @@ export interface ICatalogState
pageParser: ICatalogPageParser;
activeOffer: CatalogPageOfferData;
searchResult: ICatalogSearchResult;
groups: CatalogGroupData[];
petPalettes: CatalogPetPalette[];
clubOffers: CatalogClubOfferData[];
subscriptionInfo: SubscriptionInfo;
@ -29,6 +30,7 @@ export interface ICatalogAction
pageParser?: ICatalogPageParser;
activeOffer?: CatalogPageOfferData;
searchResult?: ICatalogSearchResult;
groups?: CatalogGroupData[];
petPalette?: CatalogPetPalette;
clubOffers?: CatalogClubOfferData[];
subscriptionInfo?: SubscriptionInfo;
@ -37,16 +39,17 @@ export interface ICatalogAction
export class CatalogActions
{
public static RESET_STATE: string = 'CA_RESET_STATE';
public static SET_CATALOG_ROOT: string = 'CA_SET_CATALOG_ROOT';
public static SET_CATALOG_CURRENT_TAB: string = 'CA_SET_CATALOG_CURRENT_TAB';
public static SET_CATALOG_CURRENT_PAGE: string = 'CA_SET_CATALOG_CURRENT_PAGE';
public static SET_CATALOG_PAGE_PARSER: string = 'CA_SET_CATALOG_PAGE';
public static SET_CATALOG_ACTIVE_OFFER: string = 'CA_SET_ACTIVE_OFFER';
public static SET_SEARCH_RESULT: string = 'CA_SET_SEARCH_RESULT';
public static SET_PET_PALETTE: string = 'CA_SET_PET_PALETTE';
public static SET_CLUB_OFFERS: string = 'CA_SET_CLUB_OFFERS';
public static SET_GROUPS: string = 'CA_SET_GROUPS';
public static SET_PET_PALETTE: string = 'CA_SET_PET_PALETTE';
public static SET_SEARCH_RESULT: string = 'CA_SET_SEARCH_RESULT';
public static SET_SUBSCRIPTION_INFO: string = 'CA_SET_SUBSCRIPTION_INFO';
public static RESET_STATE = 'CA_RESET_STATE';
}
export const initialCatalog: ICatalogState = {
@ -57,6 +60,7 @@ export const initialCatalog: ICatalogState = {
pageParser: null,
activeOffer: null,
searchResult: null,
groups: [],
petPalettes: [],
clubOffers: null,
subscriptionInfo: new SubscriptionInfo()
@ -115,6 +119,11 @@ export const CatalogReducer: Reducer<ICatalogState, ICatalogAction> = (state, ac
return { ...state, searchResult };
}
case CatalogActions.SET_GROUPS: {
const groups = (action.payload.groups || null);
return { ...state, groups };
}
case CatalogActions.SET_PET_PALETTE: {
const petPalette = (action.payload.petPalette || null);

7
src/views/catalog/views/page/layout/GetCatalogLayout.tsx
View File

@ -1,6 +1,8 @@
import { ICatalogPageParser, RoomPreviewer } from 'nitro-renderer';
import { CatalogLayoutDefaultView } from './default/CatalogLayoutDefaultView';
import { CatalogLayoutFrontpage4View } from './frontpage4/CatalogLayoutFrontpage4View';
import { CatalogLayouGuildCustomFurniView } from './guild-custom-furni/CatalogLayoutGuildCustomFurniView';
import { CatalogLayouGuildForumView } from './guild-forum/CatalogLayoutGuildForumView';
import { CatalogLayoutInfoLoyaltyView } from './info-loyalty/CatalogLayoutInfoLoyaltyView';
import { CatalogLayoutPetView } from './pets/CatalogLayoutPetView';
import { CatalogLayoutPets2View } from './pets2/CatalogLayoutPets2View';
@ -12,7 +14,6 @@ import { CatalogLayoutVipBuyView } from './vip-buy/CatalogLayoutVipBuyView';
export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer: RoomPreviewer): JSX.Element
{
switch(pageParser.layoutCode)
{
case 'frontpage_featured':
@ -29,8 +30,10 @@ export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer:
return <CatalogLayoutVipBuyView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
case 'guild_frontpage':
return null;
case 'guild_forum':
return <CatalogLayouGuildForumView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
case 'guild_custom_furni':
return null;
return <CatalogLayouGuildCustomFurniView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
case 'search_results':
return null;
case 'club_gifts':

43
src/views/catalog/views/page/layout/guild-custom-furni/CatalogLayoutGuildCustomFurniView.tsx Normal file
View File

@ -0,0 +1,43 @@
import { CatalogGroupsComposer } from 'nitro-renderer';
import { FC, useEffect } from 'react';
import { SendMessageHook } from '../../../../../../hooks/messages';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
import { RoomPreviewerView } from '../../../../../room-previewer/RoomPreviewerView';
import { useCatalogContext } from '../../../../context/CatalogContext';
import { GetOfferName } from '../../../../utils/CatalogUtilities';
import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
import { CatalogLayoutGuildCustomFurniViewProps } from './CatalogLayoutGuildCustomFurniView.types';
export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutGuildCustomFurniViewProps> = props =>
{
const { roomPreviewer = null, pageParser = null } = props;
const { catalogState = null } = useCatalogContext();
const { activeOffer = null, groups = null } = catalogState;
const product = ((activeOffer && activeOffer.products[0]) || null);
useEffect(() =>
{
SendMessageHook(new CatalogGroupsComposer());
}, [ pageParser ]);
return (
<div className="row h-100 nitro-catalog-layout-guild-custom-furni">
<div className="d-flex flex-column col-7 h-100">
<CatalogPageOffersView offers={ pageParser.offers } />
</div>
{ product &&
<div className="col position-relative d-flex flex-column">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
<div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
{ groups.length === 0 && <div className="bg-muted text-center rounded p-1 text-black mt-auto">
{ LocalizeText('catalog.guild_selector.members_only') }
<button className="btn btn-sm btn-primary mt-1">{ LocalizeText('catalog.guild_selector.find_groups') }</button>
</div> }
{ groups.length > 0 && <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } /> }
</div> }
</div>
);
}

4
src/views/catalog/views/page/layout/guild-custom-furni/CatalogLayoutGuildCustomFurniView.types.ts Normal file
View File

@ -0,0 +1,4 @@
import { CatalogLayoutProps } from '../CatalogLayout.types';
export interface CatalogLayoutGuildCustomFurniViewProps extends CatalogLayoutProps
{}

47
src/views/catalog/views/page/layout/guild-forum/CatalogLayoutGuildForumView.tsx Normal file
View File

@ -0,0 +1,47 @@
import { CatalogGroupsComposer } from 'nitro-renderer';
import { FC, useEffect } from 'react';
import { SendMessageHook } from '../../../../../../hooks/messages';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
import { useCatalogContext } from '../../../../context/CatalogContext';
import { CatalogActions } from '../../../../reducers/CatalogReducer';
import { GetCatalogPageText } from '../../../../utils/CatalogUtilities';
import { CatalogLayoutGuildForumViewProps } from './CatalogLayoutGuildForumView.types';
export const CatalogLayouGuildForumView: FC<CatalogLayoutGuildForumViewProps> = props =>
{
const { pageParser = null } = props;
const { catalogState = null, dispatchCatalogState = null } = useCatalogContext();
const { activeOffer = null, groups = null } = catalogState;
const product = ((activeOffer && activeOffer.products[0]) || null);
useEffect(() =>
{
SendMessageHook(new CatalogGroupsComposer());
if(pageParser.offers.length > 0)
{
dispatchCatalogState({
type: CatalogActions.SET_CATALOG_ACTIVE_OFFER,
payload: {
activeOffer: pageParser.offers[0]
}
});
}
}, [ dispatchCatalogState, pageParser ]);
return (
<div className="row h-100 nitro-catalog-layout-guild-custom-furni">
<div className="col-7 overflow-auto h-100 d-flex flex-column bg-muted rounded py-1 px-2 text-black">
<div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 1) } } />
</div>
<div className="col position-relative d-flex flex-column justify-content-center">
{ groups.length === 0 && <div className="bg-muted text-center rounded p-1 text-black">
{ LocalizeText('catalog.guild_selector.members_only') }
<button className="btn btn-sm btn-primary mt-1">{ LocalizeText('catalog.guild_selector.find_groups') }</button>
</div> }
</div>
</div>
);
}

4
src/views/catalog/views/page/layout/guild-forum/CatalogLayoutGuildForumView.types.ts Normal file
View File

@ -0,0 +1,4 @@
import { CatalogLayoutProps } from '../CatalogLayout.types';
export interface CatalogLayoutGuildForumViewProps extends CatalogLayoutProps
{}