diff --git a/README.md b/README.md index a8b69dcf3..0fe50fcb6 100644 --- a/README.md +++ b/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/ diff --git a/src/js/__tests__/components/network-status.js b/src/js/__tests__/components/network-status.js new file mode 100644 index 000000000..f0051087c --- /dev/null +++ b/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(); + + 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.'); + + }); + +}); diff --git a/src/js/__tests__/containers/app.js b/src/js/__tests__/containers/app.js index 165bba573..dab1d026c 100644 --- a/src/js/__tests__/containers/app.js +++ b/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(); + + 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; + }); + }); diff --git a/src/js/components/network-status.js b/src/js/components/network-status.js new file mode 100644 index 000000000..c03139b8e --- /dev/null +++ b/src/js/components/network-status.js @@ -0,0 +1,13 @@ +import React from 'react'; + +export default class NetworkStatus extends React.Component { + render() { + return ( +
+ +

No Internet Connection

+
Couldn't establish an internet connection.
+
+ ); + } +}; diff --git a/src/js/containers/app.js b/src/js/containers/app.js index 7af69d6d7..60519aea0 100644 --- a/src/js/containers/app.js +++ b/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 ; + } + return (