feat: add participants view

client/src/components/ChatMenu.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useChatState } from "../contexts/ChatContext";
+
+function ChatMenu() {
+  const { actions, state } = useChatState();
+
+  return (
+    <div className="flex gap-4 w-full">
+      <button
+        onClick={() => actions.setMenu("chat")}
+        className={`w-1/2 py-4 ${
+          state.selectedMenu === "chat" ? "bg-white" : "bg-gray-100"
+        }`}
+      >
+        Chat
+      </button>
+      <button
+        onClick={() => actions.setMenu("participants")}
+        className={`w-1/2 py-4 ${
+          state.selectedMenu === "participants" ? "bg-white" : "bg-gray-100"
+        }`}
+      >
+        Participants
+      </button>
+    </div>
+  );
+}
+
+export default React.memo(ChatMenu);

client/src/components/ChatProvider.tsx

@@ -1,6 +1,6 @@
 import React, { useReducer } from "react";
 import { User } from "../../../shared";
-import { ChatContext, Message } from "../contexts/ChatContext";
+import { ChatContext, ChatState, Message } from "../contexts/ChatContext";
 import { chatReducer } from "../reducers/chatReducers";
 
 export function ChatProvider({ children }: { children: React.ReactNode }) {
@@ -8,6 +8,8 @@ export function ChatProvider({ children }: { children: React.ReactNode }) {
     messages: [],
     currentUser: null,
     isConnected: false,
+    participants: [],
+    selectedMenu: "chat",
   });
 
   const value = {
@@ -23,6 +25,10 @@ export function ChatProvider({ children }: { children: React.ReactNode }) {
       setUser: (user: User) => dispatch({ type: "SET_USER", payload: user }),
       setConnected: (isConnected: boolean) =>
         dispatch({ type: "SET_CONNECTED", payload: isConnected }),
+      setParticipants: (participants: User[]) =>
+        dispatch({ type: "SET_PARTICIPANTS", payload: participants }),
+      setMenu: (menu: ChatState["selectedMenu"]) =>
+        dispatch({ type: "SET_MENU", payload: menu }),
     },
   };
 

client/src/components/MessageDisplay.tsx

