Refactor socket status into SocketStatusPane.

src/actions/socketActionsFactory.js

@@ -7,6 +7,7 @@ export default (socketClient) => ({
         const action = { type: SOCKET_SET_OPENING };
         try {
             socketClient.open(url);
+            action.payload = url;
         } catch (err) {
             action.error = true;
             action.payload = err;

src/components/ConnectForm.js

@@ -5,9 +5,9 @@ import { STATE_CLOSED } from "../constants/socket";
 
 
 const ConnectForm = (props) => {
-    const { fields: { url }, handleSubmit, socket, socketActions } = props;
+    const { fields: { url }, handleSubmit, socket, socketOpen } = props;
     const submit = (values, dispatch) => {
-        dispatch(socketActions.open(values.url));
+        dispatch(socketOpen(values.url));
     };
     return (
         <form onSubmit={handleSubmit(submit)}>
@@ -24,7 +24,7 @@ ConnectForm.propTypes = {
     fields: PropTypes.object.isRequired,
     handleSubmit: PropTypes.func.isRequired,
     socket: PropTypes.object.isRequired,
-    socketActions: PropTypes.object.isRequired
+    socketOpen: PropTypes.func.isRequired
 };
 
 export default reduxForm({

src/components/SocketStatusPane.js

@@ -0,0 +1,32 @@
+import React, { PropTypes } from "react";
+
+import {
+    STATE_OPENING, STATE_OPEN, STATE_CLOSING, STATE_CLOSED
+} from "../constants/socket";
+
+const SocketStatusPane = (props) => {
+    const { state, url } = props;
+    let string;
+    switch (state) {
+        case STATE_OPENING:
+            string = `connecting to ${url}`;
+            break;
+        case STATE_OPEN:
+            string = `connected to ${url}`;
+            break;
+        case STATE_CLOSING:
+            string = `disconnecting from ${url}`;
+            break;
+        case STATE_CLOSED:
+            string = `disconnected`;
+            break;
+    }
+    return <div>Connection status: {string}</div>;
+};
+
+SocketStatusPane.propTypes = {
+    state: PropTypes.number.isRequired,
+    url: PropTypes.string
+};
+
+export default SocketStatusPane;

src/components/SolsticeApp.js

@@ -1,21 +1,26 @@
 import React, {PropTypes} from "react";
 
 import ConnectForm from  "../components/ConnectForm";
+import SocketStatusPane from "../components/SocketStatusPane";
+
 import { STATE_OPEN } from "../constants/socket";
 
 const SolsticeApp = (props) => {
     const { socket, actions } = props;
     if (socket.state !== STATE_OPEN ) {
         return (
-            <ConnectForm socket={socket}
-                socketActions={actions.socketActions}/>
+            <main>
+                <ConnectForm socket={socket}
+                    socketOpen={actions.socketActions.open}/>
+                <SocketStatusPane {...socket} />
+            </main>
         );
     }
     return (
-        <div>
+        <main>
             <h1>Solstice web UI</h1>
-            <div>Socket open</div>
-        </div>
+            <SocketStatusPane {...socket} />
+        </main>
     );
 };
 

src/reducers/socket.js

@@ -16,23 +16,23 @@ export default function socket(state = initialState, action) {
             if (action.error) {
                 return state;
             }
-            return objectAssign({}, state, { state: STATE_OPENING });
+            return { ...state, state: STATE_OPENING, url: action.payload };
 
         case types.SOCKET_SET_OPEN:
-            return objectAssign({}, state, { state: STATE_OPEN });
+            return { ...state, state: STATE_OPEN };
 
         case types.SOCKET_SET_CLOSING:
             if (action.error) {
                 return state;
             }
-            return objectAssign({}, state, { state: STATE_CLOSING });
+            return { ...state, state: STATE_CLOSING };
 
         case types.SOCKET_SET_CLOSED:
-            return objectAssign({}, state, { state: STATE_CLOSED });
+            return { ...state, state: STATE_CLOSED };
 
         case types.SOCKET_SET_ERROR:
             if (state.state === STATE_OPENING) {
-                return objectAssign({}, state, { state: STATE_CLOSED });
+                return { ...state, state: STATE_CLOSED };
             }
             return state;
 
@@ -48,4 +48,3 @@ export default function socket(state = initialState, action) {
             return state;
     }
 }
-