Added HOC to make it easier to create Redux Forms pages

Author: RyanAtPlanGrid

src/modules/forms/components/ValidatingInputField.js

@@ -0,0 +1,26 @@
+import React from "react";
+import classNames from "classnames";
+
+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>
+);
+
+export default ValidatingInputField;

src/modules/forms/components/index.js

@@ -0,0 +1,5 @@
+import ValidatingInputField from "./ValidatingInputField";
+
+export default {
+  ValidatingInputField
+};

src/modules/forms/index.js

@@ -0,0 +1,7 @@
+import components from "./components";
+import * as validators from "./validators";
+
+export default {
+  components,
+  validators
+};

src/modules/forms/validators.js

@@ -0,0 +1,5 @@
+export const required = value => {
+  return (!isNaN(value) && +value) || (isNaN(value) && value !== undefined)
+    ? undefined
+    : "Required";
+};

src/modules/wizard/components/ValidatingReduxFormWizardPageContainer.js

@@ -66,14 +66,9 @@ export class ValidatingReduxFormWizardPageContainer extends React.Component {
 
   transitionStateMachine(nextProps) {
     switch (nextProps.wizard.currentState) {
-      case wizardStates.PAGE_INITIALIZED: {
-        this.props.pageRequiresValidation();
-        break;
-      }
       case wizardStates.DONE_REQUESTED:
       case wizardStates.VALIDATION_REQUESTED: {
         this.startReduxFormsValidation();
-        this.props.validating();
         break;
       }
       case wizardStates.VALIDATING:
@@ -83,7 +78,6 @@ export class ValidatingReduxFormWizardPageContainer extends React.Component {
       }
       case wizardStates.DISPOSING: {
         this.tryDestroyForm();
-        this.props.finishedDisposing();
         break;
       }
       default: {
@@ -134,7 +128,7 @@ export class ValidatingReduxFormWizardPageContainer extends React.Component {
 
   render() {
     return (
-      <ValidatingWizardPage requiresValidation {...this.props}>
+      <ValidatingWizardPage {...this.props}>
         {this.props.children}
       </ValidatingWizardPage>
     );

src/modules/wizard/components/WithReduxFormWizardPageValidation.js

@@ -1,18 +1,69 @@
 import React from "react";
 import ValidatingReduxFormWizardPageContainer from "./ValidatingReduxFormWizardPageContainer";
+import { reduxForm, SubmissionError } from "redux-form";
+import _ from "lodash";
+import { getWizardErrors } from "../wizard.selectors";
+import { getState } from "../../store";
 
 const WithReduxFormWizardPageValidation = (
   wrappedComponent,
-  { formName, componentProps, handlesValidation, requiresInitialization = true }
-) => props => (
-  <ValidatingReduxFormWizardPageContainer
-    component={wrappedComponent}
-    formName={formName}
-    handlesValidation={handlesValidation}
-    requiresInitialization={requiresInitialization}
-    {...componentProps}
-    {...props}
-  />
-);
+  {
+    formName,
+    handlesValidation,
+    requiresInitialization = false,
+    isLastPage = false
+  }
+) => {
+  let config;
+
+  if (isLastPage) {
+    config = {
+      form: formName,
+      destroyOnUnmount: false,
+      forceUnregisterOnUnmount: true,
+      keepDirtyOnReinitialize: true,
+      enableReinitialize: true
+    };
+  } else {
+    config = {
+      form: formName,
+      destroyOnUnmount: false,
+      forceUnregisterOnUnmount: true,
+      onSubmit: submit
+    };
+  }
+
+  const page = reduxForm(config)(wrappedComponent);
+
+  return props => (
+    <ValidatingReduxFormWizardPageContainer
+      formName={formName}
+      handlesValidation={handlesValidation}
+      requiresInitialization={requiresInitialization}
+      {...props}
+    >
+      {React.createElement(page, props)}
+    </ValidatingReduxFormWizardPageContainer>
+  );
+};
+
+// 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 WithReduxFormWizardPageValidation;

src/screens/wizardExample/components/LastPageOfWizardWithReduxFormsValidations.js

@@ -1,72 +1,66 @@
 import React from "react";
-import { reduxForm, Field } from "redux-form";
-import classNames from "classnames";
+import { Field, SubmissionError } from "redux-form";
+import { connect } from "react-redux";
 import "./wizardExample.css";
 import wizard from "../../../modules/wizard";
+import forms from "../../../modules/forms";
 
 const {
-  components: { ValidatingReduxFormWizardPage }
-} = wizard;
+  components: { ValidatingInputField },
+  validators: { required }
+} = forms;
 
-const required = value => {
-  return (!isNaN(value) && +value) || (isNaN(value) && value !== undefined)
-    ? undefined
-    : "Required";
-};
+const {
+  components: { WithReduxFormWizardPageValidation }
+} = wizard;
 
-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 }) => (
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <Field
+      component={ValidatingInputField}
+      type="number"
+      name="requiredNumber"
+      validate={[required]}
+      label="Required Number"
+    />
+  </form>
 );
 
-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 = WithReduxFormWizardPageValidation(
+  PageWithReduxFormsValidations,
+  {
+    formName: "PageWithReduxFormsValidations",
+    isLastPage: true
+  }
 );
 
-PageWithReduxFormsValidations = reduxForm({
-  form: "PageWithReduxFormsValidations"
-})(PageWithReduxFormsValidations);
+class PageWithReduxFormsValidationsContainer extends React.Component {
+  handleSubmit = values => {
+    if (
+      values.requiredText &&
+      values.requiredText.toLowerCase() === "servererror"
+    ) {
+      const errors = {
+        requiredText: "A fake server error occurred. Please try again."
+      };
+
+      const addEditPromoDetailsPage = 4;
+      this.props.pageNotValid(addEditPromoDetailsPage);
+
+      throw new SubmissionError(errors);
+    }
 
-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}
-      />
-    );
+    return <PageWithReduxFormsValidations onSubmit={this.handleSubmit} />;
   }
 }
+
+export default connect(
+  null,
+  { pageNotValid: wizard.actions.pageNotValid }
+)(PageWithReduxFormsValidationsContainer);

src/screens/wizardExample/components/PageWithReduxFormsValidations.js

@@ -1,83 +1,31 @@
 import React from "react";
-import { reduxForm, Field, SubmissionError } from "redux-form";
-import classNames from "classnames";
-import _ from "lodash";
+import { Field } from "redux-form";
 import "./wizardExample.css";
-import { getState } from "../../../modules/store";
 import wizard from "../../../modules/wizard";
+import forms from "../../../modules/forms";
 
 const {
-  selectors: { getWizardErrors }
-} = wizard;
+  components: { ValidatingInputField },
+  validators: { required }
+} = forms;
 
 const {
-  components: { ValidatingReduxFormWizardPage }
+  components: { WithReduxFormWizardPageValidation }
 } = 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>
+  <form onSubmit={props.handleSubmit}>
+    <Field
+      component={ValidatingInputField}
+      type="text"
+      name="requiredText"
+      validate={[required]}
+      label="Required Text"
+    />
+  </form>
 );
 
-// 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);
+export default WithReduxFormWizardPageValidation(
+  PageWithReduxFormsValidations,
+  { formName: "PageWithReduxFormsValidations" }
+);