Make entire rooms state immutable.

src/components/Room.js

@@ -1,9 +1,9 @@
 import React, { PropTypes } from "react";
 import { Link } from "react-router";
 
-const Room = ({ name, room }) => {
+const Room = ({ name, membership, userCount }) => {
     const classes = ["room"];
-    if (room.membership == "Member") {
+    if (membership == "Member") {
         classes.push("room-joined");
     }
 
@@ -16,17 +16,15 @@ const Room = ({ name, room }) => {
             className={classes.join(" ")}
         >
             <span className="room-name">{name}</span>
-            <span className="room-user-count">({room.user_count})</span>
+            <span className="room-user-count">({userCount})</span>
         </Link>
     );
 };
 
 Room.propTypes = {
     name: PropTypes.string.isRequired,
-    room: PropTypes.shape({
-        membership: PropTypes.string.isRequired,
-        user_count: PropTypes.number.isRequired
-    })
+    membership: PropTypes.string.isRequired,
+    userCount: PropTypes.number.isRequired
 };
 
 export default Room;

src/components/RoomChatHeader.js

@@ -58,8 +58,7 @@ RoomChatHeader.propTypes = {
         showUsers: PropTypes.bool
     }),
     roomActions: PropTypes.shape({
-        leave: PropTypes.func.isRequired,
-        select: PropTypes.func.isRequired
+        leave: PropTypes.func.isRequired
     }).isRequired,
     router: PropTypes.object.isRequired
 };

src/components/RoomList.js

@@ -13,7 +13,7 @@ class RoomList extends React.Component {
     }
 
     render() {
-        const { selected, roomMap, roomActions } = this.props;
+        const { roomMap, roomActions } = this.props;
 
         const children = [];
 
@@ -22,7 +22,8 @@ class RoomList extends React.Component {
                 <li key={roomName}>
                     <Room
                         name={roomName}
-                        room={roomData}
+                        membership={roomData.get("membership")}
+                        userCount={roomData.get("user_count")}
                     />
                 </li>
             );
@@ -41,8 +42,7 @@ RoomList.propTypes = {
     roomMap: PropTypes.object.isRequired,
     roomActions: PropTypes.shape({
         getList: PropTypes.func.isRequired
-    }).isRequired,
-    selected: PropTypes.string
+    }).isRequired
 };
 
 export default RoomList;

src/containers/RoomsPane.js

@@ -23,20 +23,24 @@ class RoomsPane extends React.Component {
         if (params && params.roomName) {
             roomName = decodeURIComponent(atob(params.roomName));
 
-            const { membership, messages, showUsers } = roomMap.get(roomName);
-            const room = {
-                name: roomName,
-                membership,
-                messages,
-                showUsers
-            };
-            roomChat = (
-                <RoomChat
-                    loginUserName={loginUserName}
-                    room={room}
-                    roomActions={roomActions}
-                />
-            );
+            const roomData = roomMap.get(roomName);
+
+            if (roomData) {
+                const room = {
+                    name: roomName,
+                    membership: roomData.get("membership"),
+                    messages:   roomData.get("messages"),
+                    showUsers:  roomData.get("showUsers")
+                };
+
+                roomChat = (
+                    <RoomChat
+                        loginUserName={loginUserName}
+                        room={room}
+                        roomActions={roomActions}
+                    />
+                );
+            }
         }
 
         return (
@@ -44,7 +48,6 @@ class RoomsPane extends React.Component {
                 <RoomList
                     roomMap={roomMap}
                     roomActions={roomActions}
-                    selected={roomName}
                 />
                 <div id="room-selected-pane">
                     {roomChat}

src/reducers/rooms.js

@@ -32,16 +32,19 @@ const reduceRoomList = (state, roomList) => {
     let newRoomMap = Immutable.OrderedMap();
 
     for (const [ roomName, newRoomData ] of roomList) {
-        // Transform room_data.messages to an immutable list.
-        newRoomData.messages = Immutable.List(newRoomData.messages);
         // Get the old room data.
-        const roomData = roomMap.get(roomName);
+        let roomData = roomMap.get(roomName);
+        if (roomData) {
+            // Scrap the old message list, we only want the new message list.
+            roomData.remove("messages");
+        } else {
+            // If the room did not exist, make up an empty one.
+            roomData = Immutable.Map();
+        }
         // Merge the old data and the new data, overwriting with new data if
         // conflicting.
-        const mergedRoomData = {
-            ...roomData,
-            ...newRoomData
-        };
+        const mergedRoomData = roomData.merge(newRoomData);
+        // Insert that in the new room map.
         newRoomMap = newRoomMap.set(roomName, mergedRoomData);
     }
 
@@ -53,24 +56,17 @@ const reduceRoomList = (state, roomList) => {
 const reduceReceiveMessageRoom = (roomData, { variant, data }) => {
     switch (variant) {
         case "RoomJoinResponse":
-            return {
-                ...roomData,
-                membership: "Member"
-            };
+            return roomData.set("membership", "Member");
 
         case "RoomLeaveResponse":
-            return {
-                ...roomData,
-                membership: "NonMember"
-            };
+            return roomData.set("membership", "NonMember");
 
         case "RoomMessageResponse":
         {
             const { user_name, message } = data;
-            return {
-                ...roomData,
-                messages: roomData.messages.push({ user_name, message })
-            };
+            const messages = roomData.get("messages")
+                .push({user_name, message});
+            return roomData.set("messages", messages);
         }
     }
 };
@@ -83,7 +79,6 @@ const reduceReceiveMessage = (state, message) => {
         case "RoomMessageResponse":
         {
             const { room_name } = data;
-            const roomMap = state.get("roomMap");
             return state.updateIn(["roomMap", data.room_name], (roomData) => {
                 if (roomData) {
                     return reduceReceiveMessageRoom(roomData, message);
@@ -105,28 +100,16 @@ const reduceReceiveMessage = (state, message) => {
 const reduceRoom = (roomData, { type, payload }) => {
     switch (type) {
         case ROOM_JOIN:
-            return {
-                ...roomData,
-                membership: "Joining"
-            };
+            return roomData.set("membership", "Joining");
 
         case ROOM_LEAVE:
-            return {
-                ...roomData,
-                membership: "Leaving"
-            };
+            return roomData.set("membership", "Leaving");
 
         case ROOM_SHOW_USERS:
-            return {
-                ...roomData,
-                showUsers: true
-            };
+            return roomData.set("showUsers", true);
 
         case ROOM_HIDE_USERS:
-            return {
-                ...roomData,
-                showUsers: false
-            };
+            return roomData.set("showUsers", false);
     }
 };