From 05fa86d46440fdf7d297741e6e07766709ef1746 Mon Sep 17 00:00:00 2001 From: Dank074 Date: Wed, 11 Aug 2021 00:05:22 -0500 Subject: [PATCH] refactor choosers to use composition --- .../handlers/FurniChooserWidgetHandler.ts | 23 +++-- .../room/handlers/UserChooserWidgetHandler.ts | 14 ++- .../widgets/choosers/ChooserWidgetView.tsx | 87 ++++++++++++++++++ .../choosers/ChooserWidgetView.type.ts | 12 +++ .../choosers/FurniChooserWidgetView.tsx | 91 +------------------ .../choosers/UserChooserWidgetView.tsx | 91 +------------------ 6 files changed, 133 insertions(+), 185 deletions(-) create mode 100644 src/views/room/widgets/choosers/ChooserWidgetView.tsx create mode 100644 src/views/room/widgets/choosers/ChooserWidgetView.type.ts diff --git a/src/views/room/handlers/FurniChooserWidgetHandler.ts b/src/views/room/handlers/FurniChooserWidgetHandler.ts index 2e2c7630..9dc3f12e 100644 --- a/src/views/room/handlers/FurniChooserWidgetHandler.ts +++ b/src/views/room/handlers/FurniChooserWidgetHandler.ts @@ -51,8 +51,13 @@ export class FurniChooserWidgetHandler extends RoomWidgetHandler const roomId = this.container.roomSession.roomId; const furniInRoom : RoomObjectItem[] = []; - furniInRoom.push(...GetRoomEngine().getRoomObjects(roomId, RoomObjectCategory.WALL).map(roomObject => { - const type = roomObject.type; + const wallItems = GetRoomEngine().getRoomObjects(roomId, RoomObjectCategory.WALL); + const floorItems = GetRoomEngine().getRoomObjects(roomId, RoomObjectCategory.FLOOR); + + wallItems.forEach( wallItem => { + if(!wallItem) return; + + const type = wallItem.type; let name = null; if(type.startsWith('poster')) { @@ -61,7 +66,7 @@ export class FurniChooserWidgetHandler extends RoomWidgetHandler } else { - const furniTypeId = Number.parseInt(roomObject.model.getValue(RoomObjectVariable.FURNITURE_TYPE_ID)); + const furniTypeId = Number.parseInt(wallItem.model.getValue(RoomObjectVariable.FURNITURE_TYPE_ID)); const wallItemData = GetSessionDataManager().getWallItemData(furniTypeId); if(wallItemData != null && wallItemData.name.length > 0) { @@ -72,16 +77,18 @@ export class FurniChooserWidgetHandler extends RoomWidgetHandler name = type; } } - return new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name) - })); + furniInRoom.push(new RoomObjectItem(wallItem.id, RoomObjectCategory.WALL, name)); + }); - furniInRoom.push(...GetRoomEngine().getRoomObjects(roomId, RoomObjectCategory.FLOOR).map(roomObject => { + floorItems.forEach(roomObject => { + if(!roomObject) return; + const furniTypeId = Number.parseInt(roomObject.model.getValue(RoomObjectVariable.FURNITURE_TYPE_ID)); const floorItemData = GetSessionDataManager().getFloorItemData(furniTypeId); const name = floorItemData != null ? floorItemData.name : roomObject.type; - return new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name); - })); + furniInRoom.push(new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name)); + }); furniInRoom.sort(dynamicSort('name')); diff --git a/src/views/room/handlers/UserChooserWidgetHandler.ts b/src/views/room/handlers/UserChooserWidgetHandler.ts index 379b479d..ce889635 100644 --- a/src/views/room/handlers/UserChooserWidgetHandler.ts +++ b/src/views/room/handlers/UserChooserWidgetHandler.ts @@ -38,15 +38,19 @@ export class UserChooserWidgetHandler extends RoomWidgetHandler const roomId = this.container.roomSession.roomId; const categoryId = RoomObjectCategory.UNIT; - const units = []; + const units : RoomObjectItem[] = []; - units.push(...GetRoomEngine().getRoomObjects(roomId, categoryId).map(roomObject => { + const roomObjects = GetRoomEngine().getRoomObjects(roomId, categoryId); + + roomObjects.forEach(roomObject => { + if(!roomObject) return; + const unitData = this.container.roomSession.userDataManager.getUserDataByIndex(roomObject.id); - if(!unitData) return null; + if(!unitData) return; - return new RoomObjectItem(unitData.roomIndex, categoryId, unitData.name); - })); + units.push(new RoomObjectItem(unitData.roomIndex, categoryId, unitData.name)); + }); units.sort(dynamicSort('name')); dispatchUiEvent(new RoomWidgetChooserContentEvent(RoomWidgetChooserContentEvent.USER_CHOOSER_CONTENT, units)); diff --git a/src/views/room/widgets/choosers/ChooserWidgetView.tsx b/src/views/room/widgets/choosers/ChooserWidgetView.tsx new file mode 100644 index 00000000..05d3e7bf --- /dev/null +++ b/src/views/room/widgets/choosers/ChooserWidgetView.tsx @@ -0,0 +1,87 @@ +import { FC, useCallback, useEffect, useState } from 'react'; +import List from 'react-virtualized/dist/commonjs/List'; +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 { RoomWidgetRequestWidgetMessage, RoomWidgetRoomObjectMessage } from '../../messages'; +import { ChooserWidgetViewProps } from './ChooserWidgetView.type'; + +export const ChooserWidgetView: FC = props => +{ + const [filteredItems, setFilteredItems] = useState([]); + const [selectedItem, setSelectedItem] = useState(null); + const [refreshTimeout, setRefreshTimeout] = useState>(null); + 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(() => + { + if (!items) return; + + const filteredGroupItems = items.filter(item => + { + return item.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()); + }); + + setFilteredItems(filteredGroupItems); + }, [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]); + + const rowRenderer = function ({ + 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) + }) + { + return ( +
onClickItem(filteredItems[index])} className={(selectedItem === filteredItems[index] ? 'selected-item ' : '') + 'list-item'}> + {filteredItems[index].name} + {displayItemId && (' - ' + filteredItems[index].id)} +
+ ); + } + + return ( + + + +
+
+ setSearchValue(event.target.value)} /> +
+
+ + + + ); +} diff --git a/src/views/room/widgets/choosers/ChooserWidgetView.type.ts b/src/views/room/widgets/choosers/ChooserWidgetView.type.ts new file mode 100644 index 00000000..87c9ef9f --- /dev/null +++ b/src/views/room/widgets/choosers/ChooserWidgetView.type.ts @@ -0,0 +1,12 @@ +import { MouseEvent } from 'react'; +import { RoomObjectItem } from '../../../../events/room-widgets/choosers/RoomObjectItem'; + +export interface ChooserWidgetViewProps +{ + title: string; + onCloseClick: (event: MouseEvent) => void; + displayItemId: boolean; + items: RoomObjectItem[]; + messageType: string; + roomWidgetRoomObjectUpdateEvents: string[]; +} diff --git a/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx b/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx index 7bc25c54..d3d1b617 100644 --- a/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx +++ b/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx @@ -1,23 +1,16 @@ -import { FC, useCallback, useEffect, useState } from 'react'; -import List from 'react-virtualized/dist/commonjs/List'; +import { FC, useCallback, useState } from 'react'; import { RoomObjectItem } from '../../../../events/room-widgets/choosers/RoomObjectItem'; import { RoomWidgetChooserContentEvent } from '../../../../events/room-widgets/choosers/RoomWidgetChooserContentEvent'; -import { CreateEventDispatcherHook, useUiEvent } from '../../../../hooks'; -import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; +import { useUiEvent } from '../../../../hooks'; import { LocalizeText } from '../../../../utils'; -import { useRoomContext } from '../../context/RoomContext'; import { RoomWidgetRoomObjectUpdateEvent } from '../../events'; -import { RoomWidgetRequestWidgetMessage, RoomWidgetRoomObjectMessage } from '../../messages'; +import { RoomWidgetRequestWidgetMessage } from '../../messages'; +import { ChooserWidgetView } from './ChooserWidgetView'; export const FurniChooserWidgetView: FC = props => { const [isVisible, setIsVisible] = useState(false); const [items, setItems] = useState(null); - const [filteredItems, setFilteredItems] = useState(null); - const [selectedItem, setSelectedItem] = useState(null); - const [refreshTimeout, setRefreshTimeout] = useState>(null); - const [searchValue, setSearchValue] = useState(''); - const { eventDispatcher = null, widgetHandler = null } = useRoomContext(); const onFurniChooserContent = useCallback((event: RoomWidgetChooserContentEvent) => { @@ -25,46 +18,7 @@ export const FurniChooserWidgetView: FC = props => setIsVisible(true); }, []); - const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) => - { - if (!event || !isVisible) return; - - if (refreshTimeout) clearTimeout(refreshTimeout); - - setRefreshTimeout(setTimeout(() => - { - widgetHandler.processWidgetMessage(new RoomWidgetRequestWidgetMessage(RoomWidgetRequestWidgetMessage.FURNI_CHOOSER)); - }, 100)); - - }, [isVisible, refreshTimeout, widgetHandler]); - useUiEvent(RoomWidgetChooserContentEvent.FURNI_CHOOSER_CONTENT, onFurniChooserContent); - CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_ADDED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent); - CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent); - - useEffect(() => - { - if(!items) return; - - let filteredGroupItems = [ ...items ]; - - if(searchValue && searchValue.length) - { - const comparison = searchValue.toLocaleLowerCase(); - - filteredGroupItems = items.filter(item => - { - if(comparison && comparison.length) - { - if(item.name.toLocaleLowerCase().includes(comparison)) return item; - } - - return null; - }); - } - - setFilteredItems(filteredGroupItems); - }, [ items, searchValue, setFilteredItems ]); const onClose = useCallback(() => @@ -73,46 +27,11 @@ export const FurniChooserWidgetView: FC = props => setItems(null); }, []); - const onClickItem = useCallback((item: RoomObjectItem) => - { - setSelectedItem(item); - widgetHandler.processWidgetMessage(new RoomWidgetRoomObjectMessage(RoomWidgetRoomObjectMessage.SELECT_OBJECT, item.id, item.category)); - }, [setSelectedItem, widgetHandler]); - - const rowRenderer = function ({ - 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) - }) - { - return ( -
onClickItem(filteredItems[index])} className={(selectedItem === filteredItems[index] ? 'selected-item ' : '') + 'list-item'}> - {filteredItems[index].name} - {filteredItems[index].id} -
- ); - } - if (!isVisible) return null; return (
- - - -
-
- setSearchValue(event.target.value)} /> -
-
- - - +
) } diff --git a/src/views/room/widgets/choosers/UserChooserWidgetView.tsx b/src/views/room/widgets/choosers/UserChooserWidgetView.tsx index 86ebaafd..e7f1e3be 100644 --- a/src/views/room/widgets/choosers/UserChooserWidgetView.tsx +++ b/src/views/room/widgets/choosers/UserChooserWidgetView.tsx @@ -1,23 +1,16 @@ -import { FC, useCallback, useEffect, useState } from 'react'; -import List from 'react-virtualized/dist/commonjs/List'; +import { FC, useCallback, useState } from 'react'; import { RoomObjectItem } from '../../../../events/room-widgets/choosers/RoomObjectItem'; import { RoomWidgetChooserContentEvent } from '../../../../events/room-widgets/choosers/RoomWidgetChooserContentEvent'; -import { CreateEventDispatcherHook, useUiEvent } from '../../../../hooks'; -import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; +import { useUiEvent } from '../../../../hooks'; import { LocalizeText } from '../../../../utils'; -import { useRoomContext } from '../../context/RoomContext'; import { RoomWidgetRoomObjectUpdateEvent } from '../../events'; -import { RoomWidgetRequestWidgetMessage, RoomWidgetRoomObjectMessage } from '../../messages'; +import { RoomWidgetRequestWidgetMessage } from '../../messages'; +import { ChooserWidgetView } from './ChooserWidgetView'; export const UserChooserWidgetView : FC = props => { const [isVisible, setIsVisible] = useState(false); const [items, setItems] = useState(null); - const [filteredItems, setFilteredItems] = useState(null); - const [selectedItem, setSelectedItem] = useState(null); - const [refreshTimeout, setRefreshTimeout] = useState>(null); - const [searchValue, setSearchValue] = useState(''); - const { eventDispatcher = null, widgetHandler = null } = useRoomContext(); const onUserChooserContent = useCallback((event: RoomWidgetChooserContentEvent) => { @@ -25,93 +18,19 @@ export const UserChooserWidgetView : FC = props => setIsVisible(true); }, []); - const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) => - { - if (!event || !isVisible) return; - - if (refreshTimeout) clearTimeout(refreshTimeout); - - setRefreshTimeout(setTimeout(() => - { - widgetHandler.processWidgetMessage(new RoomWidgetRequestWidgetMessage(RoomWidgetRequestWidgetMessage.USER_CHOOSER)); - }, 100)); - - }, [isVisible, refreshTimeout, widgetHandler]); - useUiEvent(RoomWidgetChooserContentEvent.USER_CHOOSER_CONTENT, onUserChooserContent); - CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.USER_REMOVED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent); - CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.USER_ADDED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent); - useEffect(() => - { - if(!items) return; - - let filteredGroupItems = [ ...items ]; - - if(searchValue && searchValue.length) - { - const comparison = searchValue.toLocaleLowerCase(); - - filteredGroupItems = items.filter(item => - { - if(comparison && comparison.length) - { - if(item.name.toLocaleLowerCase().includes(comparison)) return item; - } - - return null; - }); - } - - setFilteredItems(filteredGroupItems); - }, [ items, searchValue, setFilteredItems ]); - const onClose = useCallback(() => { setIsVisible(false); setItems(null); }, []); - - const onClickItem = useCallback((item: RoomObjectItem) => - { - setSelectedItem(item); - widgetHandler.processWidgetMessage(new RoomWidgetRoomObjectMessage(RoomWidgetRoomObjectMessage.SELECT_OBJECT, item.id, item.category)); - }, [setSelectedItem, widgetHandler]); - - const rowRenderer = function ({ - 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) - }) - { - return ( -
onClickItem(filteredItems[index])} className={(selectedItem === filteredItems[index] ? 'selected-item ' : '') + 'list-item'}> - {filteredItems[index].name} -
- ); - } if(!isVisible) return null; return (
- - - -
-
- setSearchValue(event.target.value)} /> -
-
- - - +
); }