Update choosers

package-lock.json

@@ -4082,6 +4082,16 @@
         "@types/react": "*"
       }
     },
+    "@types/react-virtualized": {
+      "version": "9.21.13",
+      "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.13.tgz",
+      "integrity": "sha512-tCIQ5wDKj+QJ3sMzjPKSLY0AXsznt+ovAUcq+JCLjPBOcAHbPt4FraGT9HKYEFfmp9E6+ELuN49i5bWtuBmi3w==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",

package.json

@@ -55,6 +55,7 @@
     "@types/react": "^17.0.15",
     "@types/react-dom": "^17.0.9",
     "@types/react-slider": "^1.3.1",
-    "@types/react-transition-group": "^4.4.2"
+    "@types/react-transition-group": "^4.4.2",
+    "@types/react-virtualized": "^9.21.13"
   }
 }

src/events/room-widgets/index.ts

@@ -1 +1,2 @@
 export * from './camera';
+export * from './thumbnail';

src/views/room/events/RoomObjectItem.ts

@@ -1,8 +1,8 @@
 export class RoomObjectItem
 {
-    private readonly _id: number;
+    private _id: number;
-    private readonly _category: number;
+    private _category: number;
-    private readonly _name: string;
+    private _name: string;
 
     constructor(id: number, category: number, name: string)
     {

src/views/room/events/RoomWidgetChooserContentEvent.ts

@@ -1,5 +1,5 @@
-import { RoomWidgetUpdateEvent } from '../../../views/room/events';
 import { RoomObjectItem } from './RoomObjectItem';
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
 
 export class RoomWidgetChooserContentEvent extends RoomWidgetUpdateEvent
 {
@@ -7,23 +7,16 @@ export class RoomWidgetChooserContentEvent extends RoomWidgetUpdateEvent
     public static FURNI_CHOOSER_CONTENT: string = 'RWCCE_FURNI_CHOOSER_CONTENT';
 
     private _items: RoomObjectItem[];
-    private _isAnyRoomController: boolean;
 
-    constructor(type: string, items: RoomObjectItem[], isAnyRoomController: boolean = false)
+    constructor(type: string, items: RoomObjectItem[])
     {
         super(type);
 
-        this._items = items.slice();
+        this._items = items;
-        this._isAnyRoomController = isAnyRoomController;
     }
 
     public get items(): RoomObjectItem[]
     {
         return this._items;
     }
-
-    public get isAnyRoomController(): boolean
-    {
-        return this._isAnyRoomController;
-    }
 }

src/views/room/events/index.ts

@@ -1,4 +1,6 @@
+export * from './RoomObjectItem';
 export * from './RoomWidgetAvatarInfoEvent';
+export * from './RoomWidgetChooserContentEvent';
 export * from './RoomWidgetDoorbellEvent';
 export * from './RoomWidgetFloodControlEvent';
 export * from './RoomWidgetObjectNameEvent';

src/views/room/handlers/FurniChooserWidgetHandler.ts

@@ -1,11 +1,8 @@
 import { NitroEvent, RoomObjectCategory, RoomObjectVariable, RoomWidgetEnum } from '@nitrots/nitro-renderer';
-import { GetNitroInstance, GetRoomEngine, GetSessionDataManager } from '../../../api';
+import { GetRoomEngine, GetSessionDataManager } from '../../../api';
-import { RoomObjectItem } from '../../../events/room-widgets/choosers/RoomObjectItem';
+import { LocalizeText } from '../../../utils';
-import { RoomWidgetChooserContentEvent } from '../../../events/room-widgets/choosers/RoomWidgetChooserContentEvent';
+import { RoomObjectItem, RoomWidgetChooserContentEvent, RoomWidgetUpdateEvent } from '../events';
-import { dispatchUiEvent } from '../../../hooks';
-import { RoomWidgetUpdateEvent } from '../events';
 import { RoomWidgetMessage, RoomWidgetRequestWidgetMessage, RoomWidgetRoomObjectMessage } from '../messages';
-import { dynamicSort } from '../widgets/choosers/utils/sorting';
 import { RoomWidgetHandler } from './RoomWidgetHandler';
 
 export class FurniChooserWidgetHandler extends RoomWidgetHandler
@@ -21,78 +18,68 @@ export class FurniChooserWidgetHandler extends RoomWidgetHandler
         switch(message.type)
         {
             case RoomWidgetRequestWidgetMessage.FURNI_CHOOSER:
-                this.processFurniChooser();
+                this.processChooser();
                 break;
             case RoomWidgetRoomObjectMessage.SELECT_OBJECT:
-                this.selectFurni(message);
+                this.selectRoomObject((message as RoomWidgetRoomObjectMessage));
                 break;
         }
 
         return null;
     }
 
-    private selectFurni(message: RoomWidgetMessage): void
+    private processChooser(): void
     {
-        const event = message as RoomWidgetRoomObjectMessage;
-
-        if(event == null) return;
-
-        if(event.category === RoomObjectCategory.WALL || event.category === RoomObjectCategory.FLOOR)
-        {
-            GetRoomEngine().selectRoomObject(this.container.roomSession.roomId, event.id, event.category);
-        }
-    }
-
-    private processFurniChooser(): void
-    {
-
-        if(this.container == null || this.container.roomSession == null || GetRoomEngine() == null || this.container.roomSession.userDataManager == null) return;
-
         const roomId = this.container.roomSession.roomId;
-        const furniInRoom : RoomObjectItem[] = [];
+        const items: RoomObjectItem[] = [];
 
         const wallItems = GetRoomEngine().getRoomObjects(roomId, RoomObjectCategory.WALL);
         const floorItems = GetRoomEngine().getRoomObjects(roomId, RoomObjectCategory.FLOOR);
 
-        wallItems.forEach( wallItem => {
+        wallItems.forEach(roomObject =>
-            if(!wallItem) return;
-
-            const type = wallItem.type;
-            let name = null;
-            if(type.startsWith('poster'))
             {
-                const posterNumber = Number.parseInt(type.replace('poster', ''));
+                let name = roomObject.type;
-                name = GetNitroInstance().localization.getValue('poster_' + posterNumber + '_name');
+
+                if(name.startsWith('poster'))
+                {
+                    name = LocalizeText(`poster_${ name.replace('poster', '') }_name`);
                 }
                 else
                 {
-                const furniTypeId = Number.parseInt(wallItem.model.getValue(RoomObjectVariable.FURNITURE_TYPE_ID));
+                    const typeId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_TYPE_ID);
-                const wallItemData = GetSessionDataManager().getWallItemData(furniTypeId);
+                    const furniData = GetSessionDataManager().getWallItemData(typeId);
-                if(wallItemData != null && wallItemData.name.length > 0)
+
-                {
+                    if(furniData && furniData.name.length) name = furniData.name;
-                    name = wallItemData.name;
                 }
-                else
+
-                {
+                items.push(new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name));
-                    name = type;
-                }
-            }
-           furniInRoom.push(new RoomObjectItem(wallItem.id, RoomObjectCategory.WALL, name));
             });
 
-        floorItems.forEach(roomObject => {
+        floorItems.forEach(roomObject =>
-            if(!roomObject) return;
+            {
+                let name = roomObject.type;
 
-            const furniTypeId = Number.parseInt(roomObject.model.getValue(RoomObjectVariable.FURNITURE_TYPE_ID));
+                const typeId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_TYPE_ID);
-            const floorItemData = GetSessionDataManager().getFloorItemData(furniTypeId);
+                const furniData = GetSessionDataManager().getFloorItemData(typeId);
-            const name = floorItemData != null ? floorItemData.name : roomObject.type;
 
-            furniInRoom.push(new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name));
+                if(furniData && furniData.name.length) name = furniData.name;
+
+                items.push(new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name));
             });
 
-        furniInRoom.sort(dynamicSort('name'));
+        items.sort((a, b) =>
+            {
+                return (a.name < b.name) ? -1 : 1;
+            });
 
-        dispatchUiEvent(new RoomWidgetChooserContentEvent(RoomWidgetChooserContentEvent.FURNI_CHOOSER_CONTENT, furniInRoom, false));
+        this.container.eventDispatcher.dispatchEvent(new RoomWidgetChooserContentEvent(RoomWidgetChooserContentEvent.FURNI_CHOOSER_CONTENT, items));
+    }
+
+    private selectRoomObject(message: RoomWidgetRoomObjectMessage): void
+    {
+        if(message.category !== RoomObjectCategory.WALL || message.category !== RoomObjectCategory.FLOOR) return;
+        
+        GetRoomEngine().selectRoomObject(this.container.roomSession.roomId, message.id, message.category);
     }
     
     public get type(): string

