fixed friends without rights

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<number, string>;
+
+    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<number, string>
+    {
+        return this._friends;
+    }
+}

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

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<FriendListViewProps> = 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) =>
     {

src/views/navigator/common/RoomSettingsData.ts

@@ -20,7 +20,7 @@ export default class RoomSettingsData
     public allowPetsEat: boolean;
 
     public usersWithRights: Map<number, string>;
-    public friendsWithoutRights: Map<number, string>;
+    public friends: Map<number, string>;
 
     public hideWalls: boolean;
     public wallThickness: number;
@@ -59,7 +59,7 @@ export default class RoomSettingsData
         this.allowPetsEat           = parser.allowPetsEat;
 
         this.usersWithRights        = new Map<number, string>();
-        this.friendsWithoutRights   = new Map<number, string>();
+        this.friends   = new Map<number, string>();
 
         this.hideWalls              = parser.hideWalls;
         this.wallThickness          = parser.thicknessWall;

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 {

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) =>
     {

src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx

@@ -51,6 +51,8 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
 
     return (
         <>
+            <div className="fw-bold">{LocalizeText('navigator.roomsettings.roomaccess.caption')}</div>
+            <div className="mb-3">{ LocalizeText('navigator.roomsettings.roomaccess.info') }</div>
             <div className="fw-bold">{ LocalizeText('navigator.roomsettings.doormode') }</div>
             <div className="form-check">
                 <input className="form-check-input" type="radio" name="lockState" checked={ roomSettingsData.lockState === 0 } onChange={ (e) => handleChange('lock_state', 0) } />

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<NavigatorRoomSettingsTabViewProps> = props =>
 {
     const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props;
-    const [selectedUserId, setSelectedUserId] = useState<number>(-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<number, string>();
+
+        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<NavigatorRoomSettingsTabView
                     <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.userswithrights', ['displayed', 'total'], [roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString()])}</div>
                 </div>
                 <div className="col-6">
-                    <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [roomSettingsData.friendsWithoutRights.size.toString(), roomSettingsData.friendsWithoutRights.size.toString()])}</div>
+                    <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [friendsWithoutRights.size.toString(), friendsWithoutRights.size.toString()])}</div>
                 </div>
             </div>
-            <div className="row">
+            <div className="row h-100">
                 <div className="col-6">
-                    <div className="list-container">
+                    <div className="list-container rights justify-content-center align-items-center">
                         {
                             Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
                             {
-                                return <div key={index} className={'list-item' + ((id === selectedUserId) ? ' selected' : '')} onClick={e => setSelectedUserId(id)} >
+                                return <div key={index} className={'list-item flex-row'} >
-                                    {name}
+                                    <span className="w-100" >{name}</span> 
+                                    <button className="btn btn-danger btn-sm rights-button" onClick={ () => removeUserRights(id) }>
+                                                <i className="fas fa-times" />
+                                    </button>
                                 </div>
                             })
                         }
                     </div>
+                    <button className={'btn btn-danger btn-sm w-100' + ((roomSettingsData.usersWithRights.size < 1) ? ' disabled' : '')} onClick={ removeAllRights } >{ LocalizeText('navigator.flatctrls.clear') }</button>
                 </div>
                 <div className="col-6">
-                    <div className="list-container">
+                    <div className="list-container h-100 friends-rights">
                         {
-                            Array.from(roomSettingsData.friendsWithoutRights.entries()).map(([id, name], index) =>
+                            Array.from(friendsWithoutRights.entries()).map(([id, name], index) =>
                             {
-                                return <div key={index} className={'list-item' + ((id === selectedUserId) ? ' selected' : '')} onClick={e => setSelectedUserId(id)} >
+                                return <div key={index} className={'list-item flex-row'} >
-                                    {name}
+                                    <span className="w-100">{name}</span>
+                                    <button className="btn btn-success btn-sm rights-button" onClick={ () => giveUserRights(id, name) }>
+                                                <i className="fas fa-chevron-left" />
+                                    </button>
                                 </div>
                             })
                         }