Update context menus

src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx

@@ -3,15 +3,15 @@ import { GroupFurniContextMenuInfoMessageEvent } from '@nitrots/nitro-renderer/s
 import { FC, useCallback, useState } from 'react';
 import { GetGroupInformation, GetRoomEngine, IsOwnerOfFurniture, LocalizeText, RoomWidgetFurniActionMessage, TryVisitRoom } from '../../../../../api';
 import { TryJoinGroup } from '../../../../../api/groups/TryJoinGroup';
-import { CreateMessageHook } from '../../../../../hooks';
+import { BatchUpdates, CreateMessageHook } from '../../../../../hooks';
 import { useRoomEngineEvent } from '../../../../../hooks/events';
 import { useRoomContext } from '../../../context/RoomContext';
 import { ContextMenuView } from '../../context-menu/ContextMenuView';
 import { ContextMenuHeaderView } from '../../context-menu/views/header/ContextMenuHeaderView';
 import { ContextMenuListItemView } from '../../context-menu/views/list-item/ContextMenuListItemView';
-import { EffectBoxConfirmView } from './views/effect-box/EffectBoxConfirmView';
-import { MonsterPlantSeedConfirmView } from './views/monsterplant-seed/MonsterPlantSeedConfirmView';
-import { PurchasableClothingConfirmView } from './views/purchaseable-clothing/PurchasableClothingConfirmView';
+import { EffectBoxConfirmView } from './views/EffectBoxConfirmView';
+import { MonsterPlantSeedConfirmView } from './views/MonsterPlantSeedConfirmView';
+import { PurchasableClothingConfirmView } from './views/PurchasableClothingConfirmView';
 
 const MONSTERPLANT_SEED_CONFIRMATION: string = 'MONSTERPLANT_SEED_CONFIRMATION';
 const PURCHASABLE_CLOTHING_CONFIRMATION: string = 'PURCHASABLE_CLOTHING_CONFIRMATION';
@@ -26,22 +26,24 @@ export const FurnitureContextMenuView: FC<{}> = props =>
     const [ confirmingObjectId, setConfirmingObjectId ] = useState(-1);
     const [ groupData, setGroupData ] = useState<GroupFurniContextMenuInfoMessageParser>(null);
     const [ isGroupMember, setIsGroupMember ] = useState(false);
-
     const { roomSession = null, widgetHandler = null } = useRoomContext();
 
     const close = useCallback(() =>
     {
-        setObjectId(-1);
-        setGroupData(null);
-        setIsGroupMember(false);
-        setMode(null);
+        BatchUpdates(() =>
+        {
+            setObjectId(-1);
+            setGroupData(null);
+            setIsGroupMember(false);
+            setMode(null);
+        });
     }, []);
 