src/views/room/handlers/UserChooserWidgetHandler.ts

@@ -1,12 +1,8 @@
 import { NitroEvent, RoomObjectCategory, RoomWidgetEnum } from '@nitrots/nitro-renderer';
 import { RoomWidgetHandler } from '.';
 import { GetRoomEngine } from '../../../api';
-import { RoomObjectItem } from '../../../events/room-widgets/choosers/RoomObjectItem';
+import { RoomObjectItem, RoomWidgetChooserContentEvent, RoomWidgetUpdateEvent } from '../events';
-import { RoomWidgetChooserContentEvent } from '../../../events/room-widgets/choosers/RoomWidgetChooserContentEvent';
-import { dispatchUiEvent } from '../../../hooks';
-import { RoomWidgetUpdateEvent } from '../events';
 import { RoomWidgetMessage, RoomWidgetRequestWidgetMessage, RoomWidgetRoomObjectMessage } from '../messages';
-import { dynamicSort } from '../widgets/choosers/utils/sorting';
 
 export class UserChooserWidgetHandler extends RoomWidgetHandler
 {
@@ -21,51 +17,45 @@ export class UserChooserWidgetHandler extends RoomWidgetHandler
         switch(message.type)
         {
             case RoomWidgetRequestWidgetMessage.USER_CHOOSER:
-                this.processUserChooser();
+                this.processChooser();
                 break;
             case RoomWidgetRoomObjectMessage.SELECT_OBJECT:
-                this.selectUnit(message);
+                this.selectRoomObject((message as RoomWidgetRoomObjectMessage));
                 break;
         }
 
         return null;
     }
 
