discount-code-details.js

import React from "react";
import PropTypes from "prop-types";
import { compose } from "recompose";
import { defaultMemoize as memoize } from "reselect";
import DiscountCodeForm from "../discount-code-form";
import DiscountCodeConnector from "../discount-code-connector";
import { responseToFormValues, formValuesToRequest } from "./conversions";

export class DiscountCodeDetails extends React.Component {
   static propTypes = {
      discountCodeListUrl: PropTypes.string.isRequired,
      // Lets assume these are available somehow
      showNotification: PropTypes.func.isRequired,
      showApiErrorNotification: PropTypes.func.isRequired
   };

   createHandleSubmit = memoize(execute => (values, addHandlers) =>
      // This is where `addHandlers` comes in handy as the form controls its state
      addHandlers(
         execute(formValuesToRequest(values))
            .then(() => {
               this.props.showNotification();
            })
            .catch(error => {
               // The component is and should not be aware of this being a GraphQL error.
               this.props.showApiErrorNotification(error);
            })
      )
   );

   render() {
      return (
         <DiscountCodeConnector>
            {({ discountCodeFetcher, discountCodeUpdater }) => {
               if (discountCodeFetcher.isLoading) return <LoadingSpinner />;
               if (
                  !discountCodeFetcher.isLoading &&
                  !discountCodeFetcher.discountCode
               )
                  return <Redirect to={this.props.discountCodeListUrl} />;

               return (
                  <DiscountCodeForm
                     onSubmit={this.createHandleSubmit(
                        discountCodeUpdater.execute
                     )}
                     initialValues={responseToFormValues(
                        discountCodeFetcher.discountCode
                     )}
                  >
                     {({ form, isDirty, isSubmitting }) => (
                        <Layout>
                           <React.Fragment>
                              <Header>
                                 <DeleteIcon isDisabled={isDirty} />
                              </Header>
                              <FormSubmissionStatusMessage
                                 isSubmitting={isSubmitting}
                              />
                              {form}
                           </React.Fragment>
                        </Layout>
                     )}
                  </DiscountCodeForm>
               );
            }}
         </DiscountCodeConnector>
      );
   }
}

export default DiscountCodeDetails;