Merge pull request #233 from graasp/225/colorTheme

feat: add online and offline theme

Author: juancarlosfarah

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,17 +1,22 @@
 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, createMuiTheme } from '@material-ui/core/styles';
+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';
 import Settings from './components/Settings';
 import LoadSpace from './components/LoadSpace';
 import SpaceScreen from './components/space/SpaceScreen';
 import DeveloperScreen from './components/developer/DeveloperScreen';
+import { OnlineTheme, OfflineTheme } from './themes';
 import {
   SETTINGS_PATH,
   SPACE_PATH,
@@ -29,16 +34,15 @@ 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 theme = createMuiTheme({
-  typography: {
-    useNextVariants: true,
-  },
-  palette: {
-    primary: { light: '#5050d2', main: '#5050d2', dark: '#5050d2' },
-    secondary: { light: '#eeeeee', main: '#eeeeee', dark: '#eeeeee' },
-  },
+const styles = () => ({
+  toastrIcon: { marginBottom: '-20px', fontSize: '45px' },
 });
 
 export class App extends Component {
@@ -55,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 = {
@@ -105,31 +112,59 @@ 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 (
-      <MuiThemeProvider theme={theme}>
-        <div>
-          <ReduxToastr
-            transitionIn="fadeIn"
-            preventDuplicates
-            transitionOut="fadeOut"
-          />
-        </div>
-        <Router>
-          <div className="app" style={{ height }}>
-            <Switch>
-              <Route exact path={HOME_PATH} component={Home} />
-              <Route exact path={SPACES_NEARBY_PATH} component={SpacesNearby} />
-              <Route exact path={VISIT_PATH} component={VisitSpace} />
-              <Route exact path={LOAD_SPACE_PATH} component={LoadSpace} />
-              <Route exact path={SETTINGS_PATH} component={Settings} />
-              <Route exact path={SPACE_PATH} component={SpaceScreen} />
-              <Route exact path={DEVELOPER_PATH} component={DeveloperScreen} />
-            </Switch>
-          </div>
-        </Router>
-      </MuiThemeProvider>
+      <Detector
+        render={({ online }) => (
+          <MuiThemeProvider theme={online ? OnlineTheme : OfflineTheme}>
+            {this.triggerConnectionToastr(online)}
+            <div>
+              <ReduxToastr
+                transitionIn="fadeIn"
+                preventDuplicates
+                transitionOut="fadeOut"
+              />
+            </div>
+            <Router>
+              <div className="app" style={{ height }}>
+                <Switch>
+                  <Route exact path={HOME_PATH} component={Home} />
+                  <Route
+                    exact
+                    path={SPACES_NEARBY_PATH}
+                    component={SpacesNearby}
+                  />
+                  <Route exact path={VISIT_PATH} component={VisitSpace} />
+                  <Route exact path={LOAD_SPACE_PATH} component={LoadSpace} />
+                  <Route exact path={SETTINGS_PATH} component={Settings} />
+                  <Route exact path={SPACE_PATH} component={SpaceScreen} />
+                  <Route
+                    exact
+                    path={DEVELOPER_PATH}
+                    component={DeveloperScreen}
+                  />
+                </Switch>
+              </div>
+            </Router>
+          </MuiThemeProvider>
+        )}
+      />
     );
   }
 }
@@ -147,11 +182,10 @@ const mapDispatchToProps = {
   dispatchGetGeolocationEnabled: getGeolocationEnabled,
 };
 
-const ConnectedApp = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(App);
+const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);
+
+const StyledApp = withStyles(styles, { withTheme: true })(ConnectedApp);
 
-const TranslatedApp = withTranslation()(ConnectedApp);
+const TranslatedApp = withTranslation()(StyledApp);
 
 export default TranslatedApp;