@@ -17,6 +17,9 @@ function ChatMessages({ sendMessage }: MessageDisplayProps) {
   const userId = state.currentUser?.userId;
   const messagesEndRef = useRef<HTMLDivElement>(null); // ref to an empty div at the end to scroll to
 
+  // this counter is used to generate unique keys for join/leave messages. This is not ideal and with more time I'd introduce server-side message IDs for all messages, not just chat messages
+  let messageCounter = 0;
+
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   };
@@ -65,7 +68,7 @@ function ChatMessages({ sendMessage }: MessageDisplayProps) {
         return (
           <div
             className="text-center text-gray-500 my-2"
-            key={`join-${message.payload.user.name}-${new Date()}`}
+            key={`join-${message.payload.user.name}-${messageCounter++}`}
           >
             {message.payload.user.name} joined!
           </div>
@@ -74,7 +77,7 @@ function ChatMessages({ sendMessage }: MessageDisplayProps) {
         return (
           <div
             className="text-center text-gray-500 my-2"
-            key={`leave-${message.payload.user.name}-${new Date()}`}
+            key={`leave-${message.payload.user.name}-${messageCounter++}`}
           >
             {message.payload.user.name} left!
           </div>

client/src/components/ParticipantsList.tsx

@@ -0,0 +1,18 @@
+import { useChatState } from "../contexts/ChatContext";
+
+function ParticipantList() {
+  const { state } = useChatState();
+
+  return (
+    <>
+      <h3 className="text-lg font-semibold">Participants</h3>
+      <ul>
+        {state.participants.map((participant) => (
+          <li key={participant.userId}>{participant.name}</li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+export default ParticipantList;

client/src/components/RoomHeader.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { useChatState } from "../contexts/ChatContext";
+
+interface RoomHeaderProps {
+  roomId: string;
+  isConnected: boolean;
+}
+
+function RoomHeader(props: RoomHeaderProps) {
+  const { state } = useChatState();
+
+  return (
+    <h2 className="text-xl bg-gray-100 p-4 flex justify-between items-center">
+      <span className="font-medium">Room ID: {props.roomId}</span>
+      {state.currentUser && (
+        <span className="font-medium">User: {state.currentUser?.name}</span>
+      )}
+      <span
+        className={`px-3 py-1 text-sm font-medium rounded-xl ${
+          props.isConnected
+            ? "bg-green-100 text-green-800"
+            : "bg-red-100 text-red-800"
+        }`}
+      >
+        {props.isConnected ? "Connected" : "Not Connected"}
+      </span>
+    </h2>
+  );
+}
+
+export default React.memo(RoomHeader);

client/src/contexts/ChatContext.tsx

@@ -15,6 +15,8 @@ export type ChatState = {
   messages: Message[];
   currentUser: User | null;
   isConnected: boolean;
+  participants: User[];
+  selectedMenu: "chat" | "participants";
 };
 
 export type ChatAction =
@@ -23,7 +25,9 @@ export type ChatAction =
   | { type: "DELETE_MESSAGE"; payload: string }
   | { type: "SET_USER"; payload: User }
   | { type: "SET_CONNECTED"; payload: boolean }
-  | { type: "CLEAR_MESSAGES" };
+  | { type: "CLEAR_MESSAGES" }
+  | { type: "SET_PARTICIPANTS"; payload: User[] }
+  | { type: "SET_MENU"; payload: ChatState["selectedMenu"] };
 
 export type ChatActions = {
   editMessage: (messageId: string, newContent: string) => void;
@@ -31,6 +35,8 @@ export type ChatActions = {
   deleteMessage: (messageId: string) => void;
   setUser: (user: User) => void;
   setConnected: (isConnected: boolean) => void;
+  setParticipants: (participants: User[]) => void;
+  setMenu: (menu: ChatState["selectedMenu"]) => void;
 };
 
 interface ChatContextType {

client/src/hooks/useWebSocket.ts

@@ -39,6 +39,10 @@ export function useWebSocket(roomId: string) {
           );
           break;
 
+        case "USER_LIST":
+          actions.setParticipants(message.payload.users);
+          break;
+
         default:
           console.error("Unknown message type", message);
       }

client/src/pages/Room.tsx

@@ -5,38 +5,41 @@ import { useWebSocket } from "../hooks/useWebSocket";
 import ChatMessages from "../components/MessageDisplay";
 import ChatInput from "../components/ChatInput";
 import { useChatState } from "../contexts/ChatContext";
+import ParticipantList from "../components/ParticipantsList";
+import ChatMenu from "../components/ChatMenu";
+import RoomHeader from "../components/RoomHeader";
 
 function Room() {
-  const { roomId } = useParams();
+  const { roomId } = useParams(); // can never be null as this Room component is only ever rendered if react-router matches the route WITH a roomId
   const { isConnected, connect, sendMessage } = useWebSocket(roomId ?? "");
   const { state } = useChatState();
 
+  if (!isConnected) {
+    return (
+      <Layout>
+        <section className="w-full">
+          <RoomHeader roomId={roomId!} isConnected={isConnected} />
+          <Connect onConnect={connect} />
+        </section>
+      </Layout>
+    );
+  }
+
+  // is connected
   return (
     <Layout>
       <section className="w-full">
-        <h2 className="text-xl bg-gray-100 p-4 flex justify-between items-center rounded-md shadow-sm">
+        <RoomHeader roomId={roomId!} isConnected={isConnected} />
-          <span className="font-medium">Room ID: {roomId}</span>
-          {state.currentUser && (
-            <span className="font-medium">User: {state.currentUser?.name}</span>
-          )}
-          <span
-            className={`px-3 py-1 rounded-full text-sm font-medium ${
-              isConnected
-                ? "bg-green-100 text-green-800"
-                : "bg-red-100 text-red-800"
-            }`}
-          >
-            {isConnected ? "Connected" : "Not Connected"}
-          </span>
-        </h2>
 
-        {!isConnected && <Connect onConnect={connect} />}
+        <ChatMenu />
-        {isConnected && (
+        {state.selectedMenu === "chat" && (
           <>
             <ChatMessages sendMessage={sendMessage} />
             <ChatInput sendMessage={sendMessage} />
           </>
         )}
+
+        {state.selectedMenu === "participants" && <ParticipantList />}
       </section>
     </Layout>
   );

client/src/reducers/chatReducers.ts

@@ -52,6 +52,17 @@ export function chatReducer(state: ChatState, action: ChatAction): ChatState {
         ...state,
         messages: [],
       };
+    case "SET_PARTICIPANTS":
+      return {
+        ...state,
+        participants: action.payload,
+      };
+
+    case "SET_MENU":
+      return {
+        ...state,
+        selectedMenu: action.payload,
+      };
     default:
       return state;
   }