Make login reducer state immutable.

src/containers/ConnectPage.js

@@ -33,7 +33,8 @@ class ConnectPage extends React.Component {
         const { actions, login, router, socket } = props;
         if (socket.state === STATE_OPEN)
         {
-            switch (login.status) {
+            const loginStatus = login.get("status");
+            switch (loginStatus) {
                 case LOGIN_STATUS_UNKNOWN:
                     actions.login.getStatus();
                     break;
@@ -46,22 +47,10 @@ class ConnectPage extends React.Component {
     }
 
     render() {
-        const { actions, login, socket } = this.props;
-
-        let loginStatusPane;
-
-        if (socket.state === STATE_OPEN &&
-                login.status === LOGIN_STATUS_UNKNOWN)
-        {
-            loginStatusPane = (
-                <LoginStatusPane {...login} loginActions={actions.login} />
-            );
-        }
-
+        const { actions, socket } = this.props;
         return (
             <div id="connect-page">
                 <ConnectForm socket={socket} actions={actions} />
-                {loginStatusPane}
             </div>
         );
     }

src/containers/Footer.js

@@ -1,5 +1,6 @@
 import React, { PropTypes } from "react";
 import { connect } from "react-redux";
+import ImmutablePropTypes from "react-immutable-proptypes";
 
 import LoginStatusPane from "../components/LoginStatusPane";
 import SocketStatusPane from "../components/SocketStatusPane";
@@ -8,13 +9,18 @@ const Footer = ({ login, socket }) => {
     return (
         <footer>
             <SocketStatusPane {...socket} />
-            <LoginStatusPane {...login} />
+            <LoginStatusPane
+                status={login.get("status")}
+                username={login.get("username")}
+                motd={login.get("motd")}
+                reason={login.get("reason")}
+            />
         </footer>
     );
 };
 
 Footer.propTypes = {
-    login: PropTypes.object.isRequired,
+    login: ImmutablePropTypes.map.isRequired,
     socket: PropTypes.object.isRequired
 };
 

src/containers/RoomsPane.js

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

src/createRoutes.js

@@ -13,7 +13,7 @@ const createRoutes = (store) => {
     const requireLoggedIn = (nextState, replaceState) => {
         let { socket, login } = store.getState();
         if (socket.state !== STATE_OPEN ||
-                login.status !== LOGIN_STATUS_SUCCESS)
+                login.get("status") !== LOGIN_STATUS_SUCCESS)
         {
             replaceState({}, "/");
         }

src/reducers/login.js

@@ -1,3 +1,5 @@
+import Immutable from "immutable";
+
 import {
     LOGIN_GET_STATUS,
     SOCKET_RECEIVE_MESSAGE
@@ -11,9 +13,9 @@ import {
     LOGIN_STATUS_FAILURE
 } from "../constants/login";
 
-const initialState = {
+const initialState = Immutable.Map({
     status: LOGIN_STATUS_UNKNOWN
-};
+});
 
 const reduceReceiveMessage = (state, message) => {
     const { variant, data } = message;
@@ -26,29 +28,26 @@ const reduceReceiveMessage = (state, message) => {
         case "Pending":
         { // sub-block required otherwise const username declarations clash
             const [ username ] = data.fields;
-            return {
-                status: LOGIN_STATUS_PENDING,
-                username
-            };
+            return state
+                .set("status", LOGIN_STATUS_PENDING)
+                .set("username", username);
         }
         case "Success":
         { // sub-block required otherwise const username declarations clash
             const [ username, motd ] = data.fields;
-            return {
-                status: LOGIN_STATUS_SUCCESS,
-                username,
-                motd
-            };
+            return state
+                .set("status", LOGIN_STATUS_SUCCESS)
+                .set("username", username)
+                .set("motd", motd);
         }
 
         case "Failure":
         { // sub-block required otherwise const username declarations clash
             const [ username, reason ] = data.fields;
-            return {
-                status: LOGIN_STATUS_FAILURE,
-                username,
-                reason
-            };
+            return state
+                .set("status", LOGIN_STATUS_FAILURE)
+                .set("username", username)
+                .set("reason", reason);
         }
 
         default:
@@ -60,10 +59,7 @@ export default (state = initialState, action) => {
     const { type, payload } = action;
     switch (type) {
         case LOGIN_GET_STATUS:
-            return {
-                ...state,
-                status: LOGIN_STATUS_GETTING
-            };
+            return state.set("status", LOGIN_STATUS_GETTING);
 
         case SOCKET_RECEIVE_MESSAGE:
             return reduceReceiveMessage(state, payload);