multi-step-dialog.jsx

import React from "react";
import PropTypes from "prop-types";

// => /a
const userFlowA = [
  { key: "date", Component: SelectFlightDate },
  { key: "insurance", Component: SelectInsurances }
];

// => /b
const userFlowB = [
  { key: "insurance", Component: SelectInsurances },
  { key: "date", Component: SelectFlightDate }
];

class Homepage extends React.Component {
  render() {
    return (
      <div>
        <View flow={userFlowB} />
      </div>
    );
  }
}

<View
  flow={[]}
  onSaveData={data => window.localStorage.setItem("data", JSON.stringify(data))}
  onLoadData={() =>
    window.localStorage.get("data")
      ? JSON.parse(window.localStorage.get("data"))
      : {}
  }
  onResetData={() => window.localStorage.removeItem("data")}
/>;

// => /foobar/{*}
// => /foobar/{date}
// => /foobar/{insurance}
class View extends React.Component {
  static propTypes = {
    flow: PropTypes.any.isRequired(),
    onFinished: PropTypes.function.isRequired(),
    loadData: PropTypes.function.isRequired(),
    saveData: PropTypes.function.isRequired(),
    onResetData: PropTypes.function.isRequired()
  };

  constructor(props) {
    super(props);

    this.state = {
      data: this.loadData() || {}
    };
  }

  render() {
    const key = this.props.match.somethingWithTheKey;
    const stepIndex = this.props.flow.findIndex(step => step.key === key);
    const step = this.props.flow[stepIndex];
    const { Component } = step;
    return (
      <div>
        <div>Topbar</div>
        <Component
          data={this.state.data}
          onBack={() => {
            if (stepIndex > 0) {
              this.props.history.push(
                `/foobar/${this.props.flow[stepIndex - 1].key}`
              );
            }
          }}
          onNext={nextData => {
            this.setState({ data: nextData });
            this.props.saveData(nextData);

            if (stepIndex < steps.length - 1) {
              this.props.history.push(
                `/foobar/${this.props.flow[stepIndex + 1].key}`
              );
            } else {
              // last page about to be nexted
              const finalData = nextData;
              this.props.onResetData();
              this.props.onFinished(nextData);
            }
          }}
        />
      </div>
    );
  }
}

class SelectInsurances extends React.Component {
  state = {};

  componentDidMount() {
    if (this.isItTooEarly(this.props.data)) {
      this.props.onBack()
    }
  }

  render() {
    if (this.isItTooEarly(this.props.data)) return null

    return (
      <div>
        <h1>SelectInsurances</h1>
        <input
          value={this.state.name || this.props.data.name || ""}
          onChange={event => this.setState({ name: event.target.value })}
        />
        <button
          disabled={!this.state.name}
          onClick={() =>
            this.props.onNext({ ...this.props.data, name: this.state.data })
          }
        >
          Continue
        </button>
      </div>
    );
  }

  isItTooEarly = (data) => {
    return false
  }
}

class SelectFlightDate extends React.Component {
  render() {
    return (
      <div>
        <h1>SelectFlightDate</h1>
        <input
          value={this.props.data.date || ""}
          onChange={event => {
            const nextData = {
              ...this.props.data,
              date: event.target.value
            };
            this.props.onNext(nextData);
          }}
        />
      </div>
    );
  }
}