-    private processUserChooser(): void
+    private processChooser(): void
     {
-
-        if(this.container == null || this.container.roomSession == null || GetRoomEngine() == null || this.container.roomSession.userDataManager == null) return;
-
         const roomId = this.container.roomSession.roomId;
-        const categoryId = RoomObjectCategory.UNIT;
+        const items: RoomObjectItem[] = [];
-        const units : RoomObjectItem[] = [];
 
-        const roomObjects = GetRoomEngine().getRoomObjects(roomId, categoryId);
+        const userItems = GetRoomEngine().getRoomObjects(roomId, RoomObjectCategory.UNIT);
 
-        roomObjects.forEach(roomObject => {
+        userItems.forEach(roomObject =>
-            if(!roomObject) return;
+            {
+                const userData = this.container.roomSession.userDataManager.getUserDataByIndex(roomObject.id);
 
-            const unitData = this.container.roomSession.userDataManager.getUserDataByIndex(roomObject.id);
+                if(!userData) return;
 
-            if(!unitData) return;
+                items.push(new RoomObjectItem(userData.roomIndex, RoomObjectCategory.UNIT, userData.name));
-
-            units.push(new RoomObjectItem(unitData.roomIndex, categoryId, unitData.name));
             });
 
-        units.sort(dynamicSort('name'));
+        items.sort((a, b) =>
-        dispatchUiEvent(new RoomWidgetChooserContentEvent(RoomWidgetChooserContentEvent.USER_CHOOSER_CONTENT, units));
+        {
+            return (a.name < b.name) ? -1 : 1;
+        });
+
+        this.container.eventDispatcher.dispatchEvent(new RoomWidgetChooserContentEvent(RoomWidgetChooserContentEvent.USER_CHOOSER_CONTENT, items));
     }
 
-    private selectUnit(k: RoomWidgetMessage): void
+    private selectRoomObject(message: RoomWidgetRoomObjectMessage): void
     {
-        const event = k as RoomWidgetRoomObjectMessage;
+        if(message.category !== RoomObjectCategory.UNIT) return;
         
-        if(event == null) return;
+        GetRoomEngine().selectRoomObject(this.container.roomSession.roomId, message.id, message.category);
-
-        if(event.category === RoomObjectCategory.UNIT)
-        {
-            GetRoomEngine().selectRoomObject(this.container.roomSession.roomId, event.id, event.category);
-        }
     }
     
     public get type(): string

src/views/room/widgets/choosers/ChooserWidgetView.scss

@@ -1,9 +1,11 @@
-.chooser-widget {
+.nitro-chooser-widget {
-    .selected-item {
+
-        background-color: cadetblue;
-    }
     .list-item {
         color: black;
         overflow: hidden;
+
+        &.selected {
+            background-color: cadetblue;
+        }
     }
 }

src/views/room/widgets/choosers/ChooserWidgetView.tsx

@@ -1,86 +1,65 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useCallback, useMemo, useState } from 'react';
-import List from 'react-virtualized/dist/commonjs/List';
+import { List, ListRowProps, ListRowRenderer } from 'react-virtualized';
-import { RoomObjectItem } from '../../../../events/room-widgets/choosers/RoomObjectItem';
-import { CreateEventDispatcherHook } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { LocalizeText } from '../../../../utils';
 import { useRoomContext } from '../../context/RoomContext';
-import { RoomWidgetRoomObjectUpdateEvent } from '../../events';
+import { RoomObjectItem } from '../../events';
-import { RoomWidgetRequestWidgetMessage, RoomWidgetRoomObjectMessage } from '../../messages';
+import { RoomWidgetRoomObjectMessage } from '../../messages';
 import { ChooserWidgetViewProps } from './ChooserWidgetView.type';
 
 export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
 {
-    const [filteredItems, setFilteredItems] = useState<RoomObjectItem[]>([]);
+    const { title = null, items = null, displayItemId = false, onCloseClick = null } = props;
-    const [selectedItem, setSelectedItem] = useState<RoomObjectItem>(null);
+    const [ selectedItem, setSelectedItem ] = useState<RoomObjectItem>(null);
-    const [refreshTimeout, setRefreshTimeout] = useState<ReturnType<typeof setTimeout>>(null);
+    const [ searchValue, setSearchValue ] = useState('');
-    const [searchValue, setSearchValue] = useState('');
-    const { title = null, onCloseClick = null, displayItemId = false, items = null, messageType = null, roomWidgetRoomObjectUpdateEvents = null } = props;
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
 
-    useEffect(() =>
+    const filteredItems = useMemo(() =>
     {
-        if (!items) return;
+        if(!items) return [];
 
-        const filteredGroupItems = items.filter(item =>
+        if(!searchValue || !searchValue.length) return items;
+
+        const value = searchValue.toLocaleLowerCase();
+
+        return items.filter(item =>
             {
-            return item.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
+                return item.name.toLocaleLowerCase().includes(value);
             });
+    }, [ items, searchValue ]);
 
-        setFilteredItems(filteredGroupItems);
+    const onItemClick = useCallback((item: RoomObjectItem) =>
-    }, [items, searchValue, setFilteredItems]);
-
-    const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) =>
-    {
-        if (!event) return;
-
-        if (refreshTimeout) clearTimeout(refreshTimeout);
-
-        setRefreshTimeout(setTimeout(() =>
-        {
-            widgetHandler.processWidgetMessage(new RoomWidgetRequestWidgetMessage(messageType));
-        }, 100));
-
-    }, [refreshTimeout, messageType, widgetHandler]);
-
-    roomWidgetRoomObjectUpdateEvents.forEach(event => CreateEventDispatcherHook(event, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent));
-
-    const onClickItem = useCallback((item: RoomObjectItem) =>
     {
         setSelectedItem(item);
         widgetHandler.processWidgetMessage(new RoomWidgetRoomObjectMessage(RoomWidgetRoomObjectMessage.SELECT_OBJECT, item.id, item.category));
-    }, [setSelectedItem, widgetHandler]);
+    }, [ widgetHandler, setSelectedItem]);
 
