[209] Check Internet Connection

Author: manosim

src/js/components/network-status.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default class NetworkStatus extends React.Component {
+  render() {
+    return (
+      <div className="network-status">
+        <img className="img-fluid logo" src="images/gitify-logo-outline-dark.png" />
+        <h4>No Internet Connection</h4>
+        <div className="alert alert-danger">Couldn't establish an internet connection.</div>
+      </div>
+    );
+  }
+};

src/js/containers/app.js

@@ -1,24 +1,56 @@
 import React from 'react';
+import { connect } from 'react-redux';
 
+import { fetchNotifications } from '../actions';
 import Navigation from '../components/navigation';
+import NetworkStatus from '../components/network-status';
 import SearchBar from '../components/search';
 
-export default class App extends React.Component {
+export class App extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      showSearch: false
+      showSearch: false,
+      networkConnected: navigator.onLine
     };
   }
 
+  componentDidMount() {
+    const self = this;
+    window.addEventListener('offline', function(e) { self.handleNetworkStatus(); });
+    window.addEventListener('online', function(e) { self.handleNetworkStatus(); });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('offline', this.handleNetworkStatus);
+    window.removeEventListener('online', this.handleNetworkStatus);
+  }
+
   toggleSearch() {
     this.setState({
       showSearch: !this.state.showSearch
     });
   }
 
+  handleNetworkStatus() {
+    if (navigator.onLine) {
+      this.setState({
+        networkConnected: true
+      });
+      this.props.fetchNotifications();
+    } else {
+      this.setState({
+        networkConnected: false
+      });
+    }
+  }
+
   render() {
+    if (!this.state.networkConnected) {
+      return <NetworkStatus />;
+    }
+
     return (
       <div>
         <Navigation
@@ -31,3 +63,5 @@ export default class App extends React.Component {
     );
   };
 };
+
+export default connect(null, { fetchNotifications })(App);

src/scss/app.scss

@@ -524,3 +524,35 @@ input {
 }
 
 /* @end Component / Search  */
+
+
+/* @group Network Status */
+
+.network-status {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: $gray-lighter;
+  padding: 3rem 2rem;
+  overflow: auto;
+
+  .logo {
+    margin: 0 auto 20px;
+    max-width: 115px;
+  }
+
+  h4 {
+    margin-bottom: 1.5rem;
+    text-align: center;
+  }
+
+  .emoji {
+    margin: 20px 0;
+    text-align: center;
+    font-size: 55px;
+  }
+}
+
+/* @end Network Status */