Merge pull request #17 from marcoaraujojunior/develop

Making this app closer to Progressive Web Apps pattern

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 → 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",

public/index.html

@@ -2,11 +2,37 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
+        <meta name="theme-color" content="#00d1b2">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+        <link rel="manifest" href="/manifest.json">
+        <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
+        <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
+        <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
+        <link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
         <title>React Client</title>
     </head>
     <body>
         <div id="app"></div>
-        <script src="dist/bundle.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-with-addons.min.js" integrity="sha256-4XsxPR8y4FliovAx7IOo7g/BZQQIRFHXy5Mo028pVOA=" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.8.1/ReactRouter.min.js" integrity="sha256-Ve10xzUoKZr2up5joKtdW0RfY6R/6nWBO0x8AuOxp1s=" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js" integrity="sha256-JIW8lNqN2EtqC6ggNZYnAdKMJXRQfkPMvdRt+b0/Jxc=" crossorigin="anonymous"></script>
+        <script async src="dist/bundle.min.js"></script>
+        <script>
+            // Check for browser support of service worker
+            if ('serviceWorker' in navigator) {
+                navigator.serviceWorker.register('service-worker.js')
+                    .then(function(registration) {
+                        // Successful registration
+                        console.log('Hooray. Registration successful, scope is:', registration.scope);
+                    })
+                    .catch(function(error) {
+                        // Failed registration, service worker won’t be installed
+                        console.log('Whoops. Service worker registration failed, error:', error);
+                    });
+            }
+        </script>
+        <noscript>
+            <p>Ops! JavaScript is disabled. You can't use this app.</p>
+        </noscript>
     </body>
 </html>

public/manifest.json

@@ -0,0 +1,27 @@
+{
+    "name": "iClient",
+    "short_name": "iClient",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#00d1b2",
+    "theme_color": "#00d1b2",
+    "description": "A client to manager herbs sells",
+    "icons": [
+        {
+            "src": "\/favicons\/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image\/png"
+        },
+        {
+            "src": "\/favicons\/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image\/png"
+        }
+    ],
+    "related_applications": [
+        {
+            "platform": "web",
+            "id" : "iclient.web"
+        }
+    ]
+}

public/service-worker.js

@@ -0,0 +1,56 @@
+var CACHE_NAME = 'v1::iClient';
+var urlsToCache = [
+    '/',
+    '/index.html',
+    '/dist/bundle.min.js',
+    '/favicons/favicon-16x16.png',
+    'https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-with-addons.min.js',
+    'https://cdnjs.cloudflare.com/ajax/libs/react-router/2.8.1/ReactRouter.min.js',
+    'https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js',
+];
+
+self.addEventListener('install', function(event) {
+    event.waitUntil(
+        caches.open(CACHE_NAME).then(function(cache) {
+            return cache.addAll(urlsToCache);
+        })
+    );
+});
+
+self.addEventListener('activate', function(event) {
+    event.waitUntil(
+        caches.keys().then(function(cacheNames) {
+            return Promise.all(
+                cacheNames.filter(function(cacheName) {
+                    return cacheName !== CACHE_NAME;
+                }).map(function(cacheName) {
+                    return caches.delete(cacheName);
+                })
+            );
+        })
+    );
+});
+self.addEventListener('fetch', function(event) {
+    var requestURL = new URL(event.request.url);
+
+    event.respondWith(
+        caches.open(CACHE_NAME).then(function(cache) {
+            return cache.match(event.request).then(function(response) {
+                if (response && !navigator.onLine) {
+                    return response;
+                }
+                return fetch(event.request).then(function(response) {
+                    if (response.ok) {
+                        cache.put(event.request, response.clone()).catch(function(error) {
+                            return new Response("Request failed!");
+                        });
+                    }
+                    return response;
+                }).catch(function(e) {
+                    return new Response("Request failed!");
+                });
+            });
+        })
+    );
+});
+