Fix busted stuff data update for catalog

src/events/catalog/SetRoomPreviewerStuffDataEvent.ts

@@ -0,0 +1,27 @@
+import { CatalogPageMessageOfferData, IObjectData, NitroEvent } from '@nitrots/nitro-renderer';
+
+export class SetRoomPreviewerStuffDataEvent extends NitroEvent
+{
+    public static UPDATE_STUFF_DATA: string = 'SRPSA_UPDATE_STUFF_DATA';
+
+    private _offer: CatalogPageMessageOfferData;
+    private _stuffData: IObjectData;
+
+    constructor(offer: CatalogPageMessageOfferData, stuffData: IObjectData)
+    {
+        super(SetRoomPreviewerStuffDataEvent.UPDATE_STUFF_DATA);
+
+        this._offer = offer;
+        this._stuffData = stuffData;
+    }
+
+    public get offer(): CatalogPageMessageOfferData
+    {
+        return this._offer;
+    }
+
+    public get stuffData(): IObjectData
+    {
+        return this._stuffData;
+    }
+}

src/events/catalog/index.ts

@@ -3,3 +3,4 @@ export * from './CatalogNameResultEvent';
 export * from './CatalogPurchasedEvent';
 export * from './CatalogPurchaseFailureEvent';
 export * from './CatalogPurchaseSoldOutEvent';
+export * from './SetRoomPreviewerStuffDataEvent';

src/hooks/events/event-dispatcher.base.tsx

@@ -1,9 +1,9 @@
 import { IEventDispatcher, NitroEvent } from '@nitrots/nitro-renderer';
 import { useEffect } from 'react';
 
