detect Internet connectivity

package.json

@@ -17,6 +17,7 @@
     "pikaday": "^1.7.0",
     "prop-types": "^15.6.0",
     "react": "^16.3.2",
+    "react-detect-offline": "^2.1.1",
     "react-dom": "^16.3.2",
     "react-pdf": "^2.5.3",
     "react-redux": "^5.0.6",

src/components/LandingPage.js

@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { Offline } from 'react-detect-offline';
 import Navbar from './Navbar';
 import Toast from './Toast';
 import { userHaveRole, isUserActive } from '../utils';
 import { fetchUser, fetchReferences, fetchZones } from '../actionCreators';
 import { getUser } from '../reducers/rootReducer';
+import { USER_NOT_ACTIVE, NO_INTERNET } from '../constants/strings';
 
 const propTypes = {
   component: PropTypes.func.isRequired,
@@ -32,8 +34,11 @@ export class LandingPage extends Component {
     return (
       <main>
         <Navbar {...rest} />
+        <Offline>
+          <section className="offline">{NO_INTERNET}</section>
+        </Offline>
         { !isUserActive(user) &&
-          <div>This account is not active.</div>
+          <section>{USER_NOT_ACTIVE}</section>
         }
         { userHaveRole(user) &&
           <Component {...rest} />

src/constants/strings.js

@@ -63,6 +63,7 @@ export const TOTAL_AUMS_EXCEEDS = 'Total AUMs exceeds authorized AUMs.';
 export const USER_NOT_ACTIVE = 'This account is not active yet, please contact the administrator.';
 export const USER_NOT_REGISTERED = 'This account has not been registered.';
 export const LINK_CLIENT_SUCCESS = 'You have successfully linked the client.';
+export const NO_INTERNET = 'There is no Internet connection.';
 
 // modals
 export const COMPLETED_CONFIRMATION_HEADER = 'Update Status: Completed';

src/styles/App.scss

@@ -13,6 +13,13 @@ body {
   background: #fdfdfd;
 }
 
+.offline {
+  background-color: $error-color;
+  color: white;
+  text-align: center;
+  height: 20px;
+}
+
 footer {
   height: 20px;
 }