Merge pull request #17 from marcoaraujojunior/develop

Making this app closer to Progressive Web Apps pattern

Author: GabrielDeveloper

app/App.js

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { Router, Route, IndexRoute, hashHistory } from 'react-router'
 import 'bulma/css/bulma.css'
-import 'font-awesome-webpack'
+import 'style-loader!css-loader!less-loader!font-awesome-webpack/font-awesome-styles.loader!font-awesome-webpack/font-awesome.config.js';
 
 import iClientComponent from 'components/IClient/IClient'
 import HomeComponent from 'components/Home/Home'

app/components/Login/Login.js

@@ -4,6 +4,10 @@ import { Router } from 'react-router'
 import User from 'services/User';
 import ErrorComponent from 'components/Error/Error';
 
+const blackStyle = {
+    color : '#000'
+};
+
 class Login extends React.Component
 {
     constructor(props, context) {
@@ -40,25 +44,27 @@ class Login extends React.Component
                     <div className="container">
                         <div className="columns is-vcentered">
                             <div className="column is-4 is-offset-4">
-                                <h1 className="title has-text-centered">
+                                <p className="title has-text-centered" style={blackStyle}>
                                     IClient
-                                </h1>
+                                </p>
                                 <form onSubmit={this.handleSubmit}>
                                     <div className="box">
                                          <ErrorComponent error={this.state.error} />
-                                        <label className="label">Username</label>
+                                        <label className="label" htmlFor='username'>Username</label>
                                         <p className="control has-icon">
                                             <input
+                                                id='username'
                                                 ref='username'
                                                 className="input"
                                                 type="text"
                                                 placeholder="Ex: jsmith" 
                                             />
                                             <i className="fa fa-user" />
                                         </p>
-                                        <label className="label">Password</label>
+                                        <label className="label" htmlFor='password'>Password</label>
                                         <p className="control has-icon">
                                             <input
+                                                id='password'
                                                 ref='password'
                                                 className="input"
                                                 type="password"
@@ -68,7 +74,7 @@ class Login extends React.Component
                                         </p>
                                         <hr />
                                         <p className="control">
-                                            <button className="button is-primary">Login</button>
+                                            <button className="button is-primary" style={blackStyle}>Login</button>
                                         </p>
                                     </div>
                                 </form>

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>
         );
     }
 

app/components/Nav/Nav.js renamed to 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;
 

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 (window.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;
+

codecov.yml

@@ -0,0 +1,28 @@
+
+codecov:
+    notify:
+        require_ci_to_pass: true
+comment:
+    behavior: default
+    layout: header, diff
+    require_changes: false
+coverage:
+    precision: 2
+    range:
+    - 90.0
+    - 100.0
+    round: down
+    status:
+        changes: false
+        patch: true
+        project: true
+parsers:
+    gcov:
+        branch_detection:
+        conditional: true
+        loop: true
+        macro: false
+        method: false
+    javascript:
+        enable_partials: false
+

package.json

@@ -33,7 +33,7 @@
     "react-test-renderer": "^15.3.2",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "webpack": "^1.13.2"
+    "webpack": "^2.1.0-beta.27"
   },
   "scripts": {
     "test": "jest",
@@ -47,8 +47,8 @@
       "app"
     ],
     "collectCoverage": true,
-    "globals" : {
-        "HOST" : "http://localhost:3000"
+    "globals": {
+      "HOST": "http://localhost:3000"
     },
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",