Got wizard working with pages that aren't wired up for redux forms validation.

Author: RyanAtPlanGrid

package-lock.json

@@ -13,6 +13,7 @@
     "react-router-redux": "^5.0.0-alpha.9",
     "react-scripts": "2.1.5",
     "redux": "^4.0.1",
+    "redux-form": "^8.1.0",
     "redux-thunk": "^2.3.0",
     "rrc": "^0.10.1"
   },
@@ -36,9 +37,12 @@
   "devDependencies": {
     "concurrently": "^4.1.0",
     "cross-fetch": "^3.0.1",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
     "onchange": "^5.2.0",
     "prettier": "^1.16.4",
-    "redux-form": "^8.1.0",
     "redux-immutable-state-invariant": "^2.1.0"
   }
 }

package.json

@@ -5,6 +5,7 @@ import userContext from "./userContext";
 import busyIndicator from "./busyIndicator";
 import pendingRequest from "./pendingRequest";
 import notificationPopup from "./notificationPopup";
+import wizard from "./wizard";
 import httpCache from "./httpCache";
 
 export default combineReducers({
@@ -13,6 +14,7 @@ export default combineReducers({
   [pendingRequest.constants.STATE_NAME]: pendingRequest.reducer,
   [httpCache.constants.STATE_NAME]: httpCache.reducer,
   [notificationPopup.constants.STATE_NAME]: notificationPopup.reducer,
+  [wizard.constants.STATE_NAME]: wizard.reducer,
   form: formReducer,
   routing: routerReducer
 });

src/modules/rootReducer.js

@@ -0,0 +1,70 @@
+import React, { Fragment } from "react";
+import { connect } from "react-redux";
+import {
+  pageRequiresValidation,
+  finishedDisposing,
+  initialized,
+  canTransition
+} from "../wizard.actions";
+import { getWizardState } from "../wizard.selectors";
+import { wizardStates } from "../wizard.constants";
+
+class WizardPageContainer extends React.Component {
+  componentDidMount() {
+    this.transitionStateMachine(this.props);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.wizard.currentState !== prevProps.wizard.currentState) {
+      this.transitionStateMachine(this.props);
+    }
+  }
+
+  transitionStateMachine(nextProps) {
+    switch (nextProps.wizard.currentState) {
+      case wizardStates.INITIALIZING: {
+        if (!nextProps.requiresInitialization) {
+          nextProps.initialized();
+        }
+        break;
+      }
+      case wizardStates.PAGE_INITIALIZED: {
+        if (nextProps.requiresValidation) {
+          nextProps.requiresValidation();
+        } else {
+          nextProps.canTransition();
+        }
+        break;
+      }
+      case wizardStates.DISPOSING: {
+        nextProps.finishedDisposing();
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+
+  render() {
+    return <Fragment>{this.props.children}</Fragment>;
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    wizard: getWizardState(state)
+  };
+};
+
+const mapDispatchToProps = {
+  pageRequiresValidation,
+  finishedDisposing,
+  initialized,
+  canTransition
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(WizardPageContainer);

src/modules/wizard/components/ValidatingReduxFormLogic.js

@@ -1,9 +1,11 @@
 import Wizard from "./WizardContainer";
 import ValidatingReduxFormWizardPage from "./ValidatingReduxFormWizardPageContainer";
 import WithReduxFormWizardPageValidation from "./WithReduxFormWizardPageValidation";
+import WizardPage from "./WizardPageContainer";
 
 export default {
   Wizard,
   ValidatingReduxFormWizardPage,
-  WithReduxFormWizardPageValidation
+  WithReduxFormWizardPageValidation,
+  WizardPage
 };