Added example wizard pages for pages with validation and for pages that require intialization

RyanAtPlanGrid · RyanAtPlanGrid · commit 563d6573e641 · 2019-04-07T06:21:03.000-05:00
diff --git a/src/modules/wizard/components/ValidatingReduxFormWizardPageContainer.js b/src/modules/wizard/components/ValidatingReduxFormWizardPageContainer.js
@@ -21,16 +21,14 @@ export class ValidatingReduxFormWizardPageContainer extends React.Component {
     this.tryToValidateForm = this.tryToValidateForm.bind(this);
     this.tryDestroyForm = this.tryDestroyForm.bind(this);
     this.startReduxFormsValidation = this.startReduxFormsValidation.bind(this);
-    this.handleWizardStateMachineTransitions = this.handleWizardStateMachineTransitions.bind(
-      this
-    );
+    this.transitionStateMachine = this.transitionStateMachine.bind(this);
 
     this.state = { validate: false };
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.wizard.currentState !== this.props.wizard.currentState) {
-      this.handleWizardStateMachineTransitions(nextProps);
+      this.transitionStateMachine(nextProps);
       return;
     }
 
@@ -68,7 +66,7 @@ export class ValidatingReduxFormWizardPageContainer extends React.Component {
     }
   }
 
-  handleWizardStateMachineTransitions(nextProps) {
+  transitionStateMachine(nextProps) {
     switch (nextProps.wizard.currentState) {
       case wizardStates.PAGE_INITIALIZED: {
         this.props.pageRequiresValidation();
diff --git a/src/modules/wizard/components/ValidatingWizardPageContainer.js b/src/modules/wizard/components/ValidatingWizardPageContainer.js
@@ -0,0 +1,50 @@
+import React, { Fragment } from "react";
+import { connect } from "react-redux";
+import WizardPage from "./WizardPageContainer";
+import * as wizardActions from "../wizard.actions";
+import { getWizardState, wizardStateChanged } from "../wizard.selectors";
+import { wizardStates } from "../wizard.constants";
+
+class ValidatingWizardPage extends React.Component {
+  componentDidUpdate(prevProps) {
+    if (wizardStateChanged(prevProps, this.props)) {
+      this.transitionStateMachine(this.props);
+    }
+  }
+
+  transitionStateMachine({ wizard, validating } = {}) {
+    switch (wizard.currentState) {
+      case wizardStates.DONE_REQUESTED:
+      case wizardStates.VALIDATION_REQUESTED: {
+        validating();
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <WizardPage requiresValidation>{this.props.children}</WizardPage>
+      </Fragment>
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    wizard: getWizardState(state)
+  };
+};
+
+const mapDispatchToProps = {
+  validating: wizardActions.validating
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ValidatingWizardPage);
diff --git a/src/modules/wizard/components/WizardContainer.js b/src/modules/wizard/components/WizardContainer.js
@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import Wizard from "./Wizard";
 import "./wizard.css";
-import * as selectors from "../wizard.selectors";
+import { getWizardState, wizardStateChangedTo } from "../wizard.selectors";
 import {
   resetWizard,
   doneClicked,
@@ -20,11 +20,8 @@ export class WizardContainer extends Component {
     startWizard(name, pages.length);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (
-      nextProps.currentState === wizardStates.DONE &&
-      nextProps.currentState !== this.props.currentState
-    ) {
+  componentDidUpdate(prevProps) {
+    if (wizardStateChangedTo(prevProps, this.props, wizardStates.DONE)) {
       this.props.resetWizard();
     }
   }
@@ -64,7 +61,7 @@ const mapDispatchToProps = {
 };
 
 const mapStateToProps = state => {
-  const wizardState = selectors.getWizardState(state);
+  const wizardState = getWizardState(state);
   return {
     ...wizardState,
     isLastPage: wizardState.currentPage === wizardState.numberOfPages - 1 // TODO: Ryan - this should come back as part of wizard state
diff --git a/src/modules/wizard/components/WizardPageContainer.js b/src/modules/wizard/components/WizardPageContainer.js
@@ -1,12 +1,7 @@
 import React, { Fragment } from "react";
 import { connect } from "react-redux";
-import {
-  pageRequiresValidation,
-  finishedDisposing,
-  initialized,
-  canTransition
-} from "../wizard.actions";
-import { getWizardState } from "../wizard.selectors";
+import * as wizardActions from "../wizard.actions";
+import { getWizardState, wizardStateChanged } from "../wizard.selectors";
 import { wizardStates } from "../wizard.constants";
 
 class WizardPageContainer extends React.Component {
@@ -15,7 +10,7 @@ class WizardPageContainer extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.wizard.currentState !== prevProps.wizard.currentState) {
+    if (wizardStateChanged(prevProps, this.props)) {
       this.transitionStateMachine(this.props);
     }
   }
@@ -25,6 +20,7 @@ class WizardPageContainer extends React.Component {
     requiresInitialization,
     initialized,
     requiresValidation,
+    pageRequiresValidation,
     canTransition,
     finishedDisposing
   } = {}) {
@@ -37,7 +33,7 @@ class WizardPageContainer extends React.Component {
       }
       case wizardStates.PAGE_INITIALIZED: {
         if (requiresValidation) {
-          requiresValidation();
+          pageRequiresValidation();
         } else {
           canTransition();
         }
@@ -65,10 +61,10 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = {
-  pageRequiresValidation,
-  finishedDisposing,
-  initialized,
-  canTransition
+  pageRequiresValidation: wizardActions.pageRequiresValidation,
+  finishedDisposing: wizardActions.finishedDisposing,
+  initialized: wizardActions.initialized,
+  canTransition: wizardActions.canTransition
 };
 
 export default connect(
diff --git a/src/modules/wizard/components/index.js b/src/modules/wizard/components/index.js
@@ -1,10 +1,12 @@
 import Wizard from "./WizardContainer";
+import ValidatingWizardPage from "./ValidatingWizardPageContainer";
 import ValidatingReduxFormWizardPage from "./ValidatingReduxFormWizardPageContainer";
 import WithReduxFormWizardPageValidation from "./WithReduxFormWizardPageValidation";
 import WizardPage from "./WizardPageContainer";
 
 export default {
   Wizard,
+  ValidatingWizardPage,
   ValidatingReduxFormWizardPage,
   WithReduxFormWizardPageValidation,
   WizardPage
diff --git a/src/modules/wizard/wizard.selectors.js b/src/modules/wizard/wizard.selectors.js
@@ -1,6 +1,25 @@
 import * as constants from "./wizard.constants";
 
+const { wizardStates } = constants;
+
+export const wizardStateChangedTo = (prevProps, props, targetState) =>
+  (!prevProps.wizard || prevProps.wizard.currentState !== targetState) &&
+  (props.wizard && props.wizard.currentState === targetState);
+
 export const getWizardState = state => state[constants.STATE_NAME].stateData;
 export const getWizardData = state => state[constants.STATE_NAME].data;
 export const getWizardErrors = state => getWizardData(state).errors || {};
 export const getForm = (state, formName) => state.form[formName];
+
+export const wizardIsDisposing = (prevProps, props) =>
+  wizardStateChangedTo(prevProps, props, wizardStates.DISPOSING);
+
+export const wizardIsDone = (prevProps, props) =>
+  wizardStateChangedTo(prevProps, props, wizardStates.DONE);
+
+export const wizardStateChanged = (prevProps, props) =>
+  props.wizard.currentState !== prevProps.wizard.currentState;
+
+export const validationRequested = (prevProps, props) =>
+  wizardStateChangedTo(prevProps, props, wizardStates.VALIDATING) ||
+  wizardStateChangedTo(prevProps, props, wizardStates.VALIDATING_DONE);
diff --git a/src/screens/wizardExample/components/PageWithInitializations.js b/src/screens/wizardExample/components/PageWithInitializations.js
@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import wizard from "../../../modules/wizard";
+import { wizardStates } from "../../../modules/wizard/wizard.constants";
+
+const {
+  components: { WizardPage },
+  selectors: { getWizardState }
+} = wizard;
+
+class PageWithValidationLogic extends Component {
+  state = {
+    isInitialized: false
+  };
+
+  componentDidMount() {
+    setTimeout(() => this.setState({ isInitialized: true }), 500);
+  }
+
+  componentDidUpdate(_, prevState) {
+    if (this.props.wizard.currentState === wizardStates.INITIALIZING) {
+      alert("Here we can check to see if we are don initializing");
+
+      if (!prevState.isInitialized && this.state.isInitialized) {
+        alert("We are initialized");
+        // We call the initialized action to let the wizard know we are initialized
+        this.props.initialized();
+      } else {
+        alert("We aren't initialized yet");
+      }
+    }
+  }
+
+  render() {
+    return (
+      <WizardPage requiresInitialization>
+        <h1>Page with Initializations</h1>
+      </WizardPage>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  wizard: getWizardState(state)
+});
+
+const mapDispatchToProps = {
+  initialized: wizard.actions.initialized
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PageWithValidationLogic);
diff --git a/src/screens/wizardExample/components/PageWithValidations.js b/src/screens/wizardExample/components/PageWithValidations.js
@@ -0,0 +1,55 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import wizard from "../../../modules/wizard";
+
+const {
+  components: { ValidatingWizardPage },
+  selectors: { validationRequested, getWizardState }
+} = wizard;
+
+class PageWithValidationLogic extends Component {
+  state = {
+    isValid: false
+  };
+
+  componentDidUpdate(prevProps) {
+    if (validationRequested(prevProps, this.props)) {
+      alert("Here we would do validations");
+
+      if (this.state.isValid) {
+        alert("We are valid");
+        // We call the pageValid action to let the wizard know we are valid
+        this.props.pageValid();
+      } else {
+        alert("We aren't valid");
+        // We call the pageNotValid action to let the wizard know we aren't valid
+        this.props.pageNotValid();
+      }
+    }
+  }
+
+  render() {
+    return (
+      <ValidatingWizardPage>
+        <h1>Page 2</h1>
+        <button onClick={() => this.setState({ isValid: true })}>
+          we are valid
+        </button>
+      </ValidatingWizardPage>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  wizard: getWizardState(state)
+});
+
+const mapDispatchToProps = {
+  pageValid: wizard.actions.pageValid,
+  pageNotValid: wizard.actions.pageNotValid
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PageWithValidationLogic);
diff --git a/src/screens/wizardExample/components/WizardExampleContainer.js b/src/screens/wizardExample/components/WizardExampleContainer.js
@@ -2,39 +2,34 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 // import { reduxForm, Field } from "redux-form";
 import wizard from "../../../modules/wizard";
+import PageWithValidations from "./PageWithValidations";
+import PageWithInitializations from "./PageWithInitializations";
 
 const {
   components: { Wizard, WizardPage },
-  constants: { wizardStates },
-  selectors: { getWizardState }
+  selectors: { getWizardState, wizardIsDisposing, wizardIsDone }
 } = wizard;
 
-const PageOne = ({ passedInData }) => (
+const PageWithProps = ({ passedInData }) => (
   <WizardPage>
     <h1>Page 1 {passedInData}</h1>
   </WizardPage>
 );
 
 const PageTwo = () => (
   <WizardPage>
-    <h1>Page 2</h1>
+    <h1>Page 4</h1>
   </WizardPage>
 );
 
 class WizardExampleContainer extends Component {
   componentDidUpdate(prevProps) {
-    if (
-      prevProps.wizard.currentState !== wizardStates.DISPOSING &&
-      this.props.wizard.currentState === wizardStates.DISPOSING
-    ) {
+    if (wizardIsDisposing(prevProps, this.props)) {
       // This is where you can clean up call back references, release handles, etc...
       alert("Wizard is disposing, clean up here...");
     }
 
-    if (
-      prevProps.wizard.currentState !== wizardStates.DONE &&
-      this.props.wizard.currentState === wizardStates.DONE
-    ) {
+    if (wizardIsDone(prevProps, this.props)) {
       // Note that if you are using redux forms you will likely not use
       // this block and will instead use redux form's submit handler instead
       alert(
@@ -50,13 +45,21 @@ class WizardExampleContainer extends Component {
         <Wizard
           pages={[
             {
-              component: PageOne,
+              component: PageWithProps,
               props: { passedInData: "Some passed in text" },
-              title: "Step 1: Page 1 Title"
+              title: "Step 1: Page with Props"
+            },
+            {
+              component: PageWithValidations,
+              title: "Step 2: Page Validation Logic"
+            },
+            {
+              component: PageWithInitializations,
+              title: "Step 3: Page with initializations"
             },
             {
               component: PageTwo,
-              title: "Step 2: Page 2 Title"
+              title: "Step 4: Page with initializations"
             }
           ]}
         />

Original file line number	Diff line number	Diff line change
`@@ -21,16 +21,14 @@ export class ValidatingReduxFormWizardPageContainer extends React.Component {`
`21`	`21`	`this.tryToValidateForm = this.tryToValidateForm.bind(this);`
`22`	`22`	`this.tryDestroyForm = this.tryDestroyForm.bind(this);`
`23`	`23`	`this.startReduxFormsValidation = this.startReduxFormsValidation.bind(this);`
`24`		`- this.handleWizardStateMachineTransitions = this.handleWizardStateMachineTransitions.bind(`
`25`		`- this`
`26`		`- );`
	`24`	`+ this.transitionStateMachine = this.transitionStateMachine.bind(this);`
`27`	`25`
`28`	`26`	`this.state = { validate: false };`
`29`	`27`	`}`
`30`	`28`
`31`	`29`	`componentWillReceiveProps(nextProps) {`
`32`	`30`	`if (nextProps.wizard.currentState !== this.props.wizard.currentState) {`
`33`		`- this.handleWizardStateMachineTransitions(nextProps);`
	`31`	`+ this.transitionStateMachine(nextProps);`
`34`	`32`	`return;`
`35`	`33`	`}`
`36`	`34`
`@@ -68,7 +66,7 @@ export class ValidatingReduxFormWizardPageContainer extends React.Component {`
`68`	`66`	`}`
`69`	`67`	`}`
`70`	`68`
`71`		`- handleWizardStateMachineTransitions(nextProps) {`
	`69`	`+ transitionStateMachine(nextProps) {`
`72`	`70`	`switch (nextProps.wizard.currentState) {`
`73`	`71`	`case wizardStates.PAGE_INITIALIZED: {`
`74`	`72`	`this.props.pageRequiresValidation();`