connection state indication

teropa · teropa · commit a6ffed056e5f · 2015-09-10T16:42:16.000+03:00
diff --git a/src/action_creators.js b/src/action_creators.js
@@ -5,6 +5,14 @@ export function setClientId(clientId) {
   };
 }
 
+export function setConnectionState(state, connected) {
+  return {
+    type: 'SET_CONNECTION_STATE',
+    state,
+    connected
+  };
+}
+
 export function setState(state) {
   return {
     type: 'SET_STATE',
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -1,8 +1,12 @@
 import React from 'react/addons';
 import {RouteHandler} from 'react-router';
+import {ConnectionStateContainer} from './ConnectionState';
 
 export default React.createClass({
   render: function() {
-    return <RouteHandler />
+    return <div>
+      <ConnectionStateContainer />
+      <RouteHandler />
+    </div>
   }
 });
diff --git a/src/components/ConnectionState.jsx b/src/components/ConnectionState.jsx
@@ -0,0 +1,24 @@
+import React from 'react/addons';
+import {connect} from 'react-redux';
+import {Map} from 'immutable';
+
+export const ConnectionState = React.createClass({
+  mixins: [React.addons.PureRenderMixin],
+  isVisible: function() {
+    return !this.props.connected;
+  },
+  getMessage: function() {
+    return `Not connected (${this.props.state})`;
+  },
+  render: function() {
+    return <div className="connectionState"
+                style={{display: this.isVisible() ? 'block' : 'none'}}>
+      {this.getMessage()}
+    </div>
+  }
+});
+
+
+export const ConnectionStateContainer = connect(
+  state => state.get('connection', Map()).toJS()
+)(ConnectionState);
diff --git a/src/index.jsx b/src/index.jsx
@@ -4,7 +4,7 @@ import {createStore, applyMiddleware} from 'redux';
 import {Provider} from 'react-redux';
 import io from 'socket.io-client';
 import reducer from './reducer';
-import {setClientId, setState} from './action_creators';
+import {setClientId, setState, setConnectionState} from './action_creators';
 import remoteActionMiddleware from './remote_action_middleware';
 import getClientId from './client_id';
 import App from './components/App';
@@ -17,6 +17,17 @@ const socket = io(`${location.protocol}//${location.hostname}:8090`);
 socket.on('state', state =>
   store.dispatch(setState(state))
 );
+[
+  'connect',
+  'connect_error',
+  'connect_timeout',
+  'reconnect',
+  'reconnecting',
+  'reconnect_error',
+  'reconnect_failed'
+].forEach(ev =>
+  socket.on(ev, () => store.dispatch(setConnectionState(ev, socket.connected)))
+);
 
 const createStoreWithMiddleware = applyMiddleware(
   remoteActionMiddleware(socket)
diff --git a/src/reducer.js b/src/reducer.js
@@ -1,5 +1,12 @@
 import {List, Map} from 'immutable';
 
+function setConnectionState(state, connectionState, connected) {
+  return state.set('connection', Map({
+    state: connectionState,
+    connected
+  }));
+}
+
 function setState(state, newState) {
   return state.merge(newState);
 }
@@ -31,6 +38,8 @@ export default function(state = Map(), action) {
   switch (action.type) {
   case 'SET_CLIENT_ID':
     return state.set('clientId', action.clientId);
+  case 'SET_CONNECTION_STATE':
+    return setConnectionState(state, action.state, action.connected);
   case 'SET_STATE':
     return resetVote(setState(state, action.state));
   case 'VOTE':
diff --git a/src/style.css b/src/style.css
@@ -121,3 +121,18 @@ body {
   font-size: 4rem;
   text-align: center;
 }
+
+/* Connection State */
+
+.connectionState {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  padding: 5px;
+
+  text-align: center;
+
+  background-color: #B71C1C;
+}
diff --git a/test/components/ConnectionState_spec.js b/test/components/ConnectionState_spec.js
@@ -0,0 +1,30 @@
+import React from 'react/addons';
+import {expect} from 'chai';
+import {ConnectionState} from '../../src/components/ConnectionState';
+
+const {renderIntoDocument, findRenderedDOMComponentWithTag}
+  = React.addons.TestUtils;
+
+describe('ConnectionState', () => {
+
+  it('is not visible when connected', () => {
+    const component = renderIntoDocument(<ConnectionState connected={true} />);
+    const div = findRenderedDOMComponentWithTag(component, 'div');
+    expect(div.getDOMNode().style.display).to.equal('none');
+  });
+
+  it('is visible when not connected', () => {
+    const component = renderIntoDocument(<ConnectionState connected={false} />);
+    const div = findRenderedDOMComponentWithTag(component, 'div');
+    expect(div.getDOMNode().style.display).to.equal('block');
+  });
+
+  it('contains connection state message', () => {
+    const component = renderIntoDocument(
+      <ConnectionState connected={false} state="Fail" />
+    );
+    const div = findRenderedDOMComponentWithTag(component, 'div');
+    expect(div.getDOMNode().textContent).to.contain('Fail');
+  });
+
+});
