Make rooms state immutable, fix room leaving mechanism.

src/components/Room.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from "react";
 import { Link } from "react-router";
 
-const Room = ({ name, onClick, room }) => {
+const Room = ({ name, room }) => {
     const classes = ["room"];
     if (room.membership == "Member") {
         classes.push("room-joined");
@@ -23,7 +23,6 @@ const Room = ({ name, onClick, room }) => {
 
 Room.propTypes = {
     name: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired,
     room: PropTypes.shape({
         membership: PropTypes.string.isRequired,
         user_count: PropTypes.number.isRequired

src/components/RoomChatHeader.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from "react";
+import { withRouter } from "react-router";
 import ImmutablePropTypes from "react-immutable-proptypes";
 
 const make_header = (title, showUsersButton, leaveButton) => (
@@ -9,7 +10,7 @@ const make_header = (title, showUsersButton, leaveButton) => (
     </div>
 );
 
-const RoomChatHeader = ({ room, roomActions }) => {
+const RoomChatHeader = ({ room, roomActions, router }) => {
     if (!room) {
         return make_header("Select a room");
     }
@@ -18,7 +19,7 @@ const RoomChatHeader = ({ room, roomActions }) => {
         case "Member":
         {
             const onClickLeave = (event) => {
-                roomActions.select(null);
+                router.push("/app/rooms");
                 roomActions.leave(room.name);
             };
             const leaveButton = <button onClick={onClickLeave}>Leave</button>;
@@ -59,7 +60,8 @@ RoomChatHeader.propTypes = {
     roomActions: PropTypes.shape({
         leave: PropTypes.func.isRequired,
         select: PropTypes.func.isRequired
-    }).isRequired
+    }).isRequired,
+    router: PropTypes.object.isRequired
 };
 
-export default RoomChatHeader;
+export default withRouter(RoomChatHeader);

src/components/RoomList.js

@@ -17,17 +17,12 @@ class RoomList extends React.Component {
 
         const children = [];
 
-        for (const [room_name, room_data] of roomMap) {
-            const onClick = (event) => {
-                roomActions.select(room_name);
-            };
-
+        for (const [roomName, roomData] of roomMap) {
             children.push(
-                <li key={room_name}>
+                <li key={roomName}>
                     <Room
-                        onClick={onClick}
-                        name={room_name}
-                        room={room_data}
+                        name={roomName}
+                        room={roomData}
                     />
                 </li>
             );

src/containers/RoomsPane.js

@@ -64,7 +64,7 @@ RoomsPane.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-    roomMap: state.rooms.roomMap,
+    roomMap: state.rooms.get("roomMap"),
     loginUserName: state.login.username
 });
 

src/reducers/rooms.js

@@ -9,13 +9,14 @@ import {
     SOCKET_RECEIVE_MESSAGE
 } from "../constants/ActionTypes";
 
-const initialState = {
+const initialState = Immutable.Map({
     roomMap:        Immutable.OrderedMap(),
     roomNameByHash: Immutable.Map()
-};
+});
 
 const reduceRoomList = (state, roomList) => {
-    const { roomMap, roomNameByHash } = state;
+    const roomMap = state.get("roomMap");
+    const roomNameByHash = state.get("roomNameByHash");
 
     // First sort the room list by room name
     roomList.sort(([ roomName1 ], [ roomName2 ]) => {
@@ -43,11 +44,10 @@ const reduceRoomList = (state, roomList) => {
         };
         newRoomMap = newRoomMap.set(roomName, mergedRoomData);
     }
-    return {
-        ...state,
-        roomMap: newRoomMap,
-        roomNameByHash
-    };
+
+    return state
+        .set("roomMap", newRoomMap)
+        .set("roomNameByHash", roomNameByHash);
 };
 
 const reduceReceiveMessageRoom = (roomData, { variant, data }) => {
@@ -83,14 +83,15 @@ const reduceReceiveMessage = (state, message) => {
         case "RoomMessageResponse":
         {
             const { room_name } = data;
-            const roomData = state.roomMap.get(room_name);
-            const roomMap = state.roomMap.set(room_name,
-                reduceReceiveMessageRoom(roomData, { variant, data })
-            );
-            return {
-                ...state,
-                roomMap
-            };
+            const roomMap = state.get("roomMap");
+            return state.updateIn(["roomMap", data.room_name], (roomData) => {
+                if (roomData) {
+                    return reduceReceiveMessageRoom(roomData, message);
+                } else {
+                    console.log(`Error: unknown room ${data.room_name}`);
+                    return roomData;
+                }
+            });
         }
 
         case "RoomListResponse":
@@ -141,14 +142,14 @@ export default (state = initialState, action) => {
         case ROOM_SHOW_USERS:
         case ROOM_HIDE_USERS:
         {
-            const roomData = state.roomMap.get(payload);
-            const roomMap = state.roomMap.set(payload,
-                reduceRoom(roomData, action)
-            );
-            return {
-                ...state,
-                roomMap
-            };
+            return state.updateIn(["roomMap", payload], (roomData) => {
+                if (roomData) {
+                    return reduceRoom(roomData, action);
+                } else {
+                    console.log(`Error: unknown room ${payload}`);
+                    return roomData;
+                }
+            });
         }
 
         case ROOM_MESSAGE: