Merge branch 'dev' of https://git.krews.org/nitro/nitro-react into dev

public/ui-config.json.example

@@ -14,6 +14,8 @@
     "camera.publish.disabled": false,
     "hc.disabled": false,
     "badge.descriptions.enabled": true,
+    "motto.max.length": 38,
+    "bot.name.max.length": 15,
     "hotelview": {
         "show.avatar": true,
         "widgets": {

src/components/catalog/CatalogMessageHandler.tsx

@@ -2,7 +2,7 @@ import { ApproveNameMessageEvent, CatalogPageMessageEvent, CatalogPagesListEvent
 import { GuildMembershipsMessageEvent } from '@nitrots/nitro-renderer/src/nitro/communication/messages/incoming/user/GuildMembershipsMessageEvent';
 import { FC, useCallback } from 'react';
 import { GetFurnitureData, GetProductDataForLocalization, LocalizeText, NotificationAlertType, NotificationUtilities } from '../../api';
-import { CatalogGiftReceiverNotFoundEvent, CatalogNameResultEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent, CatalogSetExtraPurchaseParameterEvent } from '../../events';
+import { CatalogGiftReceiverNotFoundEvent, CatalogNameResultEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent } from '../../events';
 import { BatchUpdates, DispatchUiEvent, UseMessageEventHook } from '../../hooks';
 import { useCatalogContext } from './CatalogContext';
 import { CatalogNode } from './common/CatalogNode';
@@ -20,7 +20,7 @@ import { SubscriptionInfo } from './common/SubscriptionInfo';
 
 export const CatalogMessageHandler: FC<{}> = props =>
 {
-    const { setIsBusy, pageId, currentType, setRootNode, setOffersToNodes, currentPage, setCurrentOffer, setFrontPageItems, resetState, showCatalogPage, setCatalogOptions = null } = useCatalogContext();
+    const { setIsBusy, pageId, currentType, setRootNode, setOffersToNodes, currentPage, setCurrentOffer, setFrontPageItems, resetState, showCatalogPage, setCatalogOptions, setPurchaseOptions } = useCatalogContext();
 
     const onCatalogPagesListEvent = useCallback((event: CatalogPagesListEvent) =>
     {
@@ -153,11 +153,21 @@ export const CatalogMessageHandler: FC<{}> = props =>
 
         if(offer.product && (offer.product.productType === ProductTypeEnum.WALL))
         {
-            DispatchUiEvent(new CatalogSetExtraPurchaseParameterEvent(offer.product.extraParam));
+            if(offer.product && (offer.product.productType === ProductTypeEnum.WALL))
+            {
+                setPurchaseOptions(prevValue =>
+                    {
+                        const newValue = { ...prevValue };
+        
+                        newValue.extraData =( offer.product.extraParam || null);
+        
+                        return newValue;
+                    });
+            }
         }
 
         // (this._isObjectMoverRequested) && (this._purchasableOffer)
-    }, [ currentType, currentPage, setCurrentOffer ]);
+    }, [ currentType, currentPage, setCurrentOffer, setPurchaseOptions ]);
 
     const onSellablePetPalettesMessageEvent = useCallback((event: SellablePetPalettesMessageEvent) =>
     {

src/components/catalog/CatalogView.tsx

@@ -39,7 +39,7 @@ export const CatalogView: FC<{}> = props =>
     const [ frontPageItems, setFrontPageItems ] = useState<FrontPageItem[]>([]);
     const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
     const [ navigationHidden, setNavigationHidden ] = useState(false);
-    const [ purchaseOptions, setPurchaseOptions ] = useState<IPurchaseOptions>({});
+    const [ purchaseOptions, setPurchaseOptions ] = useState<IPurchaseOptions>({ quantity: 1, extraData: null, extraParamRequired: false, previewStuffData: null });
     const [ catalogOptions, setCatalogOptions ] = useState<ICatalogOptions>({});
 
     const resetState = useCallback(() =>

src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx

@@ -22,9 +22,11 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
 
         setPurchaseOptions(prevValue =>
             {
-                const extraData = trophyText;
+                const newValue = { ...prevValue };
 
-                return { ...prevValue, extraData };
+                newValue.extraData = trophyText;
+
+                return newValue;
             });
     }, [ currentOffer, trophyText, setPurchaseOptions ]);
 

src/components/catalog/views/page/widgets/CatalogBadgeSelectorWidgetView.tsx

@@ -43,10 +43,13 @@ export const CatalogBadgeSelectorWidgetView: FC<CatalogBadgeSelectorWidgetViewPr
 
         setPurchaseOptions(prevValue =>
             {
-                const extraParamRequired = true;
+                const newValue = { ...prevValue };
-                const extraData = ((previewStuffData && previewStuffData.getValue(1)) || null);
 
-                return { ...prevValue, extraParamRequired, extraData, previewStuffData };
+                newValue.extraParamRequired = true;
+                newValue.extraData = ((previewStuffData && previewStuffData.getValue(1)) || null);
+                newValue.previewStuffData = previewStuffData;
+
+                return newValue;
             });
     }, [ currentOffer, previewStuffData, setPurchaseOptions ]);
 
@@ -57,10 +60,10 @@ export const CatalogBadgeSelectorWidgetView: FC<CatalogBadgeSelectorWidgetViewPr
 
     return (
         <AutoGrid columnCount={ columnCount } { ...rest }>
-            { badges && (badges.length > 0) && badges.map(code =>
+            { badges && (badges.length > 0) && badges.map((code, index) =>
                 {
                     return (
-                        <LayoutGridItem key={ code } itemActive={ (currentBadge === code) } onClick={ event => setCurrentBadge(code) }> 
+                        <LayoutGridItem key={ index } itemActive={ (currentBadge === code) } onClick={ event => setCurrentBadge(code) }> 
                             <LayoutBadgeImageView badgeCode={ code } />
                         </LayoutGridItem>
                     );

src/components/catalog/views/page/widgets/CatalogGuildSelectorWidgetView.tsx

@@ -31,10 +31,13 @@ export const CatalogGuildSelectorWidgetView: FC<{}> = props =>
 
         setPurchaseOptions(prevValue =>
             {
-                const extraParamRequired = true;
+                const newValue = { ...prevValue };
-                const extraData = ((previewStuffData && previewStuffData.getValue(1)) || null);
 
-                return { ...prevValue, extraParamRequired, extraData, previewStuffData };
+                newValue.extraParamRequired = true;
+                newValue.extraData = ((previewStuffData && previewStuffData.getValue(1)) || null);
+                newValue.previewStuffData = previewStuffData;
+
+                return newValue;
             });
     }, [ currentOffer, previewStuffData, setPurchaseOptions ]);
 

src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx

@@ -1,7 +1,5 @@
 import { FC } from 'react';
 import { AutoGrid, AutoGridProps } from '../../../../../common/AutoGrid';
-import { CatalogSetExtraPurchaseParameterEvent } from '../../../../../events';
-import { DispatchUiEvent } from '../../../../../hooks';
 import { useCatalogContext } from '../../../CatalogContext';
 import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
 import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
@@ -15,7 +13,7 @@ interface CatalogItemGridWidgetViewProps extends AutoGridProps
 export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = props =>
 {
     const { columnCount = 5, children = null, ...rest } = props;
-    const { currentOffer = null, setCurrentOffer = null, currentPage = null } = useCatalogContext();
+    const { currentOffer = null, setCurrentOffer = null, currentPage = null, setPurchaseOptions = null } = useCatalogContext();
 
     if(!currentPage) return null;
 
@@ -29,7 +27,14 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
 
         if(offer.product && (offer.product.productType === ProductTypeEnum.WALL))
         {
-            setTimeout(() => DispatchUiEvent(new CatalogSetExtraPurchaseParameterEvent(offer.product.extraParam)), 0);
+            setPurchaseOptions(prevValue =>
+                {
+                    const newValue = { ...prevValue };
+    
+                    newValue.extraData = (offer.product.extraParam || null);
+    
+                    return newValue;
+                });
         }
     }
 

src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx

@@ -2,7 +2,7 @@ import { PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { CreateLinkEvent, GetClubMemberLevel, LocalizeText, SendMessageComposer } from '../../../../../api';
 import { Button, LayoutLoadingSpinnerView } from '../../../../../common';
-import { CatalogEvent, CatalogInitGiftEvent, CatalogInitPurchaseEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent, CatalogSetExtraPurchaseParameterEvent, CatalogWidgetEvent } from '../../../../../events';
+import { CatalogEvent, CatalogInitGiftEvent, CatalogInitPurchaseEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent, CatalogWidgetEvent } from '../../../../../events';
 import { DispatchUiEvent, UseUiEvent } from '../../../../../hooks';
 import { GetCurrencyAmount } from '../../../../purse/common/CurrencyHelper';
 import { useCatalogContext } from '../../../CatalogContext';
@@ -32,22 +32,6 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
 
     UseUiEvent(CatalogWidgetEvent.INIT_PURCHASE, onCatalogInitPurchaseEvent);
 
-    const onCatalogSetExtraPurchaseParameterEvent = useCallback((event: CatalogSetExtraPurchaseParameterEvent) =>
-    {
-        if(!currentOffer) return;
-
-        setPurchaseOptions(prevValue =>
-            {
-                const newValue = { ...prevValue };
-
-                newValue.extraData = event.parameter;
-
-                return newValue;
-            });
-    }, [ currentOffer, setPurchaseOptions ]);
-
-    UseUiEvent(CatalogWidgetEvent.SET_EXTRA_PARM, onCatalogSetExtraPurchaseParameterEvent);
-
     const onCatalogEvent = useCallback((event: CatalogEvent) =>
     {
         switch(event.type)
@@ -134,7 +118,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
         return () =>
         {
             setPurchaseState(CatalogPurchaseState.NONE);
-            setPurchaseOptions({ quantity: 1, extraData: '', extraParamRequired: false, previewStuffData: null });
+            setPurchaseOptions({ quantity: 1, extraData: null, extraParamRequired: false, previewStuffData: null });
         }
     }, [ currentOffer, setPurchaseOptions ]);
 

src/components/catalog/views/page/widgets/CatalogSpacesWidgetView.tsx

@@ -77,10 +77,12 @@ export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =
 
         setPurchaseOptions(prevValue =>
             {
-                const extraData = selectedOfferForGroup[selectedGroupIndex].product.extraParam;
+                const newValue = { ...prevValue };
-                const extraParamRequired = true;
+                
+                newValue.extraData = selectedOfferForGroup[selectedGroupIndex].product.extraParam;
+                newValue.extraParamRequired = true;
 
-                return { ...prevValue, extraData, extraParamRequired };
+                return newValue;
             });
     }, [ currentOffer, selectedGroupIndex, selectedOfferForGroup, setPurchaseOptions ]);
 

src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx

@@ -24,9 +24,11 @@ export const CatalogSpinnerWidgetView: FC<{}> = props =>
 
         setPurchaseOptions(prevValue =>
             {
-                const quantity = value;
+                const newValue = { ...prevValue };
 
-                return { ...prevValue, quantity };
+                newValue.quantity = value;
+
+                return newValue;
             });
     }
 

src/components/inventory/views/badge/InventoryBadgeView.tsx

@@ -91,7 +91,7 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
                 { badge && (badge.length > 0) &&
                     <Column grow justifyContent="end" gap={ 2 }>
                         <Flex alignItems="center" gap={ 2 }>
-                            <LayoutBadgeImageView badgeCode={ badge } />
+                            <LayoutBadgeImageView shrink badgeCode={ badge } />
                             <Text>{ LocalizeBadgeName(badge) }</Text>
                         </Flex>
                         <Button variant={ (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</Button>

src/components/mod-tools/views/user/ModToolsUserModActionView.tsx

@@ -58,7 +58,10 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
 
     const sendDefaultSanction = () =>
     {
+        let errorMessage: string = null;
         const category = topics[selectedTopic];
+        if(selectedTopic === -1) errorMessage = 'You must select a CFH topic';
+        if(errorMessage) return sendAlert(errorMessage);
         const messageOrDefault = (message.trim().length === 0) ? LocalizeText(`help.cfh.topic.${category.id}`) : message;
         SendMessageComposer(new DefaultSanctionMessageComposer(user.userId, selectedTopic, messageOrDefault));
         onCloseClick();

src/components/room/widgets/avatar-info/AvatarInfoWidgetRentableBotView.tsx

@@ -1,6 +1,6 @@
 import { BotCommandConfigurationEvent, BotRemoveComposer, BotSkillSaveComposer, RequestBotCommandConfigurationComposer, RoomObjectCategory, RoomObjectType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { GetNitroInstance, LocalizeText, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateRentableBotChatEvent, SendMessageComposer } from '../../../../api';
+import { GetConfiguration, GetNitroInstance, LocalizeText, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateRentableBotChatEvent, SendMessageComposer } from '../../../../api';
 import { Button, Column, Flex, Text } from '../../../../common';
 import { UseMessageEventHook } from '../../../../hooks';
 import { useRoomContext } from '../../RoomContext';
@@ -182,7 +182,7 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
             { (mode === MODE_CHANGE_NAME) &&
                 <Column className="menu-item" onClick={ null } gap={ 1 }>
                     <Text variant="white">{ LocalizeText('bot.skill.name.configuration.new.name') }</Text>
-                    <input type="text" className="form-control form-control-sm" value={ newName } onChange={ event => setNewName(event.target.value) } />
+                    <input type="text" className="form-control form-control-sm" value={ newName } maxLength={ GetConfiguration<number>('bot.name.max.length', 15) } onChange={ event => setNewName(event.target.value) } />
                     <Flex alignItems="center" justifyContent="between" gap={ 1 }>
                         <Button fullWidth variant="secondary" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</Button>
                         <Button fullWidth variant="success" onClick={ event => processAction('save_bot_name') }>{ LocalizeText('save') }</Button>
@@ -191,7 +191,7 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
             { (mode === MODE_CHANGE_MOTTO) &&
                 <Column className="menu-item" onClick={ null } gap={ 1 }>
                     <Text variant="white">{ LocalizeText('bot.skill.name.configuration.new.motto') }</Text>
-                    <input type="text" className="form-control form-control-sm" value={ newMotto } onChange={ event => setNewMotto(event.target.value) } />
+                    <input type="text" className="form-control form-control-sm" value={ newMotto } maxLength={ GetConfiguration<number>('motto.max.legnth', 38) } onChange={ event => setNewMotto(event.target.value) } />
                     <Flex alignItems="center" justifyContent="between" gap={ 1 }>
                         <Button fullWidth variant="secondary" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</Button>
                         <Button fullWidth variant="success" onClick={ event => processAction('save_bot_motto') }>{ LocalizeText('save') }</Button>

src/components/room/widgets/context-menu/ContextMenuView.tsx

@@ -28,7 +28,7 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
     const [ opacity, setOpacity ] = useState(1);
     const [ isFading, setIsFading ] = useState(false);
     const [ fadeTime, setFadeTime ] = useState(0);
-    const [ frozen, setFrozen ] = useState(false);
+    const [ isFrozen, setIsFrozen ] = useState(false);
     const elementRef = useRef<HTMLDivElement>();
 
     const getOffset = useCallback((bounds: NitroRectangle) =>
@@ -156,7 +156,7 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
     {
         let added = false;
 
-        if(!frozen)
+        if(!isFrozen)
         {
             added = true;
 
@@ -167,7 +167,7 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
         {
             if(added) GetTicker().remove(update);
         }
-    }, [ frozen, update ]);
+    }, [ isFrozen, update ]);
 
     useEffect(() =>
     {
@@ -178,5 +178,5 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
         return () => clearTimeout(timeout);
     }, [ fades ]);
 
-    return <Base innerRef={ elementRef } position={ position } classNames={ getClassNames } style={ getStyle } { ...rest } />;
+    return <Base innerRef={ elementRef } position={ position } classNames={ getClassNames } style={ getStyle } onMouseOver={ event => setIsFrozen(true) } onMouseOut={ event => setIsFrozen(false) } { ...rest } />;
 }

src/components/room/widgets/infostand/InfoStandWidgetUserView.tsx

@@ -25,7 +25,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
 
     const saveMotto = (motto: string) =>
     {
-        if(!isEditingMotto || (motto.length > 38)) return;
+        if(!isEditingMotto || (motto.length > GetConfiguration<number>('motto.max.legnth', 38))) return;
 
         widgetHandler.processWidgetMessage(new RoomWidgetChangeMottoMessage(motto));
 
@@ -195,7 +195,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                                     { !isEditingMotto &&
                                         <Text fullWidth pointer wrap textBreak small variant="white" onClick={ event => setIsEditingMotto(true) }>{ motto }&nbsp;</Text> }
                                     { isEditingMotto &&
-                                        <input type="text" className="motto-input" maxLength={ 38 } value={ motto } onChange={ event => setMotto(event.target.value) } onBlur={ onMottoBlur } onKeyDown={ onMottoKeyDown } autoFocus={ true } /> }
+                                        <input type="text" className="motto-input" maxLength={ GetConfiguration<number>('motto.max.legnth', 38) } value={ motto } onChange={ event => setMotto(event.target.value) } onBlur={ onMottoBlur } onKeyDown={ onMottoKeyDown } autoFocus={ true } /> }
                                 </Flex>
                             </Flex> }
                     </Flex>

src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx

@@ -9,12 +9,12 @@ import { useRoomContext } from '../../RoomContext';
 
 export const RoomToolsWidgetView: FC<{}> = props =>
 {
-    const [ isZoomedIn, setIsZoomedIn ] = useState(false);
+    const [ isZoomedIn, setIsZoomedIn ] = useState<boolean>(false);
-    const [ roomName, setRoomName ] = useState(null);
+    const [ roomName, setRoomName ] = useState<string>(null);
-    const [ roomOwner, setRoomOwner ] = useState(null);
+    const [ roomOwner, setRoomOwner ] = useState<string>(null);
-    const [ roomTags, setRoomTags ] = useState(null);
+    const [ roomTags, setRoomTags ] = useState<string[]>(null);
-    const [ roomInfoDisplay, setRoomInfoDisplay ] = useState(false);
+    const [ roomInfoDisplay, setRoomInfoDisplay ] = useState<boolean>(false);
-    const [ isOpen, setIsOpen ] = useState(false);
+    const [ isOpen, setIsOpen ] = useState<boolean>(false);
     const [ navigatorData, setNavigatorData ] = useSharedState<NavigatorData>('@navigatorData');
     const { widgetHandler = null } = useRoomContext();
 
@@ -85,7 +85,7 @@ export const RoomToolsWidgetView: FC<{}> = props =>
                             </Column>
                             { roomTags && roomTags.length > 0 &&
                                 <Flex gap={ 2 }>
-                                    { roomTags.map((tag: string) => <Text small variant="white" className="rounded bg-primary p-1">#{ tag }</Text>) }
+                                    { roomTags.map((tag, index) => <Text key={ index } small variant="white" className="rounded bg-primary p-1">#{ tag }</Text>) }
                                 </Flex> }
                         </Column>
                     </Column>

src/events/catalog/CatalogSetExtraPurchaseParameterEvent.ts

@@ -1,19 +0,0 @@
-import { NitroEvent } from '@nitrots/nitro-renderer';
-import { CatalogWidgetEvent } from './CatalogWidgetEvent';
-
-export class CatalogSetExtraPurchaseParameterEvent extends NitroEvent
-{
-    private _parameter: string;
-
-    constructor(parameter: string)
-    {
-        super(CatalogWidgetEvent.SET_EXTRA_PARM);
-
-        this._parameter = parameter;
-    }
-
-    public get parameter(): string
-    {
-        return this._parameter;
-    }
-}

src/events/catalog/index.ts

@@ -9,7 +9,6 @@ export * from './CatalogPurchaseFailureEvent';
 export * from './CatalogPurchaseNotAllowedEvent';
 export * from './CatalogPurchaseOverrideEvent';
 export * from './CatalogPurchaseSoldOutEvent';
-export * from './CatalogSetExtraPurchaseParameterEvent';
 export * from './CatalogSetRoomPreviewerStuffDataEvent';
 export * from './CatalogWidgetEvent';
 export * from './SetRoomPreviewerStuffDataEvent';