Implemented offline indicator

frontend/components/Offline/Offline.js

@@ -0,0 +1,43 @@
+import React from 'react';
+
+class Offline extends React.Component {
+  static propTypes = {
+    children: React.PropTypes.node,
+  };
+
+  static childContextTypes = {
+    offline: React.PropTypes.bool,
+  };
+
+  state = {
+    offline: false,
+  }
+
+  getChildContext() {
+    return {
+      offline: this.state.offline,
+    };
+  }
+
+  componentDidMount = () => {
+    window.addEventListener('offline', this.handleConnectionState);
+    window.addEventListener('online', this.handleConnectionState);
+  }
+
+  componentWillUnmount = () => {
+    window.removeEventListener('offline', this.handleConnectionState);
+    window.removeEventListener('online', this.handleConnectionState);
+  };
+
+  handleConnectionState = () => {
+    this.setState({
+      offline: !navigator.onLine,
+    });
+  }
+
+  render() {
+    return React.Children.only(this.props.children);
+  }
+}
+
+export default Offline;

frontend/components/Offline/index.js

@@ -0,0 +1,7 @@
+import Offline from './Offline';
+import injectOffline from './injectOffline';
+
+export {
+  Offline,
+  injectOffline,
+}

frontend/components/Offline/injectOffline.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const injectOffline = (WrappedComponent) => {
+  return class OfflineWrapper extends React.Component {
+    static contextTypes = {
+      offline: React.PropTypes.bool,
+    };
+
+    render() {
+      const newProps = {
+        offline: this.context.offline,
+      };
+
+      return (<WrappedComponent { ...this.props } { ...newProps } />);
+    }
+  };
+};
+
+export default injectOffline;