updating entity form to use formik WIP #556

app/components/fields/StatusField/index.js

@@ -35,7 +35,7 @@ class StatusField extends React.PureComponent { // eslint-disable-line react/pre
 
 StatusField.propTypes = {
   field: PropTypes.object.isRequired,
-  intl: PropTypes.object.isRequired.isRequired,
+  intl: PropTypes.object.isRequired,
 };
 
 export default injectIntl(StatusField);

app/components/formik/ControlCheckbox.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const ControlCheckbox = styled.input`
+const StyledCheckbox = styled.input`
   margin-right: 5px;
 `;
 
-export default <ControlCheckbox type='checkbox' />;
+const ControlCheckbox = (props) => <StyledCheckbox type='checkbox' {...props} />;
+
+export default ControlCheckbox;

app/components/formik/DateControl/index.js

@@ -42,9 +42,11 @@ const DateControl = (props) => {
         parse(inputValue, DATE_FORMAT, new Date()),
         DB_DATE_FORMAT,
       );
+      setFieldValue(field.name, formattedDB);
       onChange(formattedDB);
     } else {
       // wrong format but store value for input field
+      setFieldValue(field.name, inputValue);
       onChange(inputValue);
     }
   };

app/components/formik/MultiSelectField/index.js

@@ -305,7 +305,7 @@ class MultiSelectField extends React.Component { // eslint-disable-line react/pr
                     onClick: this.onCloseMultiselect,
                   },
                 ]}
-                onChange={this.props.onChange}
+                onChange={this.props.handleUpdate}
                 {...controlProps}
               />
             </MultiSelectWrapper>
@@ -319,7 +319,7 @@ class MultiSelectField extends React.Component { // eslint-disable-line react/pr
 MultiSelectField.propTypes = {
   field: PropTypes.object,
   fieldData: PropTypes.object,
-  onChange: PropTypes.func,
+  handleUpdate: PropTypes.func,
   closeOnClickOutside: PropTypes.bool,
   scrollContainer: PropTypes.object,
   intl: PropTypes.object.isRequired,

app/containers/ActionEdit/index.js

@@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import HelmetCanonical from 'components/HelmetCanonical';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { actions as formActions } from 'react-redux-form/immutable';
 import { Map, fromJS } from 'immutable';
 
 import {
@@ -26,7 +25,7 @@ import {
   getTextareaField,
   renderTaxonomyControl,
   getReferenceFormField,
-} from 'utils/forms';
+} from 'utils/formik';
 
 import {
   getMetaField,
@@ -43,7 +42,6 @@ import {
   loadEntitiesIfNeeded,
   redirectIfNotPermitted,
   updatePath,
-  updateEntityForm,
   deleteEntity,
   openNewEntityModal,
   submitInvalid,
@@ -84,25 +82,20 @@ export class ActionEdit extends React.Component { // eslint-disable-line react/p
   constructor(props) {
     super(props);
     this.scrollContainer = React.createRef();
+    this.remoteSubmitForm = null;
   }
 
   UNSAFE_componentWillMount() {
     this.props.loadEntitiesIfNeeded();
-    if (this.props.dataReady && this.props.viewEntity) {
-      this.props.initialiseForm('measureEdit.form.data', this.getInitialFormData());
-    }
+
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
     // reload entities if invalidated
     if (!nextProps.dataReady) {
       this.props.loadEntitiesIfNeeded();
     }
-    // repopulate if new data becomes ready
-    if (nextProps.dataReady && !this.props.dataReady && nextProps.viewEntity) {
-      this.props.initialiseForm('measureEdit.form.data', this.getInitialFormData(nextProps));
-    }
-    //
+
     if (nextProps.authReady && !this.props.authReady) {
       this.props.redirectIfNotPermitted();
     }
@@ -111,15 +104,16 @@ export class ActionEdit extends React.Component { // eslint-disable-line react/p
     }
   }
 
-  getInitialFormData = (nextProps) => {
-    const props = nextProps || this.props;
-    const {
-      viewEntity, taxonomies, recommendationsByFw, indicators,
-    } = props;
+  bindHandleSubmit = (submitForm) => {
+    this.remoteSubmitForm = submitForm;
+  };
+
+  getInitialFormData = ({ viewEntity, taxonomies, recommendationsByFw, indicators }) => {
     let attributes = viewEntity.get('attributes');
     if (!attributes.get('reference') || attributes.get('reference') === '') {
       attributes = attributes.set('reference', viewEntity.get('id'));
     }
+
     return viewEntity
       ? Map({
         id: viewEntity.get('id'),
@@ -290,7 +284,11 @@ export class ActionEdit extends React.Component { // eslint-disable-line react/p
                 {
                   type: 'save',
                   disabled: saveSending,
-                  onClick: () => this.props.handleSubmitRemote('measureEdit.form.data'),
+                  onClick: (e) => {
+                    if (this.remoteSubmitForm) {
+                      this.remoteSubmitForm(e);
+                    }
+                  },
                 }]
                 : null
             }
@@ -329,8 +327,8 @@ export class ActionEdit extends React.Component { // eslint-disable-line react/p
           {viewEntity && dataReady && !deleteSending
             && (
               <EntityForm
-                model="measureEdit.form.data"
-                formData={viewDomain.getIn(['form', 'data'])}
+                formData={this.getInitialFormData(this.props).toJS()}
+                bindHandleSubmit={this.bindHandleSubmit}
                 saving={saveSending}
                 handleSubmit={(formData) => this.props.handleSubmit(
                   formData,
@@ -341,7 +339,6 @@ export class ActionEdit extends React.Component { // eslint-disable-line react/p
                 )}
                 handleSubmitFail={this.props.handleSubmitFail}
                 handleCancel={this.props.handleCancel}
-                handleUpdate={this.props.handleUpdate}
                 handleDelete={canUserDeleteEntities(this.props.highestRole) ? this.props.handleDelete : null}
                 fields={{
                   header: {
@@ -382,12 +379,9 @@ export class ActionEdit extends React.Component { // eslint-disable-line react/p
 ActionEdit.propTypes = {
   loadEntitiesIfNeeded: PropTypes.func,
   redirectIfNotPermitted: PropTypes.func,
-  initialiseForm: PropTypes.func,
-  handleSubmitRemote: PropTypes.func.isRequired,
   handleSubmitFail: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
   handleCancel: PropTypes.func.isRequired,
-  handleUpdate: PropTypes.func.isRequired,
   handleDelete: PropTypes.func.isRequired,
   viewDomain: PropTypes.object,
   viewEntity: PropTypes.object,
@@ -431,10 +425,6 @@ function mapDispatchToProps(dispatch, props) {
     redirectIfNotPermitted: () => {
       dispatch(redirectIfNotPermitted(USER_ROLES.MANAGER.value));
     },
-    initialiseForm: (model, formData) => {
-      dispatch(formActions.reset(model));
-      dispatch(formActions.change(model, formData, { silent: true }));
-    },
     onErrorDismiss: () => {
       dispatch(submitInvalid(true));
     },
@@ -444,10 +434,8 @@ function mapDispatchToProps(dispatch, props) {
     handleSubmitFail: () => {
       dispatch(submitInvalid(false));
     },
-    handleSubmitRemote: (model) => {
-      dispatch(formActions.submit(model));
-    },
-    handleSubmit: (formData, taxonomies, recommendationsByFw, indicators, viewEntity) => {
+    handleSubmit: (formValues, taxonomies, recommendationsByFw, indicators, viewEntity) => {
+      const formData = fromJS(formValues);
       let saveData = formData
         .set(
           'measureCategories',
@@ -506,9 +494,6 @@ function mapDispatchToProps(dispatch, props) {
     handleCancel: () => {
       dispatch(updatePath(`/actions/${props.params.id}`, { replace: true }));
     },
-    handleUpdate: (formData) => {
-      dispatch(updateEntityForm(formData));
-    },
     handleDelete: () => {
       dispatch(deleteEntity({
         path: 'measures',

app/containers/ActionEdit/reducer.js

@@ -4,24 +4,9 @@
 *
 */
 import { combineReducers } from 'redux-immutable';
-import { combineForms } from 'react-redux-form/immutable';
 
 import { entityFormReducer } from 'containers/App/entityFormReducer';
-import { UPDATE_ENTITY_FORM } from 'containers/App/constants';
-import { FORM_INITIAL } from './constants';
-
-function formReducer(state = FORM_INITIAL, action) {
-  switch (action.type) {
-    case UPDATE_ENTITY_FORM:
-      return action.data;
-    default:
-      return state;
-  }
-}
 
 export default combineReducers({
   page: entityFormReducer,
-  form: combineForms({
-    data: formReducer,
-  }, 'measureEdit.form'),
 });