Uploaded image for project: 'stripes-components'
  1. stripes-components
  2. STCOM-269

Simplify Redux Form logic in components

    XMLWordPrintable

    Details

    • Template:

      Description

      Purpose

      I noticed Rasmus created a test for the Checkbox component a few weeks ago - I thought it would be nice to move those assertions over to a test at lib/components/Checkbox/tests with a BigTest interactor. What I discovered in that process was that the Checkbox component had several bugs when not used in a Redux Form[https://redux-form.com/7.3.0/].

      Most stripes-components that are intended for use in a Redux Form Field have code resembling this:

      handleChange(e) {
         if (this.props.input && this.props.input.onChange) {
           this.props.input.onChange(e);
         }
      
         if (this.props.onChange) {
           this.props.onChange(e);
         }
       }
      

      Because the logic dealing with a component's behavior in a Redux Form vs. when it's independent is spread all over the component, it makes debugging behavioral differences very difficult.

      Approach

      We can simplify component APIs by moving the handling of Redux Form Field's input and meta props up a level.

      With a reduxFormField higher-order component, we can do something like this:

      import reduxFormField from '@folio/stripes-components/lib/ReduxFormField';
      
      function ExampleComponent({ value, onChange, warningText, errorText }) => (
        <div>{warningText}</div>
      );
      
      export default reduxFormField(
        ExampleComponent,
        ({ input, meta }) => ({
          value: input.value,
          onChange: input.onChange,
          warningText: (meta.touched && meta.warning ? meta.warning : ''),
          errorText: (meta.touched && meta.error ? meta.error : '')
        })
      );
      

      Now a component like the Checkbox only needs to deal with a single onChange() prop, not both onChange() and this.props.onChange().

      Impact

      This change shouldn't affect stripes-components consumers - there are no intentionally breaking changes. No changes are needed in stripes-core, modules, etc.

      The Checkbox was the proof-of-concept for this idea. Other components can follow as we get to them.

        TestRail: Results

          Attachments

            Issue Links

              Activity

                People

                Assignee:
                Unassigned Unassigned
                Reporter:
                cherewaty Jeffrey Cherewaty
                Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                  Dates

                  Created:
                  Updated:
                  Resolved:

                    TestRail: Runs

                      TestRail: Cases