Add Offline component

highideas · Jan 3, 2017 · 82209c0 · 82209c0
1 parent 33f2a0f
commit 82209c0
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 14 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1 @@
+{ "presets": ["react", "es2015"] }
diff --git a/app/components/Menu/Menu.js b/app/components/Menu/Menu.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Router } from 'react-router'
 
-import Nav from 'components/Nav/Nav'
+import NavMenu from 'components/NavMenu/NavMenu'
 import LinksApp from 'components/LinksApp/LinksApp'
 
 
@@ -26,14 +26,14 @@ class Menu extends React.Component{
 
     handleView() {
         return (
-            <Nav>
+            <NavMenu>
                 <LinksApp
                     links={this.state.links}
                 />
                 <span className="nav-item">
                     <a className="button" onClick={this.handleLogout}>Logout</a>
                 </span>
-            </Nav>
+            </NavMenu>
         );
     }
 

diff --git a/app/components/Nav/Nav.js → app/components/NavMenu/NavMenu.js b/app/components/Nav/Nav.js → app/components/NavMenu/NavMenu.js
@@ -1,6 +1,8 @@
 import React from 'react';
 
-class Nav extends React.Component
+import Offline from 'components/Offline/Offline'
+
+class NavMenu extends React.Component
 {
     constructor(props, context) {
         super(props, context);
@@ -33,6 +35,11 @@ class Nav extends React.Component
                     <div className="nav-left">
                         <a className="nav-item" href="../index.html">IClient</a>
                     </div>
+                    <span className="nav-center nav-menu is-active">
+                        <span className="nav-item">
+                            <Offline />
+                        </span>
+                    </span>
                     <span className={ `nav-toggle ${this.state.toggleNavStatus}` } onClick={this.toggleNavStatus}>
                         <span></span>
                         <span></span>
@@ -47,9 +54,9 @@ class Nav extends React.Component
     }
 }
 
-Nav.childContextTypes = {
+NavMenu.childContextTypes = {
     onClick: React.PropTypes.func
 };
 
-export default Nav;
+export default NavMenu;
 
diff --git a/app/components/Offline/Offline.js b/app/components/Offline/Offline.js
@@ -0,0 +1,42 @@
+import React from 'react';
+
+class Offline extends React.Component
+{
+    constructor(props, context) {
+        super(props, context);
+        this.updateNetworkStatus = this.updateNetworkStatus.bind(this);
+        this.state = {
+            networkStatus: {
+                display: 'none'
+            }
+        };
+    }
+
+    componentWillMount() {
+        this.updateNetworkStatus();
+        window.addEventListener('online', this.updateNetworkStatus, false);
+        window.addEventListener('offline', this.updateNetworkStatus, false);
+    }
+
+    updateNetworkStatus() {
+        if (navigator.onLine) {
+            this.setState({networkStatus: {display : 'none'}});
+        } else {
+            this.setState({networkStatus: {display : ''}});
+        }
+    }
+
+    render() {
+        return (
+            <a className="button is-danger is-disabled" style={this.state.networkStatus}>
+                <span className="icon">
+                    <i className="fa fa-spinner"></i>
+                </span>
+                <span>Off Line</span>
+            </a>
+        );
+    }
+}
+
+export default Offline;
+
diff --git a/tests/Nav.test.js → tests/NavMenu.test.js b/tests/Nav.test.js → tests/NavMenu.test.js
@@ -1,15 +1,15 @@
 
-describe('Test Nav', () => {
+describe('Test NavMenu', () => {
     const React = require('react');
     const shallow = require('enzyme').shallow;
-    const Nav = require('components/Nav/Nav').default;
+    const NavMenu = require('components/NavMenu/NavMenu').default;
 
-    it('Nav should render child', (done) => {
+    it('NavMenu should render child', (done) => {
 
         let component = shallow(
-            <Nav>
+            <NavMenu>
                 <directive>Child</directive>
-            </Nav>
+            </NavMenu>
         );
 
         expect(component.find('directive').text()).toEqual('Child');
@@ -20,7 +20,7 @@ describe('Test Nav', () => {
     it('toggleNavStatus function should change toggleNavStatus state from is-active to empty', (done) => {
 
         let component = shallow(
-            <Nav />
+            <NavMenu />
         );
 
         component.instance().setState({ toggleNavStatus: 'is-active' });
@@ -34,7 +34,7 @@ describe('Test Nav', () => {
     it('toggleNavStatus function should change toggleNavStatus state from empty to is-active', (done) => {
 
         let component = shallow(
-            <Nav />
+            <NavMenu />
         );
 
         expect(component.state().toggleNavStatus).toEqual('');
@@ -47,7 +47,7 @@ describe('Test Nav', () => {
     it('hide should change toggleNavStatus state to empty', (done) => {
 
         let component = shallow(
-            <Nav />
+            <NavMenu />
         );
 
         component.instance().setState({ toggleNavStatus: 'whatever'} );