From 676ecb4a6cdd49980de54e2902a7721f3be4f4a1 Mon Sep 17 00:00:00 2001 From: dank074 Date: Tue, 17 Aug 2021 19:10:31 -0500 Subject: [PATCH 1/5] finished chat settings --- .../NavigatorRoomSettingsView.tsx | 54 ++++----- .../NavigatorRoomSettingsView.types.ts | 2 +- .../NavigatorRoomSettingsAccessTabView.tsx | 9 +- .../NavigatorRoomSettingsBasicTabView.tsx | 6 +- .../NavigatorRoomSettingsVipChatTabView.tsx | 108 ++++++++++++++++++ 5 files changed, 144 insertions(+), 35 deletions(-) create mode 100644 src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx index a8b54271..3b906c83 100644 --- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx @@ -6,6 +6,7 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, Nitro import RoomSettingsData from '../../common/RoomSettingsData'; import { NavigatorRoomSettingsAccessTabView } from './views/tab-access/NavigatorRoomSettingsAccessTabView'; import { NavigatorRoomSettingsBasicTabView } from './views/tab-basic/NavigatorRoomSettingsBasicTabView'; +import { NavigatorRoomSettingsVipChatTabView } from './views/tab-vipchat/NavigatorRoomSettingsVipChatTabView'; const TABS: string[] = [ 'navigator.roomsettings.tab.1', @@ -37,36 +38,36 @@ export const NavigatorRoomSettingsView: FC<{}> = props => CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent); - const save = useCallback(() => + const save = useCallback((data: RoomSettingsData) => { SendMessageHook( new SaveRoomSettingsComposer( - roomSettingsData.roomId, - roomSettingsData.roomName, - roomSettingsData.roomDescription, - roomSettingsData.lockState, - roomSettingsData.password, - roomSettingsData.userCount, - roomSettingsData.categoryId, - roomSettingsData.tags.length, - roomSettingsData.tags, - roomSettingsData.tradeState, - roomSettingsData.allowPets, - roomSettingsData.allowPetsEat, - roomSettingsData.allowWalkthrough, - roomSettingsData.hideWalls, - roomSettingsData.wallThickness, - roomSettingsData.floorThickness, - roomSettingsData.muteState, - roomSettingsData.kickState, - roomSettingsData.banState, - roomSettingsData.chatBubbleMode, - roomSettingsData.chatBubbleWeight, - roomSettingsData.chatBubbleSpeed, - roomSettingsData.chatDistance, - roomSettingsData.chatFloodProtection + data.roomId, + data.roomName, + data.roomDescription, + data.lockState, + data.password, + data.userCount, + data.categoryId, + data.tags.length, + data.tags, + data.tradeState, + data.allowPets, + data.allowPetsEat, + data.allowWalkthrough, + data.hideWalls, + data.wallThickness, + data.floorThickness, + data.muteState, + data.kickState, + data.banState, + data.chatBubbleMode, + data.chatBubbleWeight, + data.chatBubbleSpeed, + data.chatDistance, + data.chatFloodProtection )); - }, [ roomSettingsData ]); + }, []); const processAction = useCallback((action: string) => { @@ -93,6 +94,7 @@ export const NavigatorRoomSettingsView: FC<{}> = props => { currentTab === TABS[0] && } { currentTab === TABS[1] && } + { currentTab === TABS[3] && } ); diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts index 52eded57..dd32f7e9 100644 --- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts @@ -4,5 +4,5 @@ export class NavigatorRoomSettingsTabViewProps { roomSettingsData: RoomSettingsData; setRoomSettingsData: (roomSettings: RoomSettingsData) => void; - onSave: () => void; + onSave: (data: RoomSettingsData) => void; } diff --git a/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx b/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx index d4b4944f..4acf0bdc 100644 --- a/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx +++ b/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx @@ -1,6 +1,5 @@ import { FC, useCallback } from 'react'; import { LocalizeText } from '../../../../../../api'; -import RoomSettingsData from '../../../../common/RoomSettingsData'; import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; export const NavigatorRoomSettingsAccessTabView: FC = props => @@ -9,7 +8,7 @@ export const NavigatorRoomSettingsAccessTabView: FC { - const roomSettings = ({ ...roomSettingsData } as RoomSettingsData); + const roomSettings = Object.assign({}, roomSettingsData); let save = true; switch(field) @@ -37,7 +36,7 @@ export const NavigatorRoomSettingsAccessTabView: FC @@ -47,8 +46,8 @@ export const NavigatorRoomSettingsAccessTabView: FC { - if(isPasswordValid()) onSave(); - }, [ isPasswordValid, onSave ]); + if(isPasswordValid()) onSave(roomSettingsData); + }, [isPasswordValid, onSave, roomSettingsData]); return ( <> diff --git a/src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx b/src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx index bb358297..64329cc1 100644 --- a/src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx +++ b/src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx @@ -43,18 +43,18 @@ export const NavigatorRoomSettingsBasicTabView: FC
- handleChange('name', event.target.value) } onBlur={ onSave } /> + handleChange('name', event.target.value) } onBlur={ () => onSave(roomSettingsData) } />
- handleChange('description', event.target.value) } onBlur={ onSave } /> + handleChange('description', event.target.value) } onBlur={ () => onSave(roomSettingsData) } />
diff --git a/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx b/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx new file mode 100644 index 00000000..e87b788c --- /dev/null +++ b/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx @@ -0,0 +1,108 @@ +import { FC, useCallback } from 'react'; +import { LocalizeText } from '../../../../../../api'; +import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; + +export const NavigatorRoomSettingsVipChatTabView: FC = props => +{ + const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props; + + const handleChange = useCallback((field: string, value: string | number | boolean) => + { + const clone = Object.assign({}, roomSettingsData); + let save = true; + + switch(field) + { + case 'hide_walls': + clone.hideWalls = Boolean(value); + break; + case 'wall_thickness': + clone.wallThickness = Number(value); + break; + case 'floor_thickness': + clone.floorThickness = Number(value); + break; + case 'bubble_mode': + clone.chatBubbleMode = Number(value); + break; + case 'chat_weight': + clone.chatBubbleWeight = Number(value); + break; + case 'bubble_speed': + clone.chatBubbleSpeed = Number(value); + break; + case 'flood_protection': + clone.chatFloodProtection = Number(value); + break; + case 'chat_distance': + clone.chatDistance = Number(value); + save = false; + break; + } + + setRoomSettingsData(clone); + + if(save) onSave(clone); + }, [ roomSettingsData, setRoomSettingsData, onSave ]); + + return ( + <> +
{LocalizeText('navigator.roomsettings.vip.caption')}
+
{LocalizeText('navigator.roomsettings.vip.info')}
+
{LocalizeText('navigator.roomsettings.vip_settings')}
+
+ handleChange('hide_walls', e.target.checked) } /> + +
+
+ +
+
+ +
+
{LocalizeText('navigator.roomsettings.chat_settings')}
+
{LocalizeText('navigator.roomsettings.chat_settings.info')}
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + handleChange('chat_distance', event.target.valueAsNumber) } onBlur={ () => onSave(roomSettingsData) } /> +
+ + ); +} From bbd892be390c35cd5f75db71f553e8f8c54d6daf Mon Sep 17 00:00:00 2001 From: dank074 Date: Tue, 17 Aug 2021 23:24:21 -0500 Subject: [PATCH 2/5] added other settings views --- .../NavigatorRoomSettingsView.scss | 12 ++ .../NavigatorRoomSettingsView.tsx | 45 +++++++- .../NavigatorRoomSettingsModTabView.tsx | 107 ++++++++++++++++++ .../NavigatorRoomSettingsRightsTabView.tsx | 48 ++++++++ .../NavigatorRoomSettingsVipChatTabView.tsx | 66 +++++------ 5 files changed, 241 insertions(+), 37 deletions(-) create mode 100644 src/views/navigator/views/room-settings/views/tab-mod/NavigatorRoomSettingsModTabView.tsx create mode 100644 src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss index 44e545c0..3b9c28c0 100644 --- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss @@ -4,4 +4,16 @@ .content-area { height: 350px; } + + .list-container { + max-height: 150px; + overflow-y: scroll; + + .list-item { + &.selected { + background-color: cadetblue; + } + } + } + } diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx index 3b906c83..ebf71612 100644 --- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx @@ -1,4 +1,4 @@ -import { RoomSettingsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer'; +import { RoomBannedUsersComposer, RoomBannedUsersEvent, RoomSettingsEvent, RoomUsersWithRightsComposer, RoomUsersWithRightsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback, useState } from 'react'; import { LocalizeText } from '../../../../api'; import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages'; @@ -6,6 +6,8 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, Nitro import RoomSettingsData from '../../common/RoomSettingsData'; import { NavigatorRoomSettingsAccessTabView } from './views/tab-access/NavigatorRoomSettingsAccessTabView'; import { NavigatorRoomSettingsBasicTabView } from './views/tab-basic/NavigatorRoomSettingsBasicTabView'; +import { NavigatorRoomSettingsModTabView } from './views/tab-mod/NavigatorRoomSettingsModTabView'; +import { NavigatorRoomSettingsRightsTabView } from './views/tab-rights/NavigatorRoomSettingsRightsTabView'; import { NavigatorRoomSettingsVipChatTabView } from './views/tab-vipchat/NavigatorRoomSettingsVipChatTabView'; const TABS: string[] = [ @@ -23,7 +25,6 @@ export const NavigatorRoomSettingsView: FC<{}> = props => const updateSettings = useCallback((roomSettings: RoomSettingsData) => { - console.log('update', roomSettings); setRoomSettingsData(roomSettings); }, [ setRoomSettingsData ]); @@ -34,9 +35,43 @@ export const NavigatorRoomSettingsView: FC<{}> = props => if(!parser) return; setRoomSettingsData(new RoomSettingsData(parser)); + SendMessageHook(new RoomUsersWithRightsComposer(parser.roomId)); + SendMessageHook(new RoomBannedUsersComposer(parser.roomId)); }, []); - + + const onRoomUsersWithRightsEvent = useCallback((event: RoomUsersWithRightsEvent) => + { + const parser = event.getParser(); + + if(!parser || !roomSettingsData) return; + + if(roomSettingsData.roomId !== parser.roomId) return; + + const data = Object.assign({}, roomSettingsData); + + data.usersWithRights = new Map(parser.users); + + setRoomSettingsData(data); + }, [roomSettingsData]); + + const onRoomBannedUsersEvent = useCallback((event: RoomBannedUsersEvent) => + { + const parser = event.getParser(); + + if(!parser || !roomSettingsData) return; + + if(roomSettingsData.roomId !== parser.roomId) return; + + const data = Object.assign({}, roomSettingsData); + + data.bannedUsers = new Map(parser.users); + + setRoomSettingsData(data); + }, [roomSettingsData]); + CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent); + CreateMessageHook(RoomUsersWithRightsEvent, onRoomUsersWithRightsEvent); + CreateMessageHook(RoomBannedUsersEvent, onRoomBannedUsersEvent); const save = useCallback((data: RoomSettingsData) => { @@ -94,7 +129,9 @@ export const NavigatorRoomSettingsView: FC<{}> = props => { currentTab === TABS[0] && } { currentTab === TABS[1] && } - { currentTab === TABS[3] && } + { currentTab === TABS[2] && } + { currentTab === TABS[3] && } + { currentTab === TABS[4] && } ); diff --git a/src/views/navigator/views/room-settings/views/tab-mod/NavigatorRoomSettingsModTabView.tsx b/src/views/navigator/views/room-settings/views/tab-mod/NavigatorRoomSettingsModTabView.tsx new file mode 100644 index 00000000..0a288a0e --- /dev/null +++ b/src/views/navigator/views/room-settings/views/tab-mod/NavigatorRoomSettingsModTabView.tsx @@ -0,0 +1,107 @@ +import { RoomUnbanUserComposer } from '@nitrots/nitro-renderer'; +import { FC, useCallback, useState } from 'react'; +import { LocalizeText } from '../../../../../../api'; +import { SendMessageHook } from '../../../../../../hooks'; +import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; + +export const NavigatorRoomSettingsModTabView: FC = props => +{ + const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props; + const [selectedUserId, setSelectedUserId] = useState(-1); + + const handleChange = useCallback((field: string, value: string | number | boolean) => + { + const clone = Object.assign({}, roomSettingsData); + let save = true; + + switch(field) + { + case 'moderation_mute': + clone.muteState = Number(value); + break; + case 'moderation_kick': + clone.kickState = Number(value); + break; + case 'moderation_ban': + clone.banState = Number(value); + break; + } + + setRoomSettingsData(clone); + + if(save) onSave(clone); + }, [roomSettingsData, setRoomSettingsData, onSave]); + + const unBanUser = useCallback((userId: number) => + { + const clone = Object.assign({}, roomSettingsData); + + clone.bannedUsers.delete(userId); + setRoomSettingsData(clone); + + SendMessageHook(new RoomUnbanUserComposer(userId, roomSettingsData.roomId)); + setSelectedUserId(-1); + }, [roomSettingsData, setRoomSettingsData]); + + return ( + <> +
{LocalizeText('navigator.roomsettings.moderation.header')}
+
+
{LocalizeText('navigator.roomsettings.moderation.mute.header')}
+
+ handleChange('moderation_mute', 0)} /> + +
+
+ handleChange('moderation_mute', 1)} /> + +
+
+
+
{LocalizeText('navigator.roomsettings.moderation.kick.header')}
+
+ handleChange('moderation_kick', 0)} /> + +
+
+ handleChange('moderation_kick', 1)} /> + +
+
+ handleChange('moderation_kick', 2)} /> + +
+
+
+
{LocalizeText('navigator.roomsettings.moderation.ban.header')}
+
+ handleChange('moderation_ban', 0)} /> + +
+
+ handleChange('moderation_ban', 1)} /> + +
+
+
{LocalizeText('navigator.roomsettings.moderation.banned.users')} ({roomSettingsData.bannedUsers.size})
+
+
+
+ { + Array.from(roomSettingsData.bannedUsers.entries()).map(([id, name], index) => + { + return
setSelectedUserId(id)} > + {name} +
+ }) + } +
+
+
+ +
+
+ + ); +} diff --git a/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx new file mode 100644 index 00000000..1e681a21 --- /dev/null +++ b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx @@ -0,0 +1,48 @@ +import { FC, useState } from 'react'; +import { LocalizeText } from '../../../../../../api'; +import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; + +export const NavigatorRoomSettingsRightsTabView: FC = props => +{ + const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props; + const [selectedUserId, setSelectedUserId] = useState(-1); + + return ( + <> +
+
+
{LocalizeText('navigator.flatctrls.userswithrights', ['displayed', 'total'], [roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString()])}
+
+
+
{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [roomSettingsData.friendsWithoutRights.size.toString(), roomSettingsData.friendsWithoutRights.size.toString()])}
+
+
+
+
+
+ { + Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) => + { + return
setSelectedUserId(id)} > + {name} +
+ }) + } +
+
+
+
+ { + Array.from(roomSettingsData.friendsWithoutRights.entries()).map(([id, name], index) => + { + return
setSelectedUserId(id)} > + {name} +
+ }) + } +
+
+
+ + ); +} diff --git a/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx b/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx index e87b788c..60a03539 100644 --- a/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx +++ b/src/views/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx @@ -8,7 +8,7 @@ export const NavigatorRoomSettingsVipChatTabView: FC { - const clone = Object.assign({}, roomSettingsData); + const clone = Object.assign({}, roomSettingsData); let save = true; switch(field) @@ -39,11 +39,11 @@ export const NavigatorRoomSettingsVipChatTabView: FC @@ -51,58 +51,58 @@ export const NavigatorRoomSettingsVipChatTabView: FC{LocalizeText('navigator.roomsettings.vip.info')}
{LocalizeText('navigator.roomsettings.vip_settings')}
- handleChange('hide_walls', e.target.checked) } /> - + handleChange('hide_walls', e.target.checked)} /> +
- handleChange('wall_thickness', event.target.value)}> + + + +
- handleChange('floor_thickness', event.target.value)}> + + + +
{LocalizeText('navigator.roomsettings.chat_settings')}
{LocalizeText('navigator.roomsettings.chat_settings.info')}
- handleChange('bubble_mode', event.target.value)}> + +
- handleChange('chat_weight', event.target.value)}> + + +
- handleChange('bubble_speed', event.target.value)}> + + +
- handleChange('flood_protection', event.target.value)}> + + +
- - handleChange('chat_distance', event.target.valueAsNumber) } onBlur={ () => onSave(roomSettingsData) } /> -
+ + handleChange('chat_distance', event.target.valueAsNumber)} onBlur={() => onSave(roomSettingsData)} /> + ); } From f09a0d734c0557a69ae0101860451dfaeb237f58 Mon Sep 17 00:00:00 2001 From: dank074 Date: Wed, 18 Aug 2021 15:50:15 -0500 Subject: [PATCH 3/5] fixed friends without rights --- .../friend-list/FriendListContentEvent.ts | 26 +++++++ src/events/friend-list/FriendListEvent.ts | 1 + src/views/friend-list/FriendListView.tsx | 10 ++- .../navigator/common/RoomSettingsData.ts | 4 +- .../NavigatorRoomSettingsView.scss | 26 ++++++- .../NavigatorRoomSettingsView.tsx | 17 +++++ .../NavigatorRoomSettingsAccessTabView.tsx | 2 + .../NavigatorRoomSettingsRightsTabView.tsx | 73 ++++++++++++++++--- 8 files changed, 143 insertions(+), 16 deletions(-) create mode 100644 src/events/friend-list/FriendListContentEvent.ts diff --git a/src/events/friend-list/FriendListContentEvent.ts b/src/events/friend-list/FriendListContentEvent.ts new file mode 100644 index 00000000..4527d67c --- /dev/null +++ b/src/events/friend-list/FriendListContentEvent.ts @@ -0,0 +1,26 @@ +import { MessengerFriend } from '../../views/friend-list/common/MessengerFriend'; +import { FriendListEvent } from './FriendListEvent'; + +export class FriendListContentEvent extends FriendListEvent +{ + public static FRIEND_LIST_CONTENT: string = 'FLSFRE_FRIEND_LIST_CONTENT'; + + private _friends: Map; + + constructor(friends: MessengerFriend[]) + { + super(FriendListContentEvent.FRIEND_LIST_CONTENT); + + this._friends = new Map(); + + friends.forEach(entry => + { + this._friends.set(entry.id, entry.name); + }); + } + + public get friends(): Map + { + return this._friends; + } +} diff --git a/src/events/friend-list/FriendListEvent.ts b/src/events/friend-list/FriendListEvent.ts index 0d86b29b..d450144e 100644 --- a/src/events/friend-list/FriendListEvent.ts +++ b/src/events/friend-list/FriendListEvent.ts @@ -4,4 +4,5 @@ export class FriendListEvent extends NitroEvent { public static SHOW_FRIEND_LIST: string = 'IE_SHOW_FRIEND_LIST'; public static TOGGLE_FRIEND_LIST: string = 'IE_TOGGLE_FRIEND_LIST'; + public static REQUEST_FRIEND_LIST: string = 'FLSFRE_REQUEST_FRIEND_LIST'; } diff --git a/src/views/friend-list/FriendListView.tsx b/src/views/friend-list/FriendListView.tsx index 9c9190ba..eaa108ac 100644 --- a/src/views/friend-list/FriendListView.tsx +++ b/src/views/friend-list/FriendListView.tsx @@ -1,8 +1,9 @@ import { MessengerInitComposer, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectUserType } from '@nitrots/nitro-renderer'; -import React, { FC, useCallback, useEffect, useReducer, useState } from 'react'; +import { FC, useCallback, useEffect, useReducer, useState } from 'react'; import { createPortal } from 'react-dom'; import { GetRoomSession, LocalizeText } from '../../api'; import { FriendEnteredRoomEvent, FriendListEvent } from '../../events'; +import { FriendListContentEvent } from '../../events/friend-list/FriendListContentEvent'; import { FriendListSendFriendRequestEvent } from '../../events/friend-list/FriendListSendFriendRequestEvent'; import { useRoomEngineEvent } from '../../hooks/events'; import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event'; @@ -35,12 +36,17 @@ export const FriendListView: FC = props => case FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST: const requestEvent = (event as FriendListSendFriendRequestEvent); return; + case FriendListEvent.REQUEST_FRIEND_LIST: + console.log('requested'); + dispatchUiEvent(new FriendListContentEvent(friendListState.friends)); + return; } - }, []); + }, [friendListState.friends]); useUiEvent(FriendListEvent.SHOW_FRIEND_LIST, onFriendListEvent); useUiEvent(FriendListEvent.TOGGLE_FRIEND_LIST, onFriendListEvent); useUiEvent(FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST, onFriendListEvent); + useUiEvent(FriendListEvent.REQUEST_FRIEND_LIST, onFriendListEvent); const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) => { diff --git a/src/views/navigator/common/RoomSettingsData.ts b/src/views/navigator/common/RoomSettingsData.ts index 597c5892..35fec6f6 100644 --- a/src/views/navigator/common/RoomSettingsData.ts +++ b/src/views/navigator/common/RoomSettingsData.ts @@ -20,7 +20,7 @@ export default class RoomSettingsData public allowPetsEat: boolean; public usersWithRights: Map; - public friendsWithoutRights: Map; + public friends: Map; public hideWalls: boolean; public wallThickness: number; @@ -59,7 +59,7 @@ export default class RoomSettingsData this.allowPetsEat = parser.allowPetsEat; this.usersWithRights = new Map(); - this.friendsWithoutRights = new Map(); + this.friends = new Map(); this.hideWalls = parser.hideWalls; this.wallThickness = parser.thicknessWall; diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss index 3b9c28c0..0c681ba2 100644 --- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss @@ -6,8 +6,32 @@ } .list-container { - max-height: 150px; + max-height: 100px; + min-height: 100px; overflow-y: scroll; + background-color: white; + border-radius: 5px; + text-align: center; + + &.rights { + max-height: 80%; + min-height: 80%; + margin-bottom: 5px; + } + + &.friends-rights { + max-height: 90%; + min-height: 90%; + } + + .rights-button + { + float: right; + margin: 2px; + font-size: 7px; + padding: 3px; + min-height: unset; + } .list-item { &.selected { diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx index ebf71612..c2669b83 100644 --- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx @@ -1,6 +1,9 @@ import { RoomBannedUsersComposer, RoomBannedUsersEvent, RoomSettingsEvent, RoomUsersWithRightsComposer, RoomUsersWithRightsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback, useState } from 'react'; import { LocalizeText } from '../../../../api'; +import { FriendListEvent } from '../../../../events'; +import { FriendListContentEvent } from '../../../../events/friend-list/FriendListContentEvent'; +import { dispatchUiEvent, useUiEvent } from '../../../../hooks'; import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages'; import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout'; import RoomSettingsData from '../../common/RoomSettingsData'; @@ -52,6 +55,8 @@ export const NavigatorRoomSettingsView: FC<{}> = props => data.usersWithRights = new Map(parser.users); setRoomSettingsData(data); + + dispatchUiEvent(new FriendListEvent(FriendListEvent.REQUEST_FRIEND_LIST)); }, [roomSettingsData]); const onRoomBannedUsersEvent = useCallback((event: RoomBannedUsersEvent) => @@ -69,9 +74,21 @@ export const NavigatorRoomSettingsView: FC<{}> = props => setRoomSettingsData(data); }, [roomSettingsData]); + const onFriendsListContentEvent = useCallback((event: FriendListContentEvent) => + { + if(!roomSettingsData) return; + + const clone = Object.assign({}, roomSettingsData); + + clone.friends = event.friends; + + setRoomSettingsData(clone); + }, [roomSettingsData]); + CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent); CreateMessageHook(RoomUsersWithRightsEvent, onRoomUsersWithRightsEvent); CreateMessageHook(RoomBannedUsersEvent, onRoomBannedUsersEvent); + useUiEvent(FriendListContentEvent.FRIEND_LIST_CONTENT, onFriendsListContentEvent); const save = useCallback((data: RoomSettingsData) => { diff --git a/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx b/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx index 4acf0bdc..ef774f20 100644 --- a/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx +++ b/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx @@ -51,6 +51,8 @@ export const NavigatorRoomSettingsAccessTabView: FC +
{LocalizeText('navigator.roomsettings.roomaccess.caption')}
+
{ LocalizeText('navigator.roomsettings.roomaccess.info') }
{ LocalizeText('navigator.roomsettings.doormode') }
handleChange('lock_state', 0) } /> diff --git a/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx index 1e681a21..30f0a160 100644 --- a/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx +++ b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx @@ -1,11 +1,55 @@ -import { FC, useState } from 'react'; +import { RemoveAllRightsMessageComposer, RoomGiveRightsComposer, RoomTakeRightsComposer } from '@nitrots/nitro-renderer'; +import { FC, useCallback, useMemo } from 'react'; import { LocalizeText } from '../../../../../../api'; +import { SendMessageHook } from '../../../../../../hooks'; import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; export const NavigatorRoomSettingsRightsTabView: FC = props => { const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props; - const [selectedUserId, setSelectedUserId] = useState(-1); + + const removeUserRights = useCallback( (userId: number) => + { + const clone = Object.assign({}, roomSettingsData); + + clone.usersWithRights.delete(userId); + + setRoomSettingsData(clone); + SendMessageHook(new RoomTakeRightsComposer(userId)); + }, [roomSettingsData, setRoomSettingsData]); + + const giveUserRights = useCallback( (userId: number, name: string) => + { + const clone = Object.assign({}, roomSettingsData); + + clone.usersWithRights.set(userId, name); + + setRoomSettingsData(clone); + SendMessageHook(new RoomGiveRightsComposer(userId)); + }, [roomSettingsData, setRoomSettingsData]); + + const removeAllRights = useCallback( () => + { + const clone = Object.assign({}, roomSettingsData); + + clone.usersWithRights = new Map(); + + setRoomSettingsData(clone); + SendMessageHook(new RemoveAllRightsMessageComposer(clone.roomId)); + }, [roomSettingsData, setRoomSettingsData]); + + const friendsWithoutRights = useMemo(() => + { + const map = new Map(); + + roomSettingsData.friends.forEach((name, id) => + { + if(!roomSettingsData.usersWithRights.has(id)) + map.set(id, name); + }); + + return map; + }, [roomSettingsData]); return ( <> @@ -14,29 +58,36 @@ export const NavigatorRoomSettingsRightsTabView: FC{LocalizeText('navigator.flatctrls.userswithrights', ['displayed', 'total'], [roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString()])}
-
{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [roomSettingsData.friendsWithoutRights.size.toString(), roomSettingsData.friendsWithoutRights.size.toString()])}
+
{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [friendsWithoutRights.size.toString(), friendsWithoutRights.size.toString()])}
-
+
-
+
{ Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) => { - return
setSelectedUserId(id)} > - {name} + return
+ {name} +
}) }
+
-
+
{ - Array.from(roomSettingsData.friendsWithoutRights.entries()).map(([id, name], index) => + Array.from(friendsWithoutRights.entries()).map(([id, name], index) => { - return
setSelectedUserId(id)} > - {name} + return
+ {name} +
}) } From 1bdcfd5cdf74cadf760d6d35c5a355da4d2ec997 Mon Sep 17 00:00:00 2001 From: Bill Date: Wed, 18 Aug 2021 22:29:00 -0400 Subject: [PATCH 4/5] Fix layout --- .../NavigatorRoomSettingsView.scss | 10 ++ .../NavigatorRoomSettingsRightsTabView.tsx | 125 +++++++++++++----- .../user-profile-icon/UserProfileIconView.tsx | 16 +++ .../UserProfileIconView.types.ts | 5 + 4 files changed, 120 insertions(+), 36 deletions(-) create mode 100644 src/views/shared/user-profile-icon/UserProfileIconView.tsx create mode 100644 src/views/shared/user-profile-icon/UserProfileIconView.types.ts diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss index 0c681ba2..b8d49327 100644 --- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss @@ -5,6 +5,16 @@ height: 350px; } + .user-rights-container { + + .row { + + .col:nth-child(even) { + //background: $light !important; + } + } + } + .list-container { max-height: 100px; min-height: 100px; diff --git a/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx index 30f0a160..4b63cc4d 100644 --- a/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx +++ b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx @@ -2,6 +2,7 @@ import { RemoveAllRightsMessageComposer, RoomGiveRightsComposer, RoomTakeRightsC import { FC, useCallback, useMemo } from 'react'; import { LocalizeText } from '../../../../../../api'; import { SendMessageHook } from '../../../../../../hooks'; +import { UserProfileIconView } from '../../../../../shared/user-profile-icon/UserProfileIconView'; import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; export const NavigatorRoomSettingsRightsTabView: FC = props => @@ -52,48 +53,100 @@ export const NavigatorRoomSettingsRightsTabView: FC +
-
-
{LocalizeText('navigator.flatctrls.userswithrights', ['displayed', 'total'], [roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString()])}
-
-
-
{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [friendsWithoutRights.size.toString(), friendsWithoutRights.size.toString()])}
+
+ filter
-
-
- { - Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) => - { - return
- {name} - -
- }) - } +
+
{ LocalizeText('navigator.flatctrls.userswithrights', [ 'displayed', 'total' ], [ roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString() ]) }
+
+
+ { Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) => + { + return ( +
removeUserRights(id) }> +
+ + { name } +
+ +
+ ); + }) + } +
+
-
-
-
- { - Array.from(friendsWithoutRights.entries()).map(([id, name], index) => - { - return
- {name} - -
- }) - } +
+
{ LocalizeText('navigator.flatctrls.friends', [ 'displayed', 'total' ], [ friendsWithoutRights.size.toString(), friendsWithoutRights.size.toString() ]) }
+
+
+ { Array.from(friendsWithoutRights.entries()).map(([id, name], index) => + { + return ( +
giveUserRights(id, name) }> + +
+ + { name } +
+
+ ); + }) + } +
-
-
- +
+
+
+ //
+ //
+ //
{LocalizeText('navigator.flatctrls.userswithrights', ['displayed', 'total'], [roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString()])}
+ //
+ //
+ //
{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [friendsWithoutRights.size.toString(), friendsWithoutRights.size.toString()])}
+ //
+ //
+ //
+ //
+ //
+ // { + // Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) => + // { + // return ( + //
+ // {name} + // + //
+ // ); + // }) + // } + //
+ // + //
+ //
+ //
+ // { + // Array.from(friendsWithoutRights.entries()).map(([id, name], index) => + // { + // return ( + //
+ // {name} + // + //
+ // ); + // }) + // } + //
+ //
+ //
); } diff --git a/src/views/shared/user-profile-icon/UserProfileIconView.tsx b/src/views/shared/user-profile-icon/UserProfileIconView.tsx new file mode 100644 index 00000000..6d1c2dc6 --- /dev/null +++ b/src/views/shared/user-profile-icon/UserProfileIconView.tsx @@ -0,0 +1,16 @@ +import { FC, useCallback } from 'react'; +import { UserProfileIconViewProps } from './UserProfileIconView.types'; + +export const UserProfileIconView: FC = props => +{ + const { userId = -1, userName = null } = props; + + const visitProfile = useCallback(() => + { + + }, [ userId, userName ]); + + return ( + + ); +} diff --git a/src/views/shared/user-profile-icon/UserProfileIconView.types.ts b/src/views/shared/user-profile-icon/UserProfileIconView.types.ts new file mode 100644 index 00000000..1662dfa8 --- /dev/null +++ b/src/views/shared/user-profile-icon/UserProfileIconView.types.ts @@ -0,0 +1,5 @@ +export interface UserProfileIconViewProps +{ + userId?: number; + userName?: string; +} From a7e31afefc42dc518324c961a41e8a65950e9b5f Mon Sep 17 00:00:00 2001 From: dank074 Date: Wed, 18 Aug 2021 22:12:40 -0500 Subject: [PATCH 5/5] fix dumb event --- .../navigator/common/RoomSettingsData.ts | 23 ------------------- .../NavigatorRoomSettingsView.tsx | 20 ++++++++-------- .../NavigatorRoomSettingsRightsTabView.tsx | 10 ++++---- ...avigatorRoomSettingsRightsTabView.types.ts | 6 +++++ 4 files changed, 21 insertions(+), 38 deletions(-) create mode 100644 src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.types.ts diff --git a/src/views/navigator/common/RoomSettingsData.ts b/src/views/navigator/common/RoomSettingsData.ts index 35fec6f6..7144458f 100644 --- a/src/views/navigator/common/RoomSettingsData.ts +++ b/src/views/navigator/common/RoomSettingsData.ts @@ -20,7 +20,6 @@ export default class RoomSettingsData public allowPetsEat: boolean; public usersWithRights: Map; - public friends: Map; public hideWalls: boolean; public wallThickness: number; @@ -59,7 +58,6 @@ export default class RoomSettingsData this.allowPetsEat = parser.allowPetsEat; this.usersWithRights = new Map(); - this.friends = new Map(); this.hideWalls = parser.hideWalls; this.wallThickness = parser.thicknessWall; @@ -74,26 +72,5 @@ export default class RoomSettingsData this.kickState = parser.moderationSettings.allowKick; this.banState = parser.moderationSettings.allowBan; this.bannedUsers = new Map(); - this.selectedUserToUnban = 0; - } - - public selectUserToUnban(userId: number): void - { - if(this.selectedUserToUnban === userId) - { - this.selectedUserToUnban = 0; - } - else - { - this.selectedUserToUnban = userId; - } - } - - public get selectedUsernameToUnban(): string - { - if(this.selectedUserToUnban > 0) - return this.bannedUsers.get(this.selectedUserToUnban); - - return null; } } diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx index c2669b83..385a0a4f 100644 --- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx @@ -1,5 +1,5 @@ import { RoomBannedUsersComposer, RoomBannedUsersEvent, RoomSettingsEvent, RoomUsersWithRightsComposer, RoomUsersWithRightsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; +import { FC, useCallback, useEffect, useState } from 'react'; import { LocalizeText } from '../../../../api'; import { FriendListEvent } from '../../../../events'; import { FriendListContentEvent } from '../../../../events/friend-list/FriendListContentEvent'; @@ -25,6 +25,7 @@ export const NavigatorRoomSettingsView: FC<{}> = props => { const [ roomSettingsData, setRoomSettingsData ] = useState(null); const [ currentTab, setCurrentTab ] = useState(TABS[0]); + const [ friends, setFriends ] = useState>(new Map()); const updateSettings = useCallback((roomSettings: RoomSettingsData) => { @@ -55,8 +56,6 @@ export const NavigatorRoomSettingsView: FC<{}> = props => data.usersWithRights = new Map(parser.users); setRoomSettingsData(data); - - dispatchUiEvent(new FriendListEvent(FriendListEvent.REQUEST_FRIEND_LIST)); }, [roomSettingsData]); const onRoomBannedUsersEvent = useCallback((event: RoomBannedUsersEvent) => @@ -76,13 +75,9 @@ export const NavigatorRoomSettingsView: FC<{}> = props => const onFriendsListContentEvent = useCallback((event: FriendListContentEvent) => { - if(!roomSettingsData) return; + if(!roomSettingsData || !event.friends) return; - const clone = Object.assign({}, roomSettingsData); - - clone.friends = event.friends; - - setRoomSettingsData(clone); + setFriends(event.friends); }, [roomSettingsData]); CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent); @@ -90,6 +85,11 @@ export const NavigatorRoomSettingsView: FC<{}> = props => CreateMessageHook(RoomBannedUsersEvent, onRoomBannedUsersEvent); useUiEvent(FriendListContentEvent.FRIEND_LIST_CONTENT, onFriendsListContentEvent); + useEffect(() => + { + if(roomSettingsData) dispatchUiEvent(new FriendListEvent(FriendListEvent.REQUEST_FRIEND_LIST)); + }, [roomSettingsData]) + const save = useCallback((data: RoomSettingsData) => { SendMessageHook( @@ -146,7 +146,7 @@ export const NavigatorRoomSettingsView: FC<{}> = props => { currentTab === TABS[0] && } { currentTab === TABS[1] && } - { currentTab === TABS[2] && } + { currentTab === TABS[2] && } { currentTab === TABS[3] && } { currentTab === TABS[4] && } diff --git a/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx index 4b63cc4d..f91a328f 100644 --- a/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx +++ b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx @@ -3,11 +3,11 @@ import { FC, useCallback, useMemo } from 'react'; import { LocalizeText } from '../../../../../../api'; import { SendMessageHook } from '../../../../../../hooks'; import { UserProfileIconView } from '../../../../../shared/user-profile-icon/UserProfileIconView'; -import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; +import { NavigatorRoomSettingsRightsTabViewProps } from './NavigatorRoomSettingsRightsTabView.types'; -export const NavigatorRoomSettingsRightsTabView: FC = props => +export const NavigatorRoomSettingsRightsTabView: FC = props => { - const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props; + const { roomSettingsData = null, setRoomSettingsData = null, onSave = null, friends = null } = props; const removeUserRights = useCallback( (userId: number) => { @@ -43,14 +43,14 @@ export const NavigatorRoomSettingsRightsTabView: FC(); - roomSettingsData.friends.forEach((name, id) => + friends.forEach((name, id) => { if(!roomSettingsData.usersWithRights.has(id)) map.set(id, name); }); return map; - }, [roomSettingsData]); + }, [friends, roomSettingsData]); return (
diff --git a/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.types.ts b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.types.ts new file mode 100644 index 00000000..496eaf2a --- /dev/null +++ b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.types.ts @@ -0,0 +1,6 @@ +import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; + +export interface NavigatorRoomSettingsRightsTabViewProps extends NavigatorRoomSettingsTabViewProps +{ + friends: Map; +}