Skip to content

Commit

Permalink
fix: display connexion status toastr only on change
Browse files Browse the repository at this point in the history 
closes #254
  • Loading branch information
@pyphilia
pyphilia committed Jun 22, 2020
1 parent e648882 commit 8a725c3
Show file tree
Hide file tree
Showing 3 changed files with 319 additions and 114 deletions.
198 changes: 90 additions & 108 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import ReduxToastr, { toastr } from 'react-redux-toastr';
import { 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';
Expand All @@ -19,7 +17,6 @@ import SyncScreen from './components/space/SyncScreen';
import ExportSelectionScreen from './components/space/export/ExportSelectionScreen';
import LoadSelectionScreen from './components/space/load/LoadSelectionScreen';
import DeveloperScreen from './components/developer/DeveloperScreen';
import { OnlineTheme, OfflineTheme } from './themes';
import Dashboard from './components/dashboard/Dashboard';
import SignInScreen from './components/signin/SignInScreen';
import Authorization from './components/Authorization';
Expand Down Expand Up @@ -83,6 +80,7 @@ export class App extends Component {
classes: PropTypes.shape({
toastrIcon: PropTypes.string.isRequired,
}).isRequired,
connexionStatus: PropTypes.bool.isRequired,
};

static defaultProps = {
Expand Down Expand Up @@ -115,8 +113,9 @@ export class App extends Component {
lang: prevLang,
geolocationEnabled: prevGeolocationEnabled,
dispatchGetGeolocation,
connexionStatus: prevConnexionStatus,
}) {
const { lang, i18n, geolocationEnabled } = this.props;
const { lang, i18n, geolocationEnabled, connexionStatus } = this.props;
if (lang !== prevLang) {
i18n.changeLanguage(lang);
}
Expand All @@ -125,6 +124,11 @@ export class App extends Component {
if (geolocationEnabled && geolocationEnabled !== prevGeolocationEnabled) {
dispatchGetGeolocation();
}

// display toastr when connexion status changes
if (connexionStatus !== prevConnexionStatus) {
this.triggerConnectionToastr();
}
}

componentWillUnmount() {
Expand All @@ -135,10 +139,10 @@ export class App extends Component {
this.setState({ height: window.innerHeight });
};

triggerConnectionToastr = online => {
const { classes } = this.props;
triggerConnectionToastr = () => {
const { classes, connexionStatus } = this.props;

if (online) {
if (connexionStatus) {
toastr.light(CONNECTION_MESSAGE_HEADER, CONNECTION_ONLINE_MESSAGE, {
icon: <WifiIcon className={classes.toastrIcon} />,
});
Expand All @@ -153,106 +157,84 @@ export class App extends Component {
const { height } = this.state;

return (
<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={SIGN_IN_PATH} component={SignInScreen} />
<Route
exact
path={HOME_PATH}
component={Authorization()(Home)}
/>
<Route
exact
path={SAVED_SPACES_PATH}
component={Authorization()(SavedSpaces)}
/>
<Route
exact
path={SPACES_NEARBY_PATH}
component={Authorization()(SpacesNearby)}
/>
<Route
exact
path={VISIT_PATH}
component={Authorization()(VisitSpace)}
/>
<Route
exact
path={LOAD_SPACE_PATH}
component={Authorization()(LoadSpace)}
/>
<Route
exact
path={LOAD_SELECTION_SPACE_PATH}
component={Authorization()(LoadSelectionScreen)}
/>
<Route
exact
path={SETTINGS_PATH}
component={Authorization()(Settings)}
/>
<Route
exact
path={SYNC_SPACE_PATH}
component={Authorization()(SyncScreen)}
/>
<Route
exact
path={buildExportSelectionPathForSpaceId()}
component={Authorization()(ExportSelectionScreen)}
/>
<Route
exact
path={SPACE_PATH}
component={Authorization()(SpaceScreen)}
/>
<Route
exact
path={DASHBOARD_PATH}
component={Authorization()(Dashboard)}
/>
<Route
exact
path={buildClassroomPath()}
component={Authorization([USER_MODES.TEACHER])(
ClassroomScreen
)}
/>
<Route
exact
path={CLASSROOMS_PATH}
component={Authorization([USER_MODES.TEACHER])(Classrooms)}
/>
<Route
exact
path={buildImportDataInClassroomPath()}
component={Authorization([USER_MODES.TEACHER])(
ImportDataScreen
)}
/>
<Route
exact
path={DEVELOPER_PATH}
component={Authorization()(DeveloperScreen)}
/>
</Switch>
</div>
</Router>
</MuiThemeProvider>
)}
/>
<Router>
<div className="app" style={{ height }}>
<Switch>
<Route exact path={SIGN_IN_PATH} component={SignInScreen} />
<Route exact path={HOME_PATH} component={Authorization()(Home)} />
<Route
exact
path={SAVED_SPACES_PATH}
component={Authorization()(SavedSpaces)}
/>
<Route
exact
path={SPACES_NEARBY_PATH}
component={Authorization()(SpacesNearby)}
/>
<Route
exact
path={VISIT_PATH}
component={Authorization()(VisitSpace)}
/>
<Route
exact
path={LOAD_SPACE_PATH}
component={Authorization()(LoadSpace)}
/>
<Route
exact
path={LOAD_SELECTION_SPACE_PATH}
component={Authorization()(LoadSelectionScreen)}
/>
<Route
exact
path={SETTINGS_PATH}
component={Authorization()(Settings)}
/>
<Route
exact
path={SYNC_SPACE_PATH}
component={Authorization()(SyncScreen)}
/>
<Route
exact
path={buildExportSelectionPathForSpaceId()}
component={Authorization()(ExportSelectionScreen)}
/>
<Route
exact
path={SPACE_PATH}
component={Authorization()(SpaceScreen)}
/>
<Route
exact
path={DASHBOARD_PATH}
component={Authorization()(Dashboard)}
/>
<Route
exact
path={buildClassroomPath()}
component={Authorization([USER_MODES.TEACHER])(ClassroomScreen)}
/>
<Route
exact
path={CLASSROOMS_PATH}
component={Authorization([USER_MODES.TEACHER])(Classrooms)}
/>
<Route
exact
path={buildImportDataInClassroomPath()}
component={Authorization([USER_MODES.TEACHER])(ImportDataScreen)}
/>
<Route
exact
path={DEVELOPER_PATH}
component={Authorization()(DeveloperScreen)}
/>
</Switch>
</div>
</Router>
);
}
}
Expand Down
Loading

0 comments on commit 8a725c3

Please sign in to comment.