Show warning when disconnected

client/src/js/components/App.js

@@ -14,14 +14,29 @@ export default class App extends Component {
   };
 
   render() {
-    const mainClass = this.props.showTabList ? 'main-container off-canvas' : 'main-container';
+    const { connected, tab, channels, servers,
+      privateChats, showTabList, select, push } = this.props;
+    const mainClass = showTabList ? 'main-container off-canvas' : 'main-container';
     return (
-      <div onClick={this.handleClick}>
-        <TabList {...this.props} />
-        <div className={mainClass}>
-          <Route name="chat"><Chat /></Route>
-          <Route name="connect"><Connect /></Route>
-          <Route name="settings"><Settings /></Route>
+      <div className="wrap">
+        {!connected &&
+          <div className="app-info">Connection lost, attempting to reconnect...</div>
+        }
+        <div className="app-container" onClick={this.handleClick}>
+          <TabList
+            tab={tab}
+            channels={channels}
+            servers={servers}
+            privateChats={privateChats}
+            showTabList={showTabList}
+            select={select}
+            push={push}
+          />
+          <div className={mainClass}>
+            <Route name="chat"><Chat /></Route>
+            <Route name="connect"><Connect /></Route>
+            <Route name="settings"><Settings /></Route>
+          </div>
         </div>
       </div>
     );

client/src/js/containers/App.js

@@ -10,6 +10,7 @@ import { push } from '../util/router';
 
 const mapState = createStructuredSelector({
   channels: getChannels,
+  connected: state => state.environment.get('connected'),
   privateChats: getPrivateChats,
   servers: getServers,
   showTabList: getShowTabList,

client/src/js/modules/socket.js

@@ -1,4 +1,5 @@
 import { socketAction } from '../state/actions';
+import { setEnvironment } from '../state/environment';
 import { broadcast, inform, print, addMessage, addMessages } from '../state/messages';
 import { select } from '../state/tab';
 import { normalizeChannel } from '../util';
@@ -102,6 +103,10 @@ export default function handleSocket({ socket, store: { dispatch, getState } })
     print(message) {
       const tab = getState().tab.selected;
       dispatch(addMessage(message, tab.server, tab.name));
+    },
+
+    _connected(connected) {
+      dispatch(setEnvironment('connected', connected));
     }
   };
 

client/src/js/state/environment.js

@@ -10,7 +10,11 @@ export const getWindowWidth = state => state.environment.get('windowWidth');
 
 export const getConnectDefaults = state => state.environment.get('connect_defaults');
 
-export default createReducer(Map(), {
+const initialState = Map({
+  connected: true
+});
+
+export default createReducer(initialState, {
   [actions.SET_ENVIRONMENT](state, action) {
     return state.set(action.key, action.value);
   },

client/src/js/util/Socket.js

@@ -26,12 +26,14 @@ export default class Socket {
     }, this.connectTimeout);
 
     this.ws.onopen = () => {
+      this.emit('_connected', true);
       clearTimeout(this.timeoutConnect);
       this.backoff.reset();
       this.setTimeoutPing();
     };
 
     this.ws.onclose = () => {
+      this.emit('_connected', false);
       clearTimeout(this.timeoutConnect);
       clearTimeout(this.timeoutPing);
       if (!this.closing) {