-    const closeConfirm = useCallback(() =>
+    const closeConfirm = () =>
     {
         setConfirmMode(null);
         setConfirmingObjectId(-1);
-    }, []);
+    }
 
     const onRoomEngineTriggerWidgetEvent = useCallback((event: RoomEngineTriggerWidgetEvent) =>
     {
@@ -54,47 +56,60 @@ export const FurnitureContextMenuView: FC<{}> = props =>
             case RoomEngineTriggerWidgetEvent.REQUEST_MONSTERPLANT_SEED_PLANT_CONFIRMATION_DIALOG:
                 if(!IsOwnerOfFurniture(object)) return;
 
-                setConfirmingObjectId(object.id);
-                setConfirmMode(MONSTERPLANT_SEED_CONFIRMATION);
+                BatchUpdates(() =>
+                {
+                    setConfirmingObjectId(object.id);
+                    setConfirmMode(MONSTERPLANT_SEED_CONFIRMATION);
+                });
 
                 close();
                 return;
             case RoomEngineTriggerWidgetEvent.REQUEST_EFFECTBOX_OPEN_DIALOG:
                 if(!IsOwnerOfFurniture(object)) return;
-                
-                setConfirmingObjectId(object.id);
-                setConfirmMode(EFFECTBOX_OPEN);
+
+                BatchUpdates(() =>
+                {
+                    setConfirmingObjectId(object.id);
+                    setConfirmMode(EFFECTBOX_OPEN);
+                });
 
                 close();
                 return;
             case RoomEngineTriggerWidgetEvent.REQUEST_PURCHASABLE_CLOTHING_CONFIRMATION_DIALOG:
                 if(!IsOwnerOfFurniture(object)) return;
 
-                setConfirmingObjectId(object.id);
-                setConfirmMode(PURCHASABLE_CLOTHING_CONFIRMATION);
+                BatchUpdates(() =>
+                {
+                    setConfirmingObjectId(object.id);
+                    setConfirmMode(PURCHASABLE_CLOTHING_CONFIRMATION);
+                });
 
                 close();
                 return;
             case RoomEngineTriggerWidgetEvent.OPEN_FURNI_CONTEXT_MENU:
-                setObjectId(object.id);
 
-                switch(event.contextMenu)
+                BatchUpdates(() =>
                 {
-                    case ContextMenuEnum.FRIEND_FURNITURE:
-                        setMode(ContextMenuEnum.FRIEND_FURNITURE);
-                        return;
-                    case ContextMenuEnum.MONSTERPLANT_SEED:
-                        if(IsOwnerOfFurniture(object)) setMode(ContextMenuEnum.MONSTERPLANT_SEED);
-                        return;
-                    case ContextMenuEnum.MYSTERY_BOX:
-                        return;
-                    case ContextMenuEnum.RANDOM_TELEPORT:
-                        setMode(ContextMenuEnum.RANDOM_TELEPORT);
-                        return;
-                    case ContextMenuEnum.PURCHASABLE_CLOTHING:
-                        if(IsOwnerOfFurniture(object)) setMode(ContextMenuEnum.PURCHASABLE_CLOTHING);
-                        return;
-                }
+                    setObjectId(object.id);
+
+                    switch(event.contextMenu)
+                    {
+                        case ContextMenuEnum.FRIEND_FURNITURE:
+                            setMode(ContextMenuEnum.FRIEND_FURNITURE);
+                            return;
+                        case ContextMenuEnum.MONSTERPLANT_SEED:
+                            if(IsOwnerOfFurniture(object)) setMode(ContextMenuEnum.MONSTERPLANT_SEED);
+                            return;
+                        case ContextMenuEnum.MYSTERY_BOX:
+                            return;
+                        case ContextMenuEnum.RANDOM_TELEPORT:
+                            setMode(ContextMenuEnum.RANDOM_TELEPORT);
+                            return;
+                        case ContextMenuEnum.PURCHASABLE_CLOTHING:
+                            if(IsOwnerOfFurniture(object)) setMode(ContextMenuEnum.PURCHASABLE_CLOTHING);
+                            return;
+                    }
+                });
 
                 return;
             case RoomEngineTriggerWidgetEvent.CLOSE_FURNI_CONTEXT_MENU:
@@ -113,15 +128,18 @@ export const FurnitureContextMenuView: FC<{}> = props =>
     {
         const parser = event.getParser();
 
-        setObjectId(parser.objectId);
-        setGroupData(parser);
-        setIsGroupMember(parser.userIsMember);
-        setMode(GROUP_FURNITURE);
+        BatchUpdates(() =>
+        {
+            setObjectId(parser.objectId);
+            setGroupData(parser);
+            setIsGroupMember(parser.userIsMember);
+            setMode(GROUP_FURNITURE);
+        });
     }, []);
 
     CreateMessageHook(GroupFurniContextMenuInfoMessageEvent, onGroupFurniContextMenuInfoMessageEvent);
 