-    const rowRenderer = function ({
+    const rowRenderer: ListRowRenderer = (props: ListRowProps) =>
-        key, // Unique key within array of rows
-        index, // Index of row within collection
-        isScrolling, // The List is currently being scrolled
-        isVisible, // This row is visible within the List (eg it is not an overscanned row)
-        style, // Style object to be applied to row (to position it)
-    })
     {
+        const item = filteredItems[props.index];
+
         return (
-            <div key={key} style={style} onClick={() => onClickItem(filteredItems[index])} className={(selectedItem === filteredItems[index] ? 'selected-item ' : '') + 'list-item'}>
+            <div key={ props.key } className={ 'list-item' + ((selectedItem === item) ? ' selected' : '') } style={ props.style } onClick={ () => onItemClick(item) }>
-                {filteredItems[index].name}
+                { item.name } { displayItemId && (' - ' + item.id) }
-                {displayItemId && (' - ' + filteredItems[index].id)}
             </div>
         );
     }
 
     return (
-        <NitroCardView>
+        <NitroCardView className="nitro-chooser-widget">
-            <NitroCardHeaderView headerText={title} onCloseClick={onCloseClick}></NitroCardHeaderView>
+            <NitroCardHeaderView headerText={ title } onCloseClick={ onCloseClick } />
             <NitroCardContentView>
                 <div className="d-flex mb-1">
                     <div className="d-flex flex-grow-1 me-1">
-                        <input type="text" className="form-control form-control-sm" placeholder={LocalizeText('generic.search')} value={searchValue} onChange={event => setSearchValue(event.target.value)} />
+                        <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={searchValue} onChange={event => setSearchValue(event.target.value)} />
                     </div>
                 </div>
-                <List width={150}
+                <List
-                    height={150}
+                    width={ 150 }
-                    rowCount={filteredItems.length}
+                    height={ 150 }
-                    rowHeight={20}
+                    rowCount={ filteredItems.length }
-                    rowRenderer={rowRenderer} />
+                    rowHeight={ 20 }
+                    rowRenderer={ rowRenderer } />
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/room/widgets/choosers/ChooserWidgetView.type.ts

@@ -1,12 +1,9 @@
-import { MouseEvent } from 'react';
+import { RoomObjectItem } from '../../events';
-import { RoomObjectItem } from '../../../../events/room-widgets/choosers/RoomObjectItem';
 
 export interface ChooserWidgetViewProps
 {
     title: string;
-    onCloseClick: (event: MouseEvent) => void;
-    displayItemId: boolean;
     items: RoomObjectItem[];
-    messageType: string;
+    displayItemId: boolean;
-    roomWidgetRoomObjectUpdateEvents: string[];
+    onCloseClick: () => void;
 }

src/views/room/widgets/choosers/FurniChooserWidgetView.tsx

@@ -1,27 +1,55 @@
 import { FC, useCallback, useState } from 'react';
-import { RoomObjectItem } from '../../../../events/room-widgets/choosers/RoomObjectItem';
+import { CreateEventDispatcherHook } from '../../../../hooks';
-import { RoomWidgetChooserContentEvent } from '../../../../events/room-widgets/choosers/RoomWidgetChooserContentEvent';
-import { useUiEvent } from '../../../../hooks';
 import { LocalizeText } from '../../../../utils';
-import { RoomWidgetRoomObjectUpdateEvent } from '../../events';
+import { useRoomContext } from '../../context/RoomContext';
+import { RoomObjectItem, RoomWidgetChooserContentEvent, RoomWidgetRoomObjectUpdateEvent } from '../../events';
 import { RoomWidgetRequestWidgetMessage } from '../../messages';
 import { ChooserWidgetView } from './ChooserWidgetView';
 
-export const FurniChooserWidgetView: FC = props =>
+export const FurniChooserWidgetView: FC<{}> = props =>
 {
-    const [isVisible, setIsVisible] = useState(false);
+    const [ isVisible, setIsVisible ] = useState(false);
-    const [items, setItems] = useState<RoomObjectItem[]>(null);
+    const [ items, setItems ] = useState<RoomObjectItem[]>(null);
+    const [ refreshTimeout, setRefreshTimeout ] = useState<ReturnType<typeof setTimeout>>(null);
+    const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
 
-    const onFurniChooserContent = useCallback((event: RoomWidgetChooserContentEvent) =>
+    const refreshChooser = useCallback(() =>
+    {
+        if(!isVisible) return;
+
+        setRefreshTimeout(prevValue =>
+            {
+                if(prevValue) clearTimeout(prevValue);
+
+                return setTimeout(() => widgetHandler.processWidgetMessage(new RoomWidgetRequestWidgetMessage(RoomWidgetRequestWidgetMessage.FURNI_CHOOSER)), 100);
+            })
+    }, [ isVisible, widgetHandler ]);
+
+    const onRoomWidgetChooserContentEvent = useCallback((event: RoomWidgetChooserContentEvent) =>
     {
         setItems(event.items);
         setIsVisible(true);
     }, []);
 
-    useUiEvent(RoomWidgetChooserContentEvent.FURNI_CHOOSER_CONTENT, onFurniChooserContent);
+    CreateEventDispatcherHook(RoomWidgetChooserContentEvent.FURNI_CHOOSER_CONTENT, eventDispatcher, onRoomWidgetChooserContentEvent);
 
+    const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) =>
+    {
+        if(!isVisible) return;
 
-    const onClose = useCallback(() =>
+        switch(event.type)
+        {
+            case RoomWidgetRoomObjectUpdateEvent.FURNI_ADDED:
+            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED:
+                refreshChooser();
+                return;
+        }
+    }, [ isVisible, refreshChooser ]);
+
+    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_ADDED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
+    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
+
+    const close = useCallback(() =>
     {
         setIsVisible(false);
         setItems(null);
@@ -29,9 +57,5 @@ export const FurniChooserWidgetView: FC = props =>
 
     if (!isVisible) return null;
 
-    return (
+    return <ChooserWidgetView title={ LocalizeText('widget.chooser.furni.title') } displayItemId={ false } items={ items } onCloseClick={ close } />;
-        <div className="chooser-widget">
-            <ChooserWidgetView title={LocalizeText('widget.chooser.furni.title')} displayItemId={true} onCloseClick={onClose} items={items} messageType={RoomWidgetRequestWidgetMessage.FURNI_CHOOSER} roomWidgetRoomObjectUpdateEvents={[RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, RoomWidgetRoomObjectUpdateEvent.FURNI_ADDED]}></ChooserWidgetView>
-        </div>
-    )
 }

src/views/room/widgets/choosers/UserChooserWidgetView.tsx

@@ -1,26 +1,55 @@
 import { FC, useCallback, useState } from 'react';
-import { RoomObjectItem } from '../../../../events/room-widgets/choosers/RoomObjectItem';
+import { CreateEventDispatcherHook } from '../../../../hooks';
-import { RoomWidgetChooserContentEvent } from '../../../../events/room-widgets/choosers/RoomWidgetChooserContentEvent';
-import { useUiEvent } from '../../../../hooks';
 import { LocalizeText } from '../../../../utils';
-import { RoomWidgetRoomObjectUpdateEvent } from '../../events';
+import { useRoomContext } from '../../context/RoomContext';
+import { RoomObjectItem, RoomWidgetChooserContentEvent, RoomWidgetRoomObjectUpdateEvent } from '../../events';
 import { RoomWidgetRequestWidgetMessage } from '../../messages';
 import { ChooserWidgetView } from './ChooserWidgetView';
 
-export const UserChooserWidgetView : FC = props =>
+export const UserChooserWidgetView: FC<{}> = props =>
 {
-    const [isVisible, setIsVisible] = useState(false);
+    const [ isVisible, setIsVisible ] = useState(false);
-    const [items, setItems] = useState<RoomObjectItem[]>(null);
+    const [ items, setItems ] = useState<RoomObjectItem[]>(null);
+    const [ refreshTimeout, setRefreshTimeout ] = useState<ReturnType<typeof setTimeout>>(null);
+    const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
 
-    const onUserChooserContent = useCallback((event: RoomWidgetChooserContentEvent) =>
+    const refreshChooser = useCallback(() =>
+    {
+        if(!isVisible) return;
+
+        setRefreshTimeout(prevValue =>
+            {
+                if(prevValue) clearTimeout(prevValue);
+
+                return setTimeout(() => widgetHandler.processWidgetMessage(new RoomWidgetRequestWidgetMessage(RoomWidgetRequestWidgetMessage.FURNI_CHOOSER)), 100);
+            })
+    }, [ isVisible, widgetHandler ]);
+
+    const onRoomWidgetChooserContentEvent = useCallback((event: RoomWidgetChooserContentEvent) =>
     {
         setItems(event.items);
         setIsVisible(true);
     }, []);
 
-    useUiEvent(RoomWidgetChooserContentEvent.USER_CHOOSER_CONTENT, onUserChooserContent);
+    CreateEventDispatcherHook(RoomWidgetChooserContentEvent.USER_CHOOSER_CONTENT, eventDispatcher, onRoomWidgetChooserContentEvent);
 
-    const onClose = useCallback(() =>
+    const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) =>
+    {
+        if(!isVisible) return;
+
+        switch(event.type)
+        {
+            case RoomWidgetRoomObjectUpdateEvent.USER_ADDED:
+            case RoomWidgetRoomObjectUpdateEvent.USER_REMOVED:
+                refreshChooser();
+                return;
+        }
+    }, [ isVisible, refreshChooser ]);
+
+    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.USER_ADDED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
+    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.USER_REMOVED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
+
+    const close = useCallback(() =>
     {
         setIsVisible(false);
         setItems(null);
@@ -28,9 +57,5 @@ export const UserChooserWidgetView : FC = props =>
     
     if(!isVisible) return null;
 
-    return (
+    return <ChooserWidgetView title={ LocalizeText('widget.chooser.user.title') } displayItemId={ true } items={ items } onCloseClick={ close } />;
-        <div className="chooser-widget">
-            <ChooserWidgetView title={LocalizeText('widget.chooser.user.title')} displayItemId={false} onCloseClick={onClose} items={items} messageType={RoomWidgetRequestWidgetMessage.USER_CHOOSER} roomWidgetRoomObjectUpdateEvents={[RoomWidgetRoomObjectUpdateEvent.USER_REMOVED, RoomWidgetRoomObjectUpdateEvent.USER_ADDED]}></ChooserWidgetView>
-        </div>
-    );
 }

src/views/room/widgets/choosers/utils/sorting.ts

@@ -1,18 +0,0 @@
-export function dynamicSort(property)
-{
-    // Source: https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value
-    let sortOrder = 1;
-    if(property[0] === '-')
-    {
-        sortOrder = -1;
-        property = property.substr(1);
-    }
-    return function (a,b)
-    {
-        /* next line works with strings and numbers,
-         * and you may want to customize it to your needs
-         */
-        const result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
-        return result * sortOrder;
-    };
-}