nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-12-04 18:56:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Marketplace updates

Browse Source
This commit is contained in:
Bill 2022-03-24 03:02:28 -04:00
parent f8ae1842a3
commit 604c5f1fef
2 changed files with 51 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
View File

@ -1,10 +1,11 @@
import { FC, useCallback, useMemo } from 'react'; import { FC, useCallback, useMemo } from 'react';
import { GetRoomEngine, LocalizeText } from '../../../../../../api'; import { LocalizeText } from '../../../../../../api';
import { LayoutFurniIconImageView } from '../../../../../../common';
import { Button } from '../../../../../../common/Button'; import { Button } from '../../../../../../common/Button';
import { Column } from '../../../../../../common/Column'; import { Column } from '../../../../../../common/Column';
import { LayoutGridItem } from '../../../../../../common/layout/LayoutGridItem'; import { LayoutGridItem } from '../../../../../../common/layout/LayoutGridItem';
import { LayoutImage } from '../../../../../../common/layout/LayoutImage';
import { Text } from '../../../../../../common/Text'; import { Text } from '../../../../../../common/Text';
import { ProductTypeEnum } from '../../../../common/ProductTypeEnum';
import { MarketplaceOfferData } from './common/MarketplaceOfferData'; import { MarketplaceOfferData } from './common/MarketplaceOfferData';
import { MarketPlaceOfferState } from './common/MarketplaceOfferState'; import { MarketPlaceOfferState } from './common/MarketplaceOfferState';
@ -22,21 +23,6 @@ export const CatalogLayoutMarketplaceItemView: FC<MarketplaceItemViewProps> = pr
{ {
const { offerData = null, type = PUBLIC_OFFER, onClick = null } = props; const { offerData = null, type = PUBLIC_OFFER, onClick = null } = props;
const getImageUrlForOffer = useCallback( () =>
{
if(!offerData) return '';
switch(offerData.furniType)
{
case MarketplaceOfferData.TYPE_FLOOR:
return GetRoomEngine().getFurnitureFloorIconUrl(offerData.furniId);
case MarketplaceOfferData.TYPE_WALL:
return GetRoomEngine().getFurnitureWallIconUrl(offerData.furniId, offerData.extraData);
}
return '';
}, [offerData]);
const getMarketplaceOfferTitle = useMemo(() => const getMarketplaceOfferTitle = useMemo(() =>
{ {
if(!offerData) return ''; if(!offerData) return '';
@ -68,7 +54,7 @@ export const CatalogLayoutMarketplaceItemView: FC<MarketplaceItemViewProps> = pr
return ( return (
<LayoutGridItem shrink center={ false } column={ false } alignItems="center" className="p-1"> <LayoutGridItem shrink center={ false } column={ false } alignItems="center" className="p-1">
<LayoutImage imageUrl={ getImageUrlForOffer() } style={ { width: 50, height: 50 }} /> <LayoutFurniIconImageView productType={ offerData.furniType === MarketplaceOfferData.TYPE_FLOOR ? ProductTypeEnum.FLOOR : ProductTypeEnum.WALL } productClassId={ offerData.furniId } extraData={ offerData.extraData } style={ { width: 50, height: 50 } } />
<Column grow gap={ 0 }> <Column grow gap={ 0 }>
<Text fontWeight="bold">{ getMarketplaceOfferTitle }</Text> <Text fontWeight="bold">{ getMarketplaceOfferTitle }</Text>
{ (type === OWN_OFFER) && { (type === OWN_OFFER) &&

105
src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
View File

@ -1,27 +1,35 @@
import { ImageResult, MakeOfferMessageComposer, Vector3d } from '@nitrots/nitro-renderer'; import { GetMarketplaceConfigurationMessageComposer, MakeOfferMessageComposer, MarketplaceConfigurationEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react'; import { FC, useCallback, useEffect, useState } from 'react';
import { GetRoomEngine, LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../../../api'; import { LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../../../api';
import { Base, Button, Column, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common'; import { Base, Button, Column, Grid, LayoutFurniImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common';
import { CatalogPostMarketplaceOfferEvent } from '../../../../../../events'; import { CatalogPostMarketplaceOfferEvent } from '../../../../../../events';
import { BatchUpdates, UseUiEvent } from '../../../../../../hooks'; import { UseMessageEventHook, UseUiEvent } from '../../../../../../hooks';
import { FurnitureItem } from '../../../../../inventory/common/FurnitureItem'; import { FurnitureItem } from '../../../../../inventory/common/FurnitureItem';
import { useCatalogContext } from '../../../../CatalogContext'; import { useCatalogContext } from '../../../../CatalogContext';
import { ProductTypeEnum } from '../../../../common/ProductTypeEnum';
export const MarketplacePostOfferView : FC<{}> = props => export const MarketplacePostOfferView : FC<{}> = props =>
{ {
const [ item, setItem ] = useState<FurnitureItem>(null); const [ item, setItem ] = useState<FurnitureItem>(null);
const [ askingPrice, setAskingPrice ] = useState(0); const [ askingPrice, setAskingPrice ] = useState(0);
const { catalogOptions = null } = useCatalogContext(); const { catalogOptions = null, setCatalogOptions = null } = useCatalogContext();
const { marketplaceConfiguration = null } = catalogOptions; const { marketplaceConfiguration = null } = catalogOptions;
const close = useCallback(() => const onMarketplaceConfigurationEvent = useCallback((event: MarketplaceConfigurationEvent) =>
{ {
BatchUpdates(() => const parser = event.getParser();
setCatalogOptions(prevValue =>
{ {
setItem(null); const newValue = { ...prevValue };
setAskingPrice(0);
newValue.marketplaceConfiguration = parser;
return newValue;
}); });
}, []); }, [ setCatalogOptions ]);
UseMessageEventHook(MarketplaceConfigurationEvent, onMarketplaceConfigurationEvent);
const onCatalogPostMarketplaceOfferEvent = useCallback( (event: CatalogPostMarketplaceOfferEvent) => const onCatalogPostMarketplaceOfferEvent = useCallback( (event: CatalogPostMarketplaceOfferEvent) =>
{ {
@ -30,79 +38,56 @@ export const MarketplacePostOfferView : FC<{}> = props =>
UseUiEvent(CatalogPostMarketplaceOfferEvent.POST_MARKETPLACE, onCatalogPostMarketplaceOfferEvent); UseUiEvent(CatalogPostMarketplaceOfferEvent.POST_MARKETPLACE, onCatalogPostMarketplaceOfferEvent);
const getItemImage = useCallback( () => useEffect(() =>
{ {
if(!item) return ''; if(!item || marketplaceConfiguration) return;
let object: ImageResult; SendMessageComposer(new GetMarketplaceConfigurationMessageComposer());
}, [ item, marketplaceConfiguration ]);
if(!item.isWallItem) useEffect(() =>
{ {
object = GetRoomEngine().getFurnitureFloorImage(item.type, new Vector3d(90,0,0), 64, this, 4293848814, item.extra.toString()); if(!item) return;
}
else return () => setAskingPrice(0);
}, [ item ]);
if(!marketplaceConfiguration || !item) return null;
const getFurniTitle = (item ? LocalizeText(item.isWallItem ? 'wallItem.name.' + item.type : 'roomItem.name.' + item.type) : '');
const getFurniDescription = (item ? LocalizeText(item.isWallItem ? 'wallItem.desc.' + item.type : 'roomItem.desc.' + item.type) : '');
const postItem = () =>
{ {
object = GetRoomEngine().getFurnitureWallImage(item.type, new Vector3d(90,0,0), 64, this, 4293848814, item.extra.toString()); if(!item || (askingPrice <= marketplaceConfiguration.minimumPrice)) return;
}
if(object) NotificationUtilities.confirm(LocalizeText('inventory.marketplace.confirm_offer.info', [ 'furniname', 'price' ], [ getFurniTitle, askingPrice.toString() ]), () =>
{
const image = object.getImage();
if(image) return image.src;
}
return '';
}, [item]);
const getFurniTitle = useCallback( () =>
{
if(!item) return '';
const localizationKey = item.isWallItem ? 'wallItem.name.' + item.type : 'roomItem.name.' + item.type;
return LocalizeText(localizationKey);
}, [item]);
const getFurniDescription = useCallback( () =>
{
if(!item) return '';
const localizationKey = item.isWallItem ? 'wallItem.desc.' + item.type : 'roomItem.desc.' + item.type;
return LocalizeText(localizationKey);
}, [item]);
const postItem = useCallback( () =>
{
if(isNaN(askingPrice) || askingPrice <= 0 || !item) return;
NotificationUtilities.confirm(LocalizeText('inventory.marketplace.confirm_offer.info', ['furniname', 'price'], [getFurniTitle(), askingPrice.toString()]), () =>
{ {
SendMessageComposer(new MakeOfferMessageComposer(askingPrice, item.isWallItem ? 2 : 1, item.id)); SendMessageComposer(new MakeOfferMessageComposer(askingPrice, item.isWallItem ? 2 : 1, item.id));
setItem(null); setItem(null);
}, },
() => { setItem(null)}, null, null, LocalizeText('inventory.marketplace.confirm_offer.title')); () => { setItem(null) }, null, null, LocalizeText('inventory.marketplace.confirm_offer.title'));
}, [askingPrice, getFurniTitle, item]); }
return ( item && return (
<NitroCardView className="nitro-catalog-layout-marketplace-post-offer" theme="primary-slim"> <NitroCardView className="nitro-catalog-layout-marketplace-post-offer" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('inventory.marketplace.make_offer.title') } onCloseClick={ close } /> <NitroCardHeaderView headerText={ LocalizeText('inventory.marketplace.make_offer.title') } onCloseClick={ event => setItem(null) } />
<NitroCardContentView overflow="hidden"> <NitroCardContentView overflow="hidden">
<Grid fullHeight> <Grid fullHeight>
<Column center className="bg-muted rounded p-2" size={ 4 } overflow="hidden"> <Column center className="bg-muted rounded p-2" size={ 4 } overflow="hidden">
<LayoutImage imageUrl={ getItemImage() } /> <LayoutFurniImageView productType={ item.isWallItem ? ProductTypeEnum.WALL : ProductTypeEnum.FLOOR } productClassId={ item.type } extraData={ item.extra.toString() } />
</Column> </Column>
<Column size={ 8 } justifyContent="between" overflow="hidden"> <Column size={ 8 } justifyContent="between" overflow="hidden">
<Column grow gap={ 1 }> <Column grow gap={ 1 }>
<Text fontWeight="bold">{ getFurniTitle() }</Text> <Text fontWeight="bold">{ getFurniTitle }</Text>
<Text truncate shrink>{ getFurniDescription() }</Text> <Text truncate shrink>{ getFurniDescription }</Text>
</Column> </Column>
<Column overflow="auto"> <Column overflow="auto">
<Text italics> <Text italics>
{ LocalizeText('inventory.marketplace.make_offer.expiration_info', ['time'], [marketplaceConfiguration.offerTime.toString()]) } { LocalizeText('inventory.marketplace.make_offer.expiration_info', ['time'], [marketplaceConfiguration.offerTime.toString()]) }
</Text> </Text>
<div className="input-group has-validation"> <div className="input-group has-validation">
<input className="form-control form-control-sm" type="number" min={ 0 } value={ askingPrice } onChange={ event => setAskingPrice(event.target.valueAsNumber) } placeholder={ LocalizeText('inventory.marketplace.make_offer.price_request') } /> <input className="form-control form-control-sm" type="number" min={ 0 } value={ askingPrice } onChange={ event => setAskingPrice(parseInt(event.target.value)) } placeholder={ LocalizeText('inventory.marketplace.make_offer.price_request') } />
{ ((askingPrice < marketplaceConfiguration.minimumPrice) || isNaN(askingPrice)) && { ((askingPrice < marketplaceConfiguration.minimumPrice) || isNaN(askingPrice)) &&
<Base className="invalid-feedback d-block"> <Base className="invalid-feedback d-block">
{ LocalizeText('inventory.marketplace.make_offer.min_price', [ 'minprice' ], [ marketplaceConfiguration.minimumPrice.toString() ]) } { LocalizeText('inventory.marketplace.make_offer.min_price', [ 'minprice' ], [ marketplaceConfiguration.minimumPrice.toString() ]) }