nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-12-03 18:26: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 { GetRoomEngine, LocalizeText } from '../../../../../../api';
import { LocalizeText } from '../../../../../../api';
import { LayoutFurniIconImageView } from '../../../../../../common';
import { Button } from '../../../../../../common/Button';
import { Column } from '../../../../../../common/Column';
import { LayoutGridItem } from '../../../../../../common/layout/LayoutGridItem';
import { LayoutImage } from '../../../../../../common/layout/LayoutImage';
import { Text } from '../../../../../../common/Text';
import { ProductTypeEnum } from '../../../../common/ProductTypeEnum';
import { MarketplaceOfferData } from './common/MarketplaceOfferData';
import { MarketPlaceOfferState } from './common/MarketplaceOfferState';
@ -21,21 +22,6 @@ export const PUBLIC_OFFER = 2;
export const CatalogLayoutMarketplaceItemView: FC<MarketplaceItemViewProps> = 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(() =>
{
@ -68,7 +54,7 @@ export const CatalogLayoutMarketplaceItemView: FC<MarketplaceItemViewProps> = pr
return (
<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 }>
<Text fontWeight="bold">{ getMarketplaceOfferTitle }</Text>
{ (type === OWN_OFFER) &&

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

@ -1,27 +1,35 @@
import { ImageResult, MakeOfferMessageComposer, Vector3d } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { GetRoomEngine, LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../../../api';
import { Base, Button, Column, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common';
import { GetMarketplaceConfigurationMessageComposer, MakeOfferMessageComposer, MarketplaceConfigurationEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../../../api';
import { Base, Button, Column, Grid, LayoutFurniImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common';
import { CatalogPostMarketplaceOfferEvent } from '../../../../../../events';
import { BatchUpdates, UseUiEvent } from '../../../../../../hooks';
import { UseMessageEventHook, UseUiEvent } from '../../../../../../hooks';
import { FurnitureItem } from '../../../../../inventory/common/FurnitureItem';
import { useCatalogContext } from '../../../../CatalogContext';
import { ProductTypeEnum } from '../../../../common/ProductTypeEnum';
export const MarketplacePostOfferView : FC<{}> = props =>
{
const [ item, setItem ] = useState<FurnitureItem>(null);
const [ askingPrice, setAskingPrice ] = useState(0);
const { catalogOptions = null } = useCatalogContext();
const { catalogOptions = null, setCatalogOptions = null } = useCatalogContext();
const { marketplaceConfiguration = null } = catalogOptions;
const close = useCallback(() =>
const onMarketplaceConfigurationEvent = useCallback((event: MarketplaceConfigurationEvent) =>
{
BatchUpdates(() =>
{
setItem(null);
setAskingPrice(0);
});
}, []);
const parser = event.getParser();
setCatalogOptions(prevValue =>
{
const newValue = { ...prevValue };
newValue.marketplaceConfiguration = parser;
return newValue;
});
}, [ setCatalogOptions ]);
UseMessageEventHook(MarketplaceConfigurationEvent, onMarketplaceConfigurationEvent);
const onCatalogPostMarketplaceOfferEvent = useCallback( (event: CatalogPostMarketplaceOfferEvent) =>
{
@ -30,79 +38,56 @@ export const MarketplacePostOfferView : FC<{}> = props =>
UseUiEvent(CatalogPostMarketplaceOfferEvent.POST_MARKETPLACE, onCatalogPostMarketplaceOfferEvent);
const getItemImage = useCallback( () =>
useEffect(() =>
{
if(!item) return '';
if(!item || marketplaceConfiguration) return;
SendMessageComposer(new GetMarketplaceConfigurationMessageComposer());
}, [ item, marketplaceConfiguration ]);
useEffect(() =>
{
if(!item) return;
let object: ImageResult;
if(!item.isWallItem)
{
object = GetRoomEngine().getFurnitureFloorImage(item.type, new Vector3d(90,0,0), 64, this, 4293848814, item.extra.toString());
}
else
{
object = GetRoomEngine().getFurnitureWallImage(item.type, new Vector3d(90,0,0), 64, this, 4293848814, item.extra.toString());
}
return () => setAskingPrice(0);
}, [ item ]);
if(object)
{
const image = object.getImage();
if(!marketplaceConfiguration || !item) return null;
if(image) return image.src;
}
return '';
}, [item]);
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 getFurniTitle = useCallback( () =>
const postItem = () =>
{
if(!item) return '';
if(!item || (askingPrice <= marketplaceConfiguration.minimumPrice)) 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()]), () =>
NotificationUtilities.confirm(LocalizeText('inventory.marketplace.confirm_offer.info', [ 'furniname', 'price' ], [ getFurniTitle, askingPrice.toString() ]), () =>
{
SendMessageComposer(new MakeOfferMessageComposer(askingPrice, item.isWallItem ? 2 : 1, item.id));
setItem(null);
},
() => { setItem(null)}, null, null, LocalizeText('inventory.marketplace.confirm_offer.title'));
}, [askingPrice, getFurniTitle, item]);
() => { setItem(null) }, null, null, LocalizeText('inventory.marketplace.confirm_offer.title'));
}
return ( item &&
return (
<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">
<Grid fullHeight>
<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 size={ 8 } justifyContent="between" overflow="hidden">
<Column grow gap={ 1 }>
<Text fontWeight="bold">{ getFurniTitle() }</Text>
<Text truncate shrink>{ getFurniDescription() }</Text>
<Text fontWeight="bold">{ getFurniTitle }</Text>
<Text truncate shrink>{ getFurniDescription }</Text>
</Column>
<Column overflow="auto">
<Text italics>
{ LocalizeText('inventory.marketplace.make_offer.expiration_info', ['time'], [marketplaceConfiguration.offerTime.toString()]) }
</Text>
<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)) &&
<Base className="invalid-feedback d-block">
{ LocalizeText('inventory.marketplace.make_offer.min_price', [ 'minprice' ], [ marketplaceConfiguration.minimumPrice.toString() ]) }