Issue #74 - Room settings filter (#91)

* Room settings filter

* Change names

* Delete wrong commit

Co-authored-by: dank074 <torresefrain10@gmail.com>

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<NavigatorRoomInfoViewProps> = 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<NavigatorRoomInfoViewProps> = props =>
                                 <Button onClick={ () => processAction('toggle_mute') }>
                                     { LocalizeText(isRoomMuted ? 'navigator.muteall_on' : 'navigator.muteall_off') }
                                 </Button>
+                                <Button onClick={ () => processAction('room_filter') }>
+                                    { LocalizeText('navigator.roomsettings.roomfilter') }
+                                </Button>
                                 <Button onClick={ () => processAction('open_floorplan_editor') }>
                                     { LocalizeText('open.floor.plan.editor') }
                                 </Button>

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';
@@ -158,6 +159,7 @@ export const RoomWidgetsView: FC<{}> = props =>
             <DoorbellWidgetView />
             <FurnitureWidgetsView />
             <RoomToolsWidgetView />
+            <RoomFilterWordsWidgetView />
             <RoomThumbnailWidgetView />
             <FurniChooserWidgetView />
             <UserChooserWidgetView />

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<string>('bobba');
+    const [ selectedWord, setSelectedWord ] = useState<string>('');
+    const [ isSelectingWord, setIsSelectingWord ] = useState<boolean>(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 (
+        <NitroCardView className="nitro-guide-tool no-resize" theme="primary-slim">
+            <NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings.roomfilter') } onCloseClick={ () => onClose() } />
+            <NitroCardContentView className="text-black">
+                <Grid className="d-flex align-items-center justify-content-end gap-2">
+                    <input type="text" className="form-control form-control-sm" maxLength={ 255 } value={ word } onChange={ event => onTyping(event.target.value) } />
+                    <Button onClick={ () => processAction(true) }>{ LocalizeText('navigator.roomsettings.roomfilter.addword') }</Button>
+                </Grid>
+                <Column overflow="auto" gap={ 0 } className="form-control form-control-sm" style={ { height: '100px' } }>
+                    { wordsFilter && (wordsFilter.length > 0) && wordsFilter.map((word, index) =>
+                    {
+                        return (
+                            <Flex key={ index } alignItems="center" className={ classNames('rounded p-1', (selectedWord === word) && 'bg-muted') } pointer onClick={ event => onSelectedWord(word) }>
+                                <Text truncate>{ word }</Text>
+                            </Flex>
+                        )
+                    }) }
+                </Column>
+                <Grid className="d-flex align-items-center justify-content-end gap-2">
+                    <Button variant="danger" onClick={ () => processAction(false) } disabled={ wordsFilter.length === 0 || !isSelectingWord }>{ LocalizeText('navigator.roomsettings.roomfilter.removeword') }</Button>
+                </Grid>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+};

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';

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<string[]>(null);
+    const [ isVisible, setIsVisible ] = useState<boolean>(false);
+
+    const onClose = () => setIsVisible(false);
+
+    useMessageEvent<RoomFilterSettingsMessageEvent>(RoomFilterSettingsMessageEvent, event =>
+    {
+        const parser = event.getParser();
+
+        setIsVisible(true);
+        setWordsFilter(parser.words);
+    });
+
+    return { wordsFilter, isVisible, setWordsFilter, onClose };
+}
+
+export const useFilterWordsWidget = useFilterWordsWidgetState;