-    const processAction = useCallback((name: string) =>
+    const processAction = (name: string) =>
     {
         if(name)
         {
@@ -152,7 +170,7 @@ export const FurnitureContextMenuView: FC<{}> = props =>
         }
 
         close();
-    }, [ roomSession, widgetHandler, objectId, groupData, close ]);
+    }
 
     return (
         <>

src/views/room/widgets/furniture/context-menu/views/EffectBoxConfirmView.tsx

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../../../api';
+import { Button, Column, Flex, Text } from '../../../../../../common';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
+import { useRoomContext } from '../../../../context/RoomContext';
+
+interface EffectBoxConfirmViewProps
+{
+    objectId: number;
+    close: () => void;
+}
+
+export const EffectBoxConfirmView: FC<EffectBoxConfirmViewProps> = props =>
+{
+    const { objectId = -1, close = null } = props;
+    const { roomSession = null } = useRoomContext();
+
+    const useProduct = () =>
+    {
+        roomSession.useMultistateItem(objectId);
+
+        close();
+    }
+    
+    return (
+        <NitroCardView className="nitro-use-product-confirmation">
+            <NitroCardHeaderView headerText={ LocalizeText('effectbox.header.title') } onCloseClick={ close } />
+            <NitroCardContentView center>
+                <Flex gap={ 2 }>
+                    <Column justifyContent="between">
+                        <Text>{ LocalizeText('effectbox.header.description') }</Text>
+                        <Flex alignItems="center" justifyContent="between">
+                            <Button variant="danger" onClick={ close }>{ LocalizeText('generic.cancel') }</Button>
+                            <Button variant="success" onClick={ useProduct }>{ LocalizeText('generic.ok') }</Button>
+                        </Flex>
+                    </Column>
+                </Flex>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

src/views/room/widgets/furniture/context-menu/views/MonsterPlantSeedConfirmView.tsx

@@ -1,10 +1,16 @@
 import { IFurnitureData, RoomObjectCategory } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useState } from 'react';
-import { GetFurnitureDataForRoomObject, LocalizeText, RoomWidgetUseProductMessage } from '../../../../../../../api';
-import { FurniCategory } from '../../../../../../../components/inventory/common/FurniCategory';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../../layout';
-import { useRoomContext } from '../../../../../context/RoomContext';
-import { MonsterPlantSeedConfirmViewProps } from './MonsterPlantSeedConfirmView.types';
+import { FC, useEffect, useState } from 'react';
+import { GetFurnitureDataForRoomObject, LocalizeText, RoomWidgetUseProductMessage } from '../../../../../../api';
+import { Base, Button, Column, Flex, Text } from '../../../../../../common';
+import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
+import { useRoomContext } from '../../../../context/RoomContext';
+
+interface MonsterPlantSeedConfirmViewProps
+{
+    objectId: number;
+    close: () => void;
+}
 
 const MODE_DEFAULT: number = -1;
 const MODE_MONSTERPLANT_SEED: number = 0;
@@ -16,12 +22,12 @@ export const MonsterPlantSeedConfirmView: FC<MonsterPlantSeedConfirmViewProps> =
     const [ mode, setMode ] = useState(MODE_DEFAULT);
     const { roomSession = null, widgetHandler = null } = useRoomContext();
 
-    const useProduct = useCallback(() =>
+    const useProduct = () =>
     {
         widgetHandler.processWidgetMessage(new RoomWidgetUseProductMessage(RoomWidgetUseProductMessage.MONSTERPLANT_SEED, objectId));
 
         close();
-    }, [ widgetHandler, objectId, close ]);
+    }
 
     useEffect(() =>
     {
@@ -57,24 +63,24 @@ export const MonsterPlantSeedConfirmView: FC<MonsterPlantSeedConfirmViewProps> =
     return (
         <NitroCardView className="nitro-use-product-confirmation">
             <NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title.plant_seed', [ 'name' ], [ furniData.name ]) } onCloseClick={ close } />
-            <NitroCardContentView className="d-flex">
-                <div className="row">
-                    <div className="w-unset">
-                        <div className="product-preview">
-                            <div className="monsterplant-image" />
-                        </div>
-                    </div>
-                    <div className="col d-flex flex-column justify-content-between">
-                        <div className="d-flex flex-column">
-                            <div className="text-black mb-3">{ LocalizeText('useproduct.widget.text.plant_seed', [ 'productName' ], [ furniData.name ] ) }</div>
-                            <div className="text-black">{ LocalizeText('useproduct.widget.info.plant_seed') }</div>
-                        </div>
-                        <div className="d-flex justify-content-between align-items-end w-100 h-100">
-                            <button type="button" className="btn btn-danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</button>
-                            <button type="button" className="btn btn-primary" onClick={ useProduct }>{ LocalizeText('widget.monsterplant_seed.button.use') }</button>
-                        </div>
-                    </div>
-                </div>
+            <NitroCardContentView center>
+                <Flex gap={ 2 } overflow="hidden">
+                    <Column>
+                        <Base className="product-preview">
+                            <Base className="monsterplant-image" />
+                        </Base>
+                    </Column>
+                    <Column justifyContent="between" overflow="auto">
+                        <Column gap={ 2 }>
+                            <Text>{ LocalizeText('useproduct.widget.text.plant_seed', [ 'productName' ], [ furniData.name ] ) }</Text>
+                            <Text>{ LocalizeText('useproduct.widget.info.plant_seed') }</Text>
+                        </Column>
+                        <Flex alignItems="center" justifyContent="between">
+                            <Button variant="danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</Button>
+                            <Button variant="success" onClick={ useProduct }>{ LocalizeText('widget.monsterplant_seed.button.use') }</Button>
+                        </Flex>
+                    </Column>
+                </Flex>
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/room/widgets/furniture/context-menu/views/PurchasableClothingConfirmView.tsx

@@ -1,12 +1,18 @@
 import { RedeemItemClothingComposer, RoomObjectCategory, UserFigureComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useState } from 'react';
-import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager, LocalizeText } from '../../../../../../../api';
-import { FigureData } from '../../../../../../../components/avatar-editor/common/FigureData';
-import { FurniCategory } from '../../../../../../../components/inventory/common/FurniCategory';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../../layout';
-import { AvatarImageView } from '../../../../../../shared/avatar-image/AvatarImageView';
-import { useRoomContext } from '../../../../../context/RoomContext';
-import { PurchasableClothingConfirmViewProps } from './PurchasableClothingConfirmView.types';
+import { FC, useEffect, useState } from 'react';
+import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager, LocalizeText } from '../../../../../../api';
+import { Base, Button, Column, Flex, Text } from '../../../../../../common';
+import { FigureData } from '../../../../../../components/avatar-editor/common/FigureData';
+import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
+import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
+import { useRoomContext } from '../../../../context/RoomContext';
+
+interface PurchasableClothingConfirmViewProps
+{
+    objectId: number;
+    close: () => void;
+}
 
 const MODE_DEFAULT: number = -1;
 const MODE_PURCHASABLE_CLOTHING: number = 0;
@@ -19,13 +25,13 @@ export const PurchasableClothingConfirmView: FC<PurchasableClothingConfirmViewPr
     const [ newFigure, setNewFigure ] = useState<string>(null);
     const { roomSession = null } = useRoomContext();
 
-    const useProduct = useCallback(() =>
+    const useProduct = () =>
     {
         GetConnection().send(new RedeemItemClothingComposer(objectId));
         GetConnection().send(new UserFigureComposer(gender, newFigure));
 
         close();
-    }, [ objectId, gender, newFigure, close ]);
+    }
 
     useEffect(() =>
     {
@@ -78,24 +84,24 @@ export const PurchasableClothingConfirmView: FC<PurchasableClothingConfirmViewPr
     return (
         <NitroCardView className="nitro-use-product-confirmation">
             <NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title.bind_clothing') } onCloseClick={ close } />
-            <NitroCardContentView className="d-flex">
-                <div className="row">
-                    <div className="w-unset">
-                        <div className="mannequin-preview">
+            <NitroCardContentView center>
+                <Flex gap={ 2 } overflow="hidden">
+                    <Column>
+                        <Base className="mannequin-preview">
                             <AvatarImageView figure={ newFigure } direction={ 2 } />
-                        </div>
-                    </div>
-                    <div className="col d-flex flex-column justify-content-between">
-                        <div className="d-flex flex-column">
-                            <div className="text-black mb-3">{ LocalizeText('useproduct.widget.text.bind_clothing') }</div>
-                            <div className="text-black">{ LocalizeText('useproduct.widget.info.bind_clothing') }</div>
-                        </div>
-                        <div className="d-flex justify-content-between align-items-end w-100 h-100">
-                            <button type="button" className="btn btn-danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</button>
-                            <button type="button" className="btn btn-primary" onClick={ useProduct }>{ LocalizeText('useproduct.widget.bind_clothing') }</button>
-                        </div>
-                    </div>
-                </div>
+                        </Base>
+                    </Column>
+                    <Column justifyContent="between" overflow="auto">
+                        <Column gap={ 2 }>
+                            <Text>{ LocalizeText('useproduct.widget.text.bind_clothing') }</Text>
+                            <Text>{ LocalizeText('useproduct.widget.info.bind_clothing') }</Text>
+                        </Column>
+                        <Flex alignItems="center" justifyContent="between">
+                            <Button variant="danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</Button>
+                            <Button variant="success" onClick={ useProduct }>{ LocalizeText('useproduct.widget.bind_clothing') }</Button>
+                        </Flex>
+                    </Column>
+                </Flex>
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/room/widgets/furniture/context-menu/views/effect-box/EffectBoxConfirmView.tsx

@@ -1,37 +0,0 @@
-import { FC, useCallback } from 'react';
-import { LocalizeText } from '../../../../../../../api';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../../layout';
-import { useRoomContext } from '../../../../../context/RoomContext';
-import { EffectBoxConfirmViewProps } from './EffectBoxConfirmView.types';
-
-export const EffectBoxConfirmView: FC<EffectBoxConfirmViewProps> = props =>
-{
-    const { objectId = -1, close = null } = props;
-    const { roomSession = null, widgetHandler = null } = useRoomContext();
-
-    const useProduct = useCallback(() =>
-    {
-        roomSession.useMultistateItem(objectId);
-
-        close();
-    }, [ roomSession, objectId, close ]);
-    
-    return (
-        <NitroCardView className="nitro-use-product-confirmation">
-            <NitroCardHeaderView headerText={ LocalizeText('effectbox.header.title') } onCloseClick={ close } />
-            <NitroCardContentView className="d-flex">
-                <div className="row">
-                    <div className="col d-flex flex-column justify-content-between">
-                        <div className="d-flex flex-column">
-                            <div className="text-black">{ LocalizeText('effectbox.header.description') }</div>
-                        </div>
-                        <div className="d-flex justify-content-between align-items-end w-100 h-100">
-                            <button type="button" className="btn btn-danger" onClick={ close }>{ LocalizeText('generic.cancel') }</button>
-                            <button type="button" className="btn btn-primary" onClick={ useProduct }>{ LocalizeText('generic.ok') }</button>
-                        </div>
-                    </div>
-                </div>
-            </NitroCardContentView>
-        </NitroCardView>
-    );
-}

src/views/room/widgets/furniture/context-menu/views/effect-box/EffectBoxConfirmView.types.ts

@@ -1,5 +0,0 @@
-export interface EffectBoxConfirmViewProps
-{
-    objectId: number;
-    close: () => void;
-}

src/views/room/widgets/furniture/context-menu/views/monsterplant-seed/MonsterPlantSeedConfirmView.types.ts

@@ -1,5 +0,0 @@
-export interface MonsterPlantSeedConfirmViewProps
-{
-    objectId: number;
-    close: () => void;
-}

src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.types.ts

@@ -1,5 +0,0 @@
-export interface PurchasableClothingConfirmViewProps
-{
-    objectId: number;
-    close: () => void;
-}