-export function CreateEventDispatcherHook(type: string, eventDispatcher: IEventDispatcher, handler: (event: NitroEvent) => void): void
+export const CreateEventDispatcherHook = (type: string, eventDispatcher: IEventDispatcher, handler: (event: NitroEvent) => void) =>
 {
-    useEffect(() =>
+    return useEffect(() =>
     {
         eventDispatcher.addEventListener(type, handler);
 
@@ -14,7 +14,7 @@ export function CreateEventDispatcherHook(type: string, eventDispatcher: IEventD
     }, [ type, eventDispatcher, handler ]);
 }
 
-export function DispatchEventHook(eventDispatcher: IEventDispatcher, event: NitroEvent): void
+export const DispatchEventHook = (eventDispatcher: IEventDispatcher, event: NitroEvent) =>
 {
     eventDispatcher.dispatchEvent(event);
 }

src/hooks/events/ui/ui-event.tsx

@@ -3,9 +3,9 @@ import { CreateEventDispatcherHook, DispatchEventHook } from '../event-dispatche
 
 const uiEventDispatcher: IEventDispatcher = new EventDispatcher();
 
-export function useUiEvent(type: string, handler: (event: NitroEvent) => void): void
+export const useUiEvent = (type: string, handler: (event: NitroEvent) => void) =>
 {
-    CreateEventDispatcherHook(type, uiEventDispatcher, handler);
+    return CreateEventDispatcherHook(type, uiEventDispatcher, handler);
 }
 
 export function dispatchUiEvent(event: NitroEvent): void

src/views/catalog/views/page/CatalogPageView.tsx

@@ -1,6 +1,8 @@
-import { Vector3d } from '@nitrots/nitro-renderer';
+import { CatalogPageMessageOfferData, IObjectData, Vector3d } from '@nitrots/nitro-renderer';
-import { FC, useEffect } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 import { GetAvatarRenderManager, GetFurnitureDataForProductOffer, GetSessionDataManager } from '../../../../api';
+import { SetRoomPreviewerStuffDataEvent } from '../../../../events';
+import { useUiEvent } from '../../../../hooks';
 import { FurniCategory } from '../../common/FurniCategory';
 import { ProductTypeEnum } from '../../common/ProductTypeEnum';
 import { useCatalogContext } from '../../context/CatalogContext';
@@ -11,90 +13,99 @@ import { CatalogLayoutSearchResultView } from './search-result/CatalogLayoutSear
 export const CatalogPageView: FC<CatalogPageViewProps> = props =>
 {
     const { roomPreviewer = null } = props;
+    const [ lastOffer, setLastOffer ] = useState<CatalogPageMessageOfferData>(null);
     const { catalogState = null } = useCatalogContext();
     const { pageParser = null, activeOffer = null, searchResult = null } = catalogState;
 
-    useEffect(() =>
+    const updatePreviewerForOffer = useCallback((offer: CatalogPageMessageOfferData, stuffData: IObjectData = null) =>
     {
-        if(!roomPreviewer) return;
+        if(!offer || !roomPreviewer) return;
 
-        roomPreviewer && roomPreviewer.reset(false);
+        const product = offer.products[0];
+        const furniData = GetFurnitureDataForProductOffer(product);
 
-        if(activeOffer && activeOffer.products.length)
+        if(!furniData && (product.productType !== ProductTypeEnum.ROBOT)) return;
+
+        switch(product.productType)
         {
-            const product = activeOffer.products[0];
+            case ProductTypeEnum.ROBOT: {
+                roomPreviewer.updateObjectRoom('default', 'default', 'default');
+                const figure = GetAvatarRenderManager().getFigureStringWithFigureIds(product.extraParam, 'm', []);
 
-            if(!product) return;
+                roomPreviewer.addAvatarIntoRoom(figure, 0);
 
-            const furniData = GetFurnitureDataForProductOffer(product);
+                return;
+            }
+            case ProductTypeEnum.FLOOR: {
+                roomPreviewer.updateObjectRoom('default', 'default', 'default');
 
-            if(!furniData && (product.productType !== ProductTypeEnum.ROBOT)) return;
+                if(furniData.specialType === FurniCategory.FIGURE_PURCHASABLE_SET)
+                {
+                    const setIds: number[] = [];
+                    const sets = furniData.customParams.split(',');
 
-            switch(product.productType)
+                    for(const set of sets)
-            {
+                    {
-                case ProductTypeEnum.ROBOT: {
+                        const setId = parseInt(set);
-                    roomPreviewer.updateObjectRoom('default', 'default', 'default');
+
-                    const figure = GetAvatarRenderManager().getFigureStringWithFigureIds(product.extraParam, 'm', []);
+                        if(GetAvatarRenderManager().isValidFigureSetForGender(setId, GetSessionDataManager().gender)) setIds.push(setId);
+                    }
+
+                    const figure = GetAvatarRenderManager().getFigureStringWithFigureIds(GetSessionDataManager().figure, GetSessionDataManager().gender, setIds);
 
                     roomPreviewer.addAvatarIntoRoom(figure, 0);
-
-                    return;
                 }
-                case ProductTypeEnum.FLOOR: {
+                else
-                    roomPreviewer.updateObjectRoom('default', 'default', 'default');
+                {
-
+                    roomPreviewer.addFurnitureIntoRoom(product.furniClassId, new Vector3d(90), stuffData);
-                    if(furniData.specialType === FurniCategory.FIGURE_PURCHASABLE_SET)
+                }
-                    {
+                return;
-                        const setIds: number[]  = [];
+            }
-                        const sets              = furniData.customParams.split(',');
+            case ProductTypeEnum.WALL: {
-
+                switch(furniData.className)
-                        for(const set of sets)
+                {
-                        {
+                    case 'floor':
-                            const setId = parseInt(set);
+                        roomPreviewer.reset(false);
-
+                        roomPreviewer.updateObjectRoom(product.extraParam);
-                            if(GetAvatarRenderManager().isValidFigureSetForGender(setId, GetSessionDataManager().gender)) setIds.push(setId);
+                        break;
-                        }
+                    case 'wallpaper':
-
+                        roomPreviewer.reset(false);
-                        const figure = GetAvatarRenderManager().getFigureStringWithFigureIds(GetSessionDataManager().figure, GetSessionDataManager().gender, setIds);
+                        roomPreviewer.updateObjectRoom(null, product.extraParam);
-
+                        break;
-                        roomPreviewer.addAvatarIntoRoom(figure, 0);
+                    case 'landscape':
-                    }
+                        roomPreviewer.reset(false);
-                    else
+                        roomPreviewer.updateObjectRoom(null, null, product.extraParam);
-                    {
+                        break;
-                        roomPreviewer.addFurnitureIntoRoom(product.furniClassId, new Vector3d(90));
+                    default:
-                    }
+                        roomPreviewer.updateObjectRoom('default', 'default', 'default');
-                    return;
+                        roomPreviewer.addWallItemIntoRoom(product.furniClassId, new Vector3d(90), product.extraParam);
+                        return;
                 }
-                case ProductTypeEnum.WALL:
 
-                    switch(furniData.className)
+                const windowData = GetSessionDataManager().getWallItemDataByName('noob_window_double');
-                    {
-                        case 'floor':
-                            roomPreviewer.reset(false);
-                            roomPreviewer.updateObjectRoom(product.extraParam);
-                            break;
-                        case 'wallpaper':
-                            roomPreviewer.reset(false);
-                            roomPreviewer.updateObjectRoom(null, product.extraParam);
-                            break;
-                        case 'landscape':
-                            roomPreviewer.reset(false);
-                            roomPreviewer.updateObjectRoom(null, null, product.extraParam);
-                            break;
-                        default:
-                            roomPreviewer.updateObjectRoom('default', 'default', 'default');
-                            roomPreviewer.addWallItemIntoRoom(product.furniClassId, new Vector3d(90), product.extraParam);
-                            return;
-                    }
 
-                    const windowData = GetSessionDataManager().getWallItemDataByName('noob_window_double');
+                if(windowData) roomPreviewer.addWallItemIntoRoom(windowData.id, new Vector3d(90, 0, 0), windowData.customParams);
 
-                    if(windowData) roomPreviewer.addWallItemIntoRoom(windowData.id, new Vector3d(90, 0, 0), windowData.customParams);
+                return;
-
-                    return;
             }
         }
-    }, [ roomPreviewer, activeOffer ]);
+    }, [ roomPreviewer ]);
+
+    const onSetRoomPreviewerStuffDataEvent = useCallback((event: SetRoomPreviewerStuffDataEvent) =>
+    {
+        if(roomPreviewer) roomPreviewer.reset(false);
+
+        updatePreviewerForOffer(event.offer, event.stuffData);
+    }, [ roomPreviewer, updatePreviewerForOffer ]);
+
+    useUiEvent(SetRoomPreviewerStuffDataEvent.UPDATE_STUFF_DATA, onSetRoomPreviewerStuffDataEvent);
+
+    useEffect(() =>
+    {
+        if(!activeOffer) return;
+
+        updatePreviewerForOffer(activeOffer);
+    }, [ activeOffer, updatePreviewerForOffer ]);
 
     if(searchResult && searchResult.furniture)
     {

src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx

@@ -1,7 +1,7 @@
 import { StringDataType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../../../api';
-import { InventoryBadgesUpdatedEvent } from '../../../../../../events';
+import { InventoryBadgesUpdatedEvent, SetRoomPreviewerStuffDataEvent } from '../../../../../../events';
 import { InventoryBadgesRequestEvent } from '../../../../../../events/inventory/InventoryBadgesRequestEvent';
 import { dispatchUiEvent, useUiEvent } from '../../../../../../hooks';
 import { NitroCardGridItemView } from '../../../../../../layout/card/grid/item/NitroCardGridItemView';
@@ -53,11 +53,19 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
     {
         if(!currentBadge || !activeOffer) return;
 
-        const stuffData = new StringDataType();
+        const productData = [];
+        productData.push('0');
+        productData.push(currentBadge);
+        productData.push('');
+        productData.push('');
+        productData.push('');
 
-        stuffData.setValue([ null, currentBadge ]);
+        const stringDataType = new StringDataType();
+        stringDataType.setValue(productData);
 
-        roomPreviewer.updateObjectStuffData(stuffData);
+        console.log(stringDataType);
+
+        dispatchUiEvent(new SetRoomPreviewerStuffDataEvent(activeOffer, stringDataType));
     }, [ currentBadge, activeOffer, roomPreviewer ]);
 
     return (

src/views/catalog/views/page/layout/guild-custom-furni/CatalogLayoutGuildCustomFurniView.tsx

@@ -1,6 +1,8 @@
 import { CatalogGroupsComposer, StringDataType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../../../api';
+import { SetRoomPreviewerStuffDataEvent } from '../../../../../../events';
+import { dispatchUiEvent } from '../../../../../../hooks';
 import { SendMessageHook } from '../../../../../../hooks/messages';
 import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
 import { GetOfferName } from '../../../../common/CatalogUtilities';
@@ -13,14 +15,10 @@ import { CatalogLayoutGuildCustomFurniViewProps } from './CatalogLayoutGuildCust
 export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutGuildCustomFurniViewProps> = props =>
 {
     const { roomPreviewer = null, pageParser = null } = props;
-
+    const [ selectedGroupIndex, setSelectedGroupIndex ] = useState<number>(0);
     const { catalogState = null } = useCatalogContext();
     const { activeOffer = null, groups = null } = catalogState;
 
-    const product = ((activeOffer && activeOffer.products[0]) || null);
-
-    const [ selectedGroupIndex, setSelectedGroupIndex ] = useState<number>(0);
-
     useEffect(() =>
     {
         SendMessageHook(new CatalogGroupsComposer());
@@ -28,7 +26,7 @@ export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutGuildCustomFurniV
 
     useEffect(() =>
     {
-        if(!groups[selectedGroupIndex]) return;
+        if(!activeOffer || !groups[selectedGroupIndex]) return;
 
         const productData = [];
         productData.push('0');
@@ -40,11 +38,13 @@ export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutGuildCustomFurniV
         const stringDataType = new StringDataType();
         stringDataType.setValue(productData);
 
-        roomPreviewer.updateObjectStuffData(stringDataType);
+        dispatchUiEvent(new SetRoomPreviewerStuffDataEvent(activeOffer, stringDataType));
-    }, [ selectedGroupIndex, activeOffer ]);
+    }, [ groups, selectedGroupIndex, activeOffer ]);
 
     if(!groups) return null;
 
+    const product = ((activeOffer && activeOffer.products[0]) || null);
+    
     return (
         <div className="row h-100 nitro-catalog-layout-guild-custom-furni">
             <div className="d-flex flex-column col-7 h-100">