Add RoomUserList.

src/actions/RoomActions.js

@@ -3,7 +3,9 @@ import {
     ROOM_JOIN,
     ROOM_LEAVE,
     ROOM_MESSAGE,
-    ROOM_SELECT
+    ROOM_SELECT,
+    ROOM_SHOW_USERS,
+    ROOM_HIDE_USERS
 } from "../constants/ActionTypes";
 
 export default ({
@@ -32,5 +34,15 @@ export default ({
             room_name,
             message
         }
+    }),
+
+    showUsers: (room_name) => ({
+        type: ROOM_SHOW_USERS,
+        payload: room_name
+    }),
+
+    hideUsers: (room_name) => ({
+        type: ROOM_HIDE_USERS,
+        payload: room_name
     })
 });

src/components/Room.js

@@ -10,7 +10,8 @@ const Room = ({ isSelected, name, onClick, room }) => {
     }
     return (
         <a className={classes.join(" ")} onClick={onClick} href="#">
-            {name}
+            <span className="room-name">{name}</span>
+            <span className="room-user-count">({room.user_count})</span>
         </a>
     );
 };
@@ -20,7 +21,8 @@ Room.propTypes = {
     name: PropTypes.string.isRequired,
     onClick: PropTypes.func.isRequired,
     room: PropTypes.shape({
-        membership: PropTypes.string.isRequired
+        membership: PropTypes.string.isRequired,
+        user_count: PropTypes.number.isRequired
     })
 };
 

src/components/RoomChat.js

@@ -40,18 +40,23 @@ class RoomChat extends React.Component {
             );
         }
 
-        const { name, membership, messages } = room;
+        const { name, membership, messages, showUsers } = room;
+
+        const header = (
+            <RoomChatHeader
+                room={{
+                    membership,
+                    name,
+                    showUsers
+                }}
+                roomActions={roomActions}
+            />
+        );
 
         if (membership != "Member") {
             return (
                 <div id={ID}>
-                    <RoomChatHeader
-                        room={{
-                            membership,
-                            name
-                        }}
-                        roomActions={roomActions}
-                    />
+                    {header}
                 </div>
             );
         }
