Merge pull request #216 from manosim/offline-alert

[209] Check Internet Connection

Author: manosim

README.md

@@ -1,6 +1,6 @@
 # Gitify [![travis][travis-image]][travis-url] [![codecov][codecov-image]][codecov-url] [![slack][slack-image]][slack-url]
 
-> If you are looking for the mobile version - [ekonstantinidis/gitify-mobile](https://github.com/ekonstantinidis/gitify-mobile/).
+> If you are looking for the mobile version - [manosim/gitify-mobile](https://github.com/manosim/gitify-mobile/).
 
 ![Gitify](images/press.png)
 
@@ -11,11 +11,11 @@
 
 > Cheers,
 
-> Manos (ekonstantinidis)
+> Manos
 
 
 ### Download
-You can download Gitify for **free** from either the website [www.gitify.io](http://www.gitify.io/) or from the GitHub repository [releases](https://github.com/ekonstantinidis/gitify/releases) page.
+You can download Gitify for **free** from either the website [www.gitify.io](http://www.gitify.io/) or from the GitHub repository [releases](https://github.com/manosim/gitify/releases) page.
 
 You can also install Gitify via [Homebrew Cask](http://caskroom.io/)
 
@@ -90,9 +90,9 @@ There are 2 linters for `js` & `scss` and unit tests with `mocha`.
 Gitify is licensed under the MIT Open Source license. For more information, see the LICENSE file in this repository.
 
 
-[travis-image]: https://travis-ci.org/ekonstantinidis/gitify.svg?branch=master
-[travis-url]: https://travis-ci.org/ekonstantinidis/gitify
-[codecov-image]: https://codecov.io/gh/ekonstantinidis/gitify/branch/master/graph/badge.svg
-[codecov-url]: https://codecov.io/gh/ekonstantinidis/gitify
+[travis-image]: https://travis-ci.org/manosim/gitify.svg?branch=master
+[travis-url]: https://travis-ci.org/manosim/gitify
+[codecov-image]: https://codecov.io/gh/manosim/gitify/branch/master/graph/badge.svg
+[codecov-url]: https://codecov.io/gh/manosim/gitify
 [slack-image]: https://img.shields.io/badge/slack-atomio/gitify-e01563.svg
 [slack-url]: https://atomio.slack.com/

src/js/__tests__/components/network-status.js

@@ -0,0 +1,27 @@
+import React from 'react'; // eslint-disable-line no-unused-vars
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+import NetworkStatus from '../../components/network-status';
+
+function setup() {
+  const props = {};
+  const wrapper = shallow(<NetworkStatus {...props} />);
+
+  return {
+    props: props,
+    wrapper: wrapper,
+  };
+};
+
+describe('components/network-status.js', function () {
+
+  it('should render itself & its children', function () {
+
+    const { wrapper } = setup();
+
+    expect(wrapper).to.exist;
+    expect(wrapper.find('.alert').text()).to.equal('Couldn\'t establish an internet connection.');
+
+  });
+
+});

src/js/__tests__/containers/app.js

@@ -1,9 +1,9 @@
 import React from 'react'; // eslint-disable-line no-unused-vars
 import { expect } from 'chai';
-import { shallow } from 'enzyme';
-import App from '../../containers/app';
+import { shallow, mount } from 'enzyme';
+import { App } from '../../containers/app';
 
-function setup() {
+function setupShallow() {
   const props = {
     location: '/home'
   };
@@ -15,11 +15,24 @@ function setup() {
   };
 };
 
+function setupMount() {
+  const props = {
+    location: '/home'
+  };
+  const wrapper = mount(<App {...props} />);
+
+  return {
+    props: props,
+    wrapper: wrapper,
+  };
+};
+
+
 describe('containers/app.js', function () {
 
   it('should render itself & its children', function () {
 
-    const { wrapper } = setup();
+    const { wrapper } = setupShallow();
 
     expect(wrapper).to.exist;
     expect(wrapper.state().showSearch).to.be.false;
@@ -28,4 +41,14 @@ describe('containers/app.js', function () {
     expect(wrapper.state().showSearch).to.be.true;
   });
 
+  it('should mount itself & its children', function () {
+
+    const { wrapper } = setupMount();
+
+    expect(wrapper).to.exist;
+
+    wrapper.instance().handleNetworkStatus();
+    expect(wrapper.state().networkConnected).to.be.false;
+  });
+
 });

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 */