New: Project Aphrodite

frontend/src/Settings/SettingsToolbarConnector.js

@@ -0,0 +1,147 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import { toggleAdvancedSettings } from 'Store/Actions/settingsActions';
+import SettingsToolbar from './SettingsToolbar';
+
+function mapStateToProps(state) {
+  return {
+    advancedSettings: state.settings.advancedSettings
+  };
+}
+
+const mapDispatchToProps = {
+  toggleAdvancedSettings
+};
+
+class SettingsToolbarConnector extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      nextLocation: null,
+      nextLocationAction: null,
+      confirmed: false
+    };
+
+    this._unblock = null;
+  }
+
+  componentDidMount() {
+    this._unblock = this.props.history.block(this.routerWillLeave);
+  }
+
+  componentWillUnmount() {
+    if (this._unblock) {
+      this._unblock();
+    }
+  }
+
+  //
+  // Control
+
+  routerWillLeave = (nextLocation, nextLocationAction) => {
+    if (this.state.confirmed) {
+      this.setState({
+        nextLocation: null,
+        nextLocationAction: null,
+        confirmed: false
+      });
+
+      return true;
+    }
+
+    if (this.props.hasPendingChanges ) {
+      this.setState({
+        nextLocation,
+        nextLocationAction
+      });
+
+      return false;
+    }
+
+    return true;
+  }
+
+  //
+  // Listeners
+
+  onAdvancedSettingsPress = () => {
+    this.props.toggleAdvancedSettings();
+  }
+
+  onConfirmNavigation = () => {
+    const {
+      nextLocation,
+      nextLocationAction
+    } = this.state;
+
+    const history = this.props.history;
+
+    const path = `${nextLocation.pathname}${nextLocation.search}`;
+
+    this.setState({
+      confirmed: true
+    }, () => {
+      if (nextLocationAction === 'PUSH') {
+        history.push(path);
+      } else {
+        // Unfortunately back and forward both use POP,
+        // which means we don't actually know which direction
+        // the user wanted to go, assuming back.
+
+        history.goBack();
+      }
+    });
+  }
+
+  onCancelNavigation = () => {
+    this.setState({
+      nextLocation: null,
+      nextLocationAction: null,
+      confirmed: false
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const hasPendingLocation = this.state.nextLocation !== null;
+
+    return (
+      <SettingsToolbar
+        hasPendingLocation={hasPendingLocation}
+        onSavePress={this.props.onSavePress}
+        onAdvancedSettingsPress={this.onAdvancedSettingsPress}
+        onConfirmNavigation={this.onConfirmNavigation}
+        onCancelNavigation={this.onCancelNavigation}
+        {...this.props}
+      />
+    );
+  }
+}
+
+const historyShape = {
+  block: PropTypes.func.isRequired,
+  goBack: PropTypes.func.isRequired,
+  push: PropTypes.func.isRequired
+};
+
+SettingsToolbarConnector.propTypes = {
+  hasPendingChanges: PropTypes.bool.isRequired,
+  history: PropTypes.shape(historyShape).isRequired,
+  onSavePress: PropTypes.func,
+  toggleAdvancedSettings: PropTypes.func.isRequired
+};
+
+SettingsToolbarConnector.defaultProps = {
+  hasPendingChanges: false
+};
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SettingsToolbarConnector));