@@ -59,13 +64,7 @@ class RoomChat extends React.Component {
         // room.membership == "Member"
         return (
             <div id={ID}>
-                <RoomChatHeader
-                    room={{
-                        membership,
-                        name
-                    }}
-                    roomActions={roomActions}
-                />
+                {header}
                 <RoomChatMessageList
                     login_user_name={login_user_name}
                     messages={messages}

src/components/RoomChatHeader.js

@@ -1,10 +1,11 @@
 import React, { PropTypes } from "react";
 import ImmutablePropTypes from "react-immutable-proptypes";
 
-const make_header = (title, button) => (
+const make_header = (title, showUsersButton, leaveButton) => (
     <div id="room-chat-header">
         <div id="room-chat-header-title">{title}</div>
-        {button}
+        {showUsersButton}
+        {leaveButton}
     </div>
 );
 
@@ -16,12 +17,26 @@ const RoomChatHeader = ({ room, roomActions }) => {
     switch (room.membership) {
         case "Member":
         {
-            const onClick = (event) => {
+            const onClickLeave = (event) => {
                 roomActions.select(null);
                 roomActions.leave(room.name);
             };
-            const button = <button onClick={onClick}>Leave</button>;
-            return make_header(room.name, button);
+            const leaveButton = <button onClick={onClickLeave}>Leave</button>;
+
+            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 make_header(room.name, toggleUsersButton, leaveButton);
         }
 
         case "NonMember":
@@ -38,7 +53,8 @@ const RoomChatHeader = ({ room, roomActions }) => {
 RoomChatHeader.propTypes = {
     room: PropTypes.shape({
         membership: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired
+        name: PropTypes.string.isRequired,
+        showUsers: PropTypes.bool
     }),
     roomActions: PropTypes.shape({
         leave: PropTypes.func.isRequired,

src/components/RoomUserList.js

@@ -0,0 +1,25 @@
+import React, { PropTypes } from "react";
+
+const RoomUserList = ({ users }) => {
+    // Append all users
+    const children = [];
+    let i = 0;
+    for (const user of users) {
+        children.push(
+            <li key={i} className="room-user">
+                {user}
+            </li>
+        );
+        i++;
+    }
+
+    return <ul id="room-user-list">{children}</ul>;
+};
+
+RoomUserList.propTypes = {
+    users: PropTypes.arrayOf(
+       PropTypes.string.isRequired
+    ).isRequired
+};
+
+export default RoomUserList;

src/constants/ActionTypes.js

@@ -11,8 +11,10 @@ export const SOCKET_SEND_MESSAGE    = "SOCKET_SEND_MESSAGE";
 export const LOGIN_GET_STATUS = "LOGIN_GET_STATUS";
 
 // Room actions
-export const ROOM_GET_LIST = "ROOM_GET_LIST";
-export const ROOM_SELECT   = "ROOM_SELECT";
-export const ROOM_JOIN     = "ROOM_JOIN";
-export const ROOM_LEAVE    = "ROOM_LEAVE";
-export const ROOM_MESSAGE  = "ROOM_MESSAGE";
+export const ROOM_GET_LIST   = "ROOM_GET_LIST";
+export const ROOM_SELECT     = "ROOM_SELECT";
+export const ROOM_JOIN       = "ROOM_JOIN";
+export const ROOM_LEAVE      = "ROOM_LEAVE";
+export const ROOM_MESSAGE    = "ROOM_MESSAGE";
+export const ROOM_SHOW_USERS = "ROOM_SHOW_USERS";
+export const ROOM_HIDE_USERS = "ROOM_HIDE_USERS";

src/containers/RoomsPane.js

@@ -5,6 +5,7 @@ import ImmutablePropTypes from "react-immutable-proptypes";
 
 import RoomChat from "../components/RoomChat";
 import RoomList from "../components/RoomList";
+import RoomUserList from "../components/RoomUserList";
 
 class RoomsPane extends React.Component {
     constructor(props) {
@@ -22,6 +23,11 @@ class RoomsPane extends React.Component {
             };
         }
 
+        let roomUserList;
+        if (room && room.showUsers) {
+            roomUserList = <RoomUserList users={room.members} />;
+        }
+
         return (
             <div id="rooms-pane">
                 <RoomList
@@ -29,11 +35,14 @@ class RoomsPane extends React.Component {
                     roomActions={roomActions}
                     selected={selected}
                 />
-                <RoomChat
-                    login_user_name={login_user_name}
-                    room={room}
-                    roomActions={roomActions}
-                />
+                <div id="room-selected-pane">
+                    <RoomChat
+                        login_user_name={login_user_name}
+                        room={room}
+                        roomActions={roomActions}
+                    />
+                    {roomUserList}
+                </div>
             </div>
         );
     }

src/reducers/rooms.js

@@ -5,6 +5,8 @@ import {
     ROOM_LEAVE,
     ROOM_MESSAGE,
     ROOM_SELECT,
+    ROOM_SHOW_USERS,
+    ROOM_HIDE_USERS,
     SOCKET_RECEIVE_MESSAGE
 } from "../constants/ActionTypes";
 
@@ -131,6 +133,30 @@ export default (state = initialState, action) => {
             };
         }
 
+        case ROOM_SHOW_USERS:
+        {
+            const rooms = state.rooms.set(payload, {
+                ...state.rooms.get(payload),
+                showUsers: true
+            });
+            return {
+                ...state,
+                rooms
+            };
+        }
+
+        case ROOM_HIDE_USERS:
+        {
+            const rooms = state.rooms.set(payload, {
+                ...state.rooms.get(payload),
+                showUsers: false
+            });
+            return {
+                ...state,
+                rooms
+            };
+        }
+
         default:
             return state;
     }

src/styles/styles.scss

@@ -71,14 +71,30 @@ main {
     height: 100%;
 }
 
+#room-selected-pane {
+    height: 100%;
+    flex: 3;
+    display: flex;
+    flex-flow: row;
+}
+
 #room-chat {
     height: 100%;
-    width: 75%;
+    max-width: 100%;
+    flex: 2;
     display: flex;
     flex-flow: column;
     justify-content: space-between;
 }
 
+#room-user-list {
+    flex: 1;
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 1em;
+}
+
 #room-chat-header {
     flex: 1;
     padding: 0.8em;
@@ -117,10 +133,13 @@ main {
     display: flex;
     flex-flow: column;
     align-items: flex-start;
+    margin-right: 3em;
 }
 
 .room-chat-message-me {
     align-items: flex-end;
+    margin-left: 3em;
+    margin-right: 0;
 }
 
 .room-chat-message-user {
@@ -179,6 +198,7 @@ main {
 
 .room {
     display: flex;
+    justify-content: space-between;
     color: inherit;
     text-decoration: inherit;
     padding: .5em 1em;