Got wizard working with Redux forms

Author: RyanAtPlanGrid

package.json

@@ -6,6 +6,7 @@
     "classnames": "^2.2.6",
     "history": "^4.7.2",
     "localStorage": "^1.0.4",
+    "lodash": "^4.17.11",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-redux": "^6.0.1",

src/modules/wizard/components/Wizard.js

@@ -56,7 +56,12 @@ const CancelButton = ({ handleCancel }) => (
 const WizardBreadCrub = ({ pages, currentStep }) => (
   <ul className="wizard">
     {pages.map((page, index) => (
-      <Step stepNumber={index + 1} currentStep={currentStep} page={page} />
+      <Step
+        key={index}
+        stepNumber={index + 1}
+        currentStep={currentStep}
+        page={page}
+      />
     ))}
   </ul>
 );

src/screens/wizardExample/components/LastPageOfWizardWithReduxFormsValidations.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { reduxForm, Field } from "redux-form";
+import classNames from "classnames";
+import "./wizardExample.css";
+import wizard from "../../../modules/wizard";
+
+const {
+  components: { ValidatingReduxFormWizardPage }
+} = wizard;
+
+const required = value => {
+  return (!isNaN(value) && +value) || (isNaN(value) && value !== undefined)
+    ? undefined
+    : "Required";
+};
+
+const ValidatingInputField = ({
+  input,
+  label,
+  type,
+  meta: { touched, error, warning }
+}) => (
+  <div>
+    <label>{label}</label>
+    <div>
+      <input
+        className={classNames({ error: touched && error })}
+        {...input}
+        placeholder={label}
+        type={type}
+      />
+      {touched &&
+        ((error && <span className="error">{error}</span>) ||
+          (warning && <span>{warning}</span>))}
+    </div>
+  </div>
+);
+
+let PageWithReduxFormsValidations = ({ onSubmit, handleSubmit, ...rest }) => (
+  <ValidatingReduxFormWizardPage {...rest}>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Field
+        component={ValidatingInputField}
+        type="number"
+        name="requiredNumber"
+        validate={[required]}
+        label="Required Number"
+      />
+    </form>
+  </ValidatingReduxFormWizardPage>
+);
+
+PageWithReduxFormsValidations = reduxForm({
+  form: "PageWithReduxFormsValidations"
+})(PageWithReduxFormsValidations);
+
+export default class PageWithReduxFormsValidationsContainer extends React.Component {
+  handleSubmit(values) {
+    alert(`Submit succeeded with values: ${JSON.stringify(values)}`);
+
+    return Promise.resolve("Success!");
+  }
+
+  render() {
+    return (
+      <PageWithReduxFormsValidations
+        onSubmit={this.handleSubmit}
+        {...this.props}
+      />
+    );
+  }
+}

src/screens/wizardExample/components/PageWithReduxFormsValidations.js

@@ -0,0 +1,83 @@
+import React from "react";
+import { reduxForm, Field, SubmissionError } from "redux-form";
+import classNames from "classnames";
+import _ from "lodash";
+import "./wizardExample.css";
+import { getState } from "../../../modules/store";
+import wizard from "../../../modules/wizard";
+
+const {
+  selectors: { getWizardErrors }
+} = wizard;
+
+const {
+  components: { ValidatingReduxFormWizardPage }
+} = wizard;
+
+const required = value => {
+  return (!isNaN(value) && +value) || (isNaN(value) && value !== undefined)
+    ? undefined
+    : "Required";
+};
+
+const ValidatingInputField = ({
+  input,
+  label,
+  type,
+  meta: { touched, error, warning }
+}) => (
+  <div>
+    <label>{label}</label>
+    <div>
+      <input
+        className={classNames({ error: touched && error })}
+        {...input}
+        placeholder={label}
+        type={type}
+      />
+      {touched &&
+        ((error && <span className="error">{error}</span>) ||
+          (warning && <span>{warning}</span>))}
+    </div>
+  </div>
+);
+
+const PageWithReduxFormsValidations = props => (
+  <ValidatingReduxFormWizardPage {...props}>
+    <form onSubmit={props.handleSubmit}>
+      <Field
+        component={ValidatingInputField}
+        type="text"
+        name="requiredText"
+        validate={[required]}
+        label="Required Text"
+      />
+    </form>
+  </ValidatingReduxFormWizardPage>
+);
+
+// values left so we know it's available
+function submit() {
+  // We can do form level validations here if needed using values
+
+  const wizardErrors = getWizardErrors(getState());
+
+  if (!_.isEmpty(wizardErrors)) {
+    // We've got errors so let redux form know by returning a rejected promise
+    return Promise.reject(
+      new SubmissionError({
+        ...wizardErrors
+      })
+    );
+  }
+
+  // No errors so let redux form know we are all good by returning a resolved promise
+  return Promise.resolve();
+}
+
+export default reduxForm({
+  form: "PageWithReduxFormsValidations",
+  destroyOnUnmount: false,
+  forceUnregisterOnUnmount: true,
+  onSubmit: submit
+})(PageWithReduxFormsValidations);

src/screens/wizardExample/components/WizardExampleContainer.js

@@ -1,9 +1,10 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-// import { Field } from "redux-form";
 import wizard from "../../../modules/wizard";
 import PageWithValidations from "./PageWithValidations";
 import PageWithInitializations from "./PageWithInitializations";
+import PageWithReduxFormsValidations from "./PageWithReduxFormsValidations";
+import LastPageOfWizardWithReduxFormsValidations from "./LastPageOfWizardWithReduxFormsValidations";
 
 const {
   components: { WizardPage, Wizard },
@@ -22,14 +23,6 @@ const SimplePage = () => (
   </WizardPage>
 );
 
-// const required = value => value;
-
-// const PageWithReduxFormsValidations = () => (
-//   <form name="wizardForm">
-//     <Field component={text} name="test" validations={[required]} />
-//   </form>
-// );
-
 class WizardExampleContainer extends Component {
   componentDidUpdate(prevProps) {
     if (wizardIsDisposing(prevProps, this.props)) {
@@ -68,8 +61,19 @@ class WizardExampleContainer extends Component {
             {
               component: PageWithInitializations,
               title: "Step 4: Page with initializations"
+            },
+            {
+              component: PageWithReduxFormsValidations,
+              title: "Step 5: Page with redux forms validations",
+              props: { formName: "PageWithReduxFormsValidations" }
+            },
+            {
+              component: LastPageOfWizardWithReduxFormsValidations,
+              title: "Step 6: Last page with redux forms validations",
+              props: { formName: "PageWithReduxFormsValidations" }
             }
           ]}
+          formName="PageWithReduxFormsValidations"
         />
       </div>
     );

src/screens/wizardExample/components/wizardExample.css

@@ -0,0 +1,4 @@
+.error {
+  color: red;
+  border-color: red;
+}