Add room details pane.

src/modules/room/RoomChat.tsx

@@ -1,14 +1,19 @@
-import { FC, useEffect } from "react";
+import { FC, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 
-import { Room, RoomMembership, roomSetMembership } from "modules/room/slice";
+import {
+  RoomState,
+  RoomMembership,
+  roomSetMembership,
+} from "modules/room/slice";
 import RoomChatForm from "modules/room/RoomChatForm";
 import RoomChatHeader from "modules/room/RoomChatHeader";
 import RoomChatMessageList from "modules/room/RoomChatMessageList";
+import RoomDetails from "modules/room/RoomDetails";
 
 interface Props {
   loginUserName: string;
-  room?: Room;
+  room?: RoomState;
 }
 
 const RoomChat: FC<Props> = ({ loginUserName, room }) => {
@@ -20,26 +25,39 @@ const RoomChat: FC<Props> = ({ loginUserName, room }) => {
     }
   });
 
-  const header = <RoomChatHeader room={room} />;
+  const [showDetails, setShowDetails] = useState<boolean>(false);
+  const toggleDetails = () => {
+    setShowDetails(!showDetails);
+  };
+
+  const header = <RoomChatHeader room={room} toggleDetails={toggleDetails} />;
   if (room === undefined || room.membership !== RoomMembership.Joined) {
     return (
       <div className="flex h-full justify-center items-center">{header}</div>
     );
   }
 
+  let details;
+  if (showDetails) {
+    details = <RoomDetails room={room} />;
+  }
+
   const { name, messages } = room;
   return (
-    <div className="flex flex-col h-full p-3">
-      {header}
-      <div className="flex-1">
-        <RoomChatMessageList
-          loginUserName={loginUserName}
-          messages={messages}
-        />
-      </div>
-      <div>
-        <RoomChatForm loginUserName={loginUserName} roomName={name} />
+    <div className="flex h-full w-full">
+      <div className="flex-grow flex flex-col h-full p-3">
+        {header}
+        <div className="flex-1">
+          <RoomChatMessageList
+            loginUserName={loginUserName}
+            messages={messages}
+          />
+        </div>
+        <div>
+          <RoomChatForm loginUserName={loginUserName} roomName={name} />
+        </div>
       </div>
+      {details}
     </div>
   );
 };

src/modules/room/RoomChatHeader.tsx

@@ -2,7 +2,11 @@ import { FC, ReactEventHandler } from "react";
 import { useDispatch } from "react-redux";
 import { useHistory } from "react-router";
 
-import { Room, RoomMembership, roomSetMembership } from "modules/room/slice";
+import {
+  RoomState,
+  RoomMembership,
+  roomSetMembership,
+} from "modules/room/slice";
 
 interface InnerProps {
   title: string;
@@ -11,15 +15,16 @@ interface InnerProps {
 const InnerHeader: FC<InnerProps> = ({ title, children }) => (
   <div className="flex justify-between px-3 py-1">
     <h3>{title}</h3>
-    {children}
+    <div className="flex gap-3">{children}</div>
   </div>
 );
 
 interface Props {
-  room?: Room;
+  room?: RoomState;
+  toggleDetails: () => void;
 }
 
-const RoomChatHeader: FC<Props> = ({ room }) => {
+const RoomChatHeader: FC<Props> = ({ room, toggleDetails }) => {
   const history = useHistory();
   const dispatch = useDispatch();
 
@@ -34,22 +39,14 @@ const RoomChatHeader: FC<Props> = ({ room }) => {
         dispatch(roomSetMembership([room.name, RoomMembership.Leaving]));
       };
 
-      /*
-      let toggleUsersButton;
-      if (room.showUsers) {
-        const onClick = (event) => roomActions.hideUsers(room.name);
-        toggleUsersButton = <button onClick={onClick}>Hide users</button>;
-      } else {
-        const onClick = (event) => roomActions.showUsers(room.name);
-        toggleUsersButton = <button onClick={onClick}>Show users</button>;
-      }
-      */
-
       return (
         <InnerHeader title={room.name}>
           <button className="button" onClick={onClickLeave}>
             Leave
           </button>
+          <button className="button" onClick={toggleDetails}>
+            Toggle details
+          </button>
         </InnerHeader>
       );
     }

src/modules/room/RoomDetails.tsx

@@ -0,0 +1,25 @@
+import { FC } from "react";
+
+import { RoomState, RoomMembership } from "modules/room/slice";
+
+const Members: FC<Props> = ({ room }) => {
+  const children = [];
+  for (const member of room.members) {
+    children.push(<li>{member}</li>);
+  }
+
+  return <ul>{children}</ul>;
+};
+
+interface Props {
+  room: RoomState;
+}
+
+const RoomDetails: FC<Props> = ({ room }) => (
+  <div className="flex flex-col gap-3 w-80 p-3 overflow-auto">
+    <h3>Members ({room.userCount})</h3>
+    <Members room={room} />
+  </div>
+);
+
+export default RoomDetails;