allow edit of user name

client/src/components/Sidebar/UserList/index.tsx

@@ -1,15 +1,26 @@
-import React, { useContext } from 'react'
-import { UserInfoContext } from "@/contexts";
+import React, { useContext, useRef, useState } from 'react'
+import { UserInfoContext, SocketContext } from "@/contexts";
 import { UserInfo } from "@/contexts/UserInfoContext";
 import AvatarDOM from "@/components/AvatarCanvas/AvatarDOM"
+import { SIOChannel } from "@/contexts/SocketIOContext";
 
 const UserList = () => {
   // TODO: Need to have selfUserInfo here as well
   const { userInfos } = useContext(UserInfoContext);
+  const userInfosRef = useRef(userInfos);
+  const { socket } = useContext(SocketContext);
+
+  const editName = () => {
+    const newName = prompt('Enter new name');
+    if (newName) {
+      socket.emit(SIOChannel.EDIT_USER_NAME, newName);
+    }
+  };
+
   // FIXME: Styling of user list
   return (
     <>
-      {(Object.values(userInfos) as UserInfo[]).map((userInfo: UserInfo, index: number) => (
+      {(Object.values(userInfosRef.current) as UserInfo[]).map((userInfo: UserInfo, index: number) => (
       userInfo.name &&
       <div className="sidebar__userlist-item" key={index}>
         <AvatarDOM
@@ -24,6 +35,7 @@ const UserList = () => {
           mute={userInfo.mute}
         />
         <span>{userInfo.name}</span>
+        {userInfo.id === socket.id && <button className="edit-btn" onClick={() => editName()}>Edit</button>}
       </div>
       ))}
     </>

client/src/components/Sidebar/style.scss

@@ -59,6 +59,10 @@ button[data-active=inactive] {
     }
   }
 
+  .edit-btn {
+    color: black;
+    margin-left: auto;
+  }
 }
 
 .sidebar[data-open=open] {

client/src/contexts/SocketIOContext.tsx

@@ -20,6 +20,7 @@ export enum SIOChannel {
   ANSWER = "ANSWER",
   OFFER = "OFFER",
   NUM_USERS = "NUM_USERS",
+  EDIT_USER_NAME = "EDIT_USER_NAME",
   CONNECT_ERROR = "connect_error", // Predefined string by socketio.
 }
 

client/src/contexts/UserInfoContext.tsx

@@ -57,6 +57,14 @@ export const UserInfoProvider = ({ children }: { children: JSX.Element }): JSX.E
         const { [action.id]: _toRemove, ...removed } = userInfos;
         return removed;
       }
+      case "editUserName": {
+        Object.keys(userInfos).forEach(key => {
+          if (userInfos[key].id === action.id && action.data.name) {
+            userInfos[key].name = action.data.name;
+          }
+        })
+        return { ...userInfos };
+      }
       default:
         return userInfos;
     }
@@ -75,8 +83,11 @@ export const UserInfoProvider = ({ children }: { children: JSX.Element }): JSX.E
   const removeUserInfo = useCallback((userId: string) => {
     dispatch({ type: "remove", data: {}, id: userId });
   }, []);
+  const editUserName = useCallback((userId: string, name: string) => {
+    dispatch({ type: "editUserName", data: { name }, id: userId });
+  }, []);
   return (
-    <UserInfoContext.Provider value={{ userInfos, addUserInfo, removeUserInfo }}>
+    <UserInfoContext.Provider value={{ userInfos, addUserInfo, removeUserInfo, editUserName }}>
       {children}
     </UserInfoContext.Provider>
   );

client/src/pages/RoomPage/index.tsx

@@ -27,7 +27,7 @@ function RoomPage({ name }: { name: string }): JSX.Element {
   const visualizerRef = useRef(visualizer);
   const [selfUserInfo, setSelfUserInfo] = useState<UserInfo>({ ...defaultUserInfo, name });
   const selfUserInfoRef = useRef(selfUserInfo);
-  const { userInfos, addUserInfo, removeUserInfo } = useContext(UserInfoContext);
+  const { userInfos, addUserInfo, removeUserInfo, editUserName } = useContext(UserInfoContext);
   const userInfosRef = useRef(userInfos)
   const history = useHistory();
   const [showModal, setShowModal] = useState(false);
@@ -156,6 +156,10 @@ function RoomPage({ name }: { name: string }): JSX.Element {
       }
     });
 
+    socket.on(SIOChannel.EDIT_USER_NAME, ({ id, name }) => {
+      editUserName(id, name);
+    });
+
     updateVisualizer(new AudioVisualizer(onAudioActivity));
 
     window.onbeforeunload = () => {

server/src/index.ts

@@ -133,6 +133,10 @@ io.of((nsp, query, next) => {
         io.of(roomName).to(sdpSenderId).emit("SDP_RECEIVED");
       });
 
+      socket.on("EDIT_USER_NAME", (name) => {
+        io.of(roomName).emit("EDIT_USER_NAME", { id: socket.id, name });
+      });
+
       socket.on("LEAVE", () => {
         io.of(roomName).emit("LEAVE", { id: socket.id });
       });