feat: add toastr on connection status change

Author: pyphilia

public/app/config/messages.js

@@ -47,6 +47,9 @@ const ERROR_CLEARING_USER_INPUT_MESSAGE =
   'There was an error clearing the user input.';
 const SUCCESS_CLEARING_USER_INPUT_MESSAGE =
   'User input was successfully cleared.';
+const CONNECTION_MESSAGE_HEADER = 'Connection Status';
+const CONNECTION_OFFLINE_MESSAGE = 'You are offline';
+const CONNECTION_ONLINE_MESSAGE = 'You are online';
 
 module.exports = {
   ERROR_GETTING_DEVELOPER_MODE,
@@ -83,4 +86,7 @@ module.exports = {
   ERROR_SYNCING_MESSAGE,
   ERROR_CLEARING_USER_INPUT_MESSAGE,
   SUCCESS_CLEARING_USER_INPUT_MESSAGE,
+  CONNECTION_MESSAGE_HEADER,
+  CONNECTION_OFFLINE_MESSAGE,
+  CONNECTION_ONLINE_MESSAGE,
 };

src/App.js

@@ -1,11 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import ReduxToastr from 'react-redux-toastr';
+import ReduxToastr, { toastr } from 'react-redux-toastr';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 import { MuiThemeProvider } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/core';
 import { withTranslation } from 'react-i18next';
 import { Detector } from 'react-detect-offline';
+import WifiIcon from '@material-ui/icons/Wifi';
+import WifiOffIcon from '@material-ui/icons/WifiOff';
 import Home from './Home';
 import VisitSpace from './components/VisitSpace';
 import SpacesNearby from './components/SpacesNearby';
@@ -31,8 +34,17 @@ import {
   getGeolocationEnabled,
 } from './actions/user';
 import { DEFAULT_LANGUAGE } from './config/constants';
+import {
+  CONNECTION_MESSAGE_HEADER,
+  CONNECTION_OFFLINE_MESSAGE,
+  CONNECTION_ONLINE_MESSAGE,
+} from './config/messages';
 import './App.css';
 
+const styles = () => ({
+  toastrIcon: { marginBottom: '-20px', fontSize: '45px' },
+});
+
 export class App extends Component {
   state = { height: 0 };
 
@@ -47,6 +59,9 @@ export class App extends Component {
       changeLanguage: PropTypes.func.isRequired,
     }).isRequired,
     geolocationEnabled: PropTypes.bool.isRequired,
+    classes: PropTypes.shape({
+      toastrIcon: PropTypes.string.isRequired,
+    }).isRequired,
   };
 
   static defaultProps = {
@@ -97,13 +112,28 @@ export class App extends Component {
     this.setState({ height: window.innerHeight });
   };
 
+  triggerConnectionToastr = online => {
+    const { classes } = this.props;
+
+    if (online) {
+      toastr.light(CONNECTION_MESSAGE_HEADER, CONNECTION_ONLINE_MESSAGE, {
+        icon: <WifiIcon className={classes.toastrIcon} />,
+      });
+    } else {
+      toastr.light(CONNECTION_MESSAGE_HEADER, CONNECTION_OFFLINE_MESSAGE, {
+        icon: <WifiOffIcon className={classes.toastrIcon} />,
+      });
+    }
+  };
+
   render() {
     const { height } = this.state;
 
     return (
       <Detector
         render={({ online }) => (
           <MuiThemeProvider theme={online ? OnlineTheme : OfflineTheme}>
+            {this.triggerConnectionToastr(online)}
             <div>
               <ReduxToastr
                 transitionIn="fadeIn"
@@ -154,6 +184,8 @@ const mapDispatchToProps = {
 
 const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);
 
-const TranslatedApp = withTranslation()(ConnectedApp);
+const StyledApp = withStyles(styles, { withTheme: true })(ConnectedApp);
+
+const TranslatedApp = withTranslation()(StyledApp);
 
 export default TranslatedApp;

src/config/messages.js

@@ -47,6 +47,9 @@ const ERROR_CLEARING_USER_INPUT_MESSAGE =
   'There was an error clearing the user input.';
 const SUCCESS_CLEARING_USER_INPUT_MESSAGE =
   'User input was successfully cleared.';
+const CONNECTION_MESSAGE_HEADER = 'Connection Status';
+const CONNECTION_OFFLINE_MESSAGE = 'You are offline';
+const CONNECTION_ONLINE_MESSAGE = 'You are online';
 
 module.exports = {
   ERROR_GETTING_DEVELOPER_MODE,
@@ -83,4 +86,7 @@ module.exports = {
   ERROR_SYNCING_MESSAGE,
   ERROR_CLEARING_USER_INPUT_MESSAGE,
   SUCCESS_CLEARING_USER_INPUT_MESSAGE,
+  CONNECTION_MESSAGE_HEADER,
+  CONNECTION_OFFLINE_MESSAGE,
+  CONNECTION_ONLINE_MESSAGE,
 };