From 44f3981ec54aca51dc698a0e5cc1d85f9fd26fe1 Mon Sep 17 00:00:00 2001 From: object <110488133+oobjectt@users.noreply.github.com> Date: Tue, 3 Jan 2023 07:53:59 +0100 Subject: [PATCH] Issue #74 - Room settings filter (#91) * Room settings filter * Change names * Delete wrong commit Co-authored-by: dank074 --- .../navigator/views/NavigatorRoomInfoView.tsx | 8 +- .../room/widgets/RoomWidgetsView.tsx | 4 +- .../RoomFilterWordsWidgetView.tsx | 74 +++++++++++++++++++ src/hooks/rooms/widgets/index.ts | 1 + .../rooms/widgets/useFilterWordsWidget.ts | 23 ++++++ 5 files changed, 108 insertions(+), 2 deletions(-) create mode 100644 src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx create mode 100644 src/hooks/rooms/widgets/useFilterWordsWidget.ts diff --git a/src/components/navigator/views/NavigatorRoomInfoView.tsx b/src/components/navigator/views/NavigatorRoomInfoView.tsx index 42657c76..b52f7cd3 100644 --- a/src/components/navigator/views/NavigatorRoomInfoView.tsx +++ b/src/components/navigator/views/NavigatorRoomInfoView.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { NavigatorSearchComposer, RoomMuteComposer, RoomSettingsComposer, SecurityLevel, ToggleStaffPickMessageComposer, UpdateHomeRoomMessageComposer } from '@nitrots/nitro-renderer'; +import { GetCustomRoomFilterMessageComposer, NavigatorSearchComposer, RoomMuteComposer, RoomSettingsComposer, SecurityLevel, ToggleStaffPickMessageComposer, UpdateHomeRoomMessageComposer } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; import { CreateLinkEvent, DispatchUiEvent, GetGroupInformation, GetSessionDataManager, LocalizeText, ReportType, SendMessageComposer } from '../../../api'; import { Button, classNames, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../common'; @@ -71,6 +71,9 @@ export const NavigatorRoomInfoView: FC = props => setIsRoomMuted(value => !value); SendMessageComposer(new RoomMuteComposer()); return; + case 'room_filter': + SendMessageComposer(new GetCustomRoomFilterMessageComposer(navigatorData.enteredGuestRoom.roomId)); + return; case 'open_floorplan_editor': CreateLinkEvent('floor-editor/toggle'); return; @@ -161,6 +164,9 @@ export const NavigatorRoomInfoView: FC = props => + diff --git a/src/components/room/widgets/RoomWidgetsView.tsx b/src/components/room/widgets/RoomWidgetsView.tsx index 83cbb190..8f1bd8a6 100644 --- a/src/components/room/widgets/RoomWidgetsView.tsx +++ b/src/components/room/widgets/RoomWidgetsView.tsx @@ -10,6 +10,7 @@ import { UserChooserWidgetView } from './choosers/UserChooserWidgetView'; import { DoorbellWidgetView } from './doorbell/DoorbellWidgetView'; import { FriendRequestWidgetView } from './friend-request/FriendRequestWidgetView'; import { FurnitureWidgetsView } from './furniture/FurnitureWidgetsView'; +import { RoomFilterWordsWidgetView } from './room-filter-words/RoomFilterWordsWidgetView'; import { RoomThumbnailWidgetView } from './room-thumbnail/RoomThumbnailWidgetView'; import { RoomToolsWidgetView } from './room-tools/RoomToolsWidgetView'; import { WordQuizWidgetView } from './word-quiz/WordQuizWidgetView'; @@ -75,7 +76,7 @@ export const RoomWidgetsView: FC<{}> = props => } if(!updateEvent) return; - + let dispatchEvent = true; if(RoomId.isRoomPreviewerId(updateEvent.roomId)) return; @@ -158,6 +159,7 @@ export const RoomWidgetsView: FC<{}> = props => + diff --git a/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx b/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx new file mode 100644 index 00000000..4f7825f7 --- /dev/null +++ b/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx @@ -0,0 +1,74 @@ +import { UpdateRoomFilterMessageComposer } from '@nitrots/nitro-renderer'; +import { FC, useState } from 'react'; +import { LocalizeText, SendMessageComposer } from '../../../../api'; +import { Button, classNames, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common'; +import { useFilterWordsWidget, useNavigator } from '../../../../hooks'; + +export const RoomFilterWordsWidgetView: FC<{}> = props => +{ + const [ word, setWord ] = useState('bobba'); + const [ selectedWord, setSelectedWord ] = useState(''); + const [ isSelectingWord, setIsSelectingWord ] = useState(false); + const { wordsFilter = [], isVisible = null, setWordsFilter, onClose = null } = useFilterWordsWidget(); + const { navigatorData = null } = useNavigator(); + + const processAction = (isAddingWord: boolean) => + { + if ((isSelectingWord) ? (!selectedWord) : (!word)) return; + + SendMessageComposer(new UpdateRoomFilterMessageComposer(navigatorData.enteredGuestRoom.roomId, isAddingWord, (isSelectingWord ? selectedWord : word))); + setSelectedWord(''); + setWord('bobba'); + setIsSelectingWord(false); + + if (isAddingWord && wordsFilter.includes((isSelectingWord ? selectedWord : word))) return; + + setWordsFilter(prevValue => + { + const newWords = [ ...prevValue ]; + + isAddingWord ? newWords.push((isSelectingWord ? selectedWord : word)) : newWords.splice(newWords.indexOf((isSelectingWord ? selectedWord : word)), 1); + + return newWords; + }); + } + + const onTyping = (word: string) => + { + setWord(word); + setIsSelectingWord(false); + } + + const onSelectedWord = (word: string) => + { + setSelectedWord(word); + setIsSelectingWord(true); + } + + if (!isVisible) return null; + + return ( + + onClose() } /> + + + onTyping(event.target.value) } /> + + + + { wordsFilter && (wordsFilter.length > 0) && wordsFilter.map((word, index) => + { + return ( + onSelectedWord(word) }> + { word } + + ) + }) } + + + + + + + ); +}; diff --git a/src/hooks/rooms/widgets/index.ts b/src/hooks/rooms/widgets/index.ts index 53b15d41..bb8b9e88 100644 --- a/src/hooks/rooms/widgets/index.ts +++ b/src/hooks/rooms/widgets/index.ts @@ -3,6 +3,7 @@ export * from './useAvatarInfoWidget'; export * from './useChatInputWidget'; export * from './useChatWidget'; export * from './useDoorbellWidget'; +export * from './useFilterWordsWidget'; export * from './useFriendRequestWidget'; export * from './useFurniChooserWidget'; export * from './usePollWidget'; diff --git a/src/hooks/rooms/widgets/useFilterWordsWidget.ts b/src/hooks/rooms/widgets/useFilterWordsWidget.ts new file mode 100644 index 00000000..3811682d --- /dev/null +++ b/src/hooks/rooms/widgets/useFilterWordsWidget.ts @@ -0,0 +1,23 @@ +import { RoomFilterSettingsMessageEvent } from '@nitrots/nitro-renderer'; +import { useState } from 'react'; +import { useMessageEvent } from '../../events'; + +const useFilterWordsWidgetState = () => +{ + const [ wordsFilter, setWordsFilter ] = useState(null); + const [ isVisible, setIsVisible ] = useState(false); + + const onClose = () => setIsVisible(false); + + useMessageEvent(RoomFilterSettingsMessageEvent, event => + { + const parser = event.getParser(); + + setIsVisible(true); + setWordsFilter(parser.words); + }); + + return { wordsFilter, isVisible, setWordsFilter, onClose }; +} + +export const useFilterWordsWidget = useFilterWordsWidgetState;