added formik to entitylistform #556

impactoss · Aug 9, 2024 · f620e67 · f620e67
1 parent 15177ee
commit f620e67
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 80 deletions.
diff --git a/app/containers/EntityListForm/constants.js b/app/containers/EntityListForm/constants.js
@@ -6,3 +6,7 @@
 export const FILTER_FORM_MODEL = 'entityListForm.forms.filterData';
 export const EDIT_FORM_MODEL = 'entityListForm.forms.editData';
 export const SET_FILTER = 'entityListForm.forms.setFilter';
+
+export const INITIAL_FORM = {
+  values: [],
+};
diff --git a/app/containers/EntityListForm/index.js b/app/containers/EntityListForm/index.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Map, fromJS } from 'immutable';
+import { fromJS } from 'immutable';
 import { connect } from 'react-redux';
-import { isEqual } from 'lodash/lang';
-import { Form, actions as formActions } from 'react-redux-form/immutable';
+import { Form, Formik, Field } from 'formik';
 import styled from 'styled-components';
 import { palette } from 'styled-theme';
 import { injectIntl } from 'react-intl';
@@ -12,14 +11,10 @@ import { lowerCase } from 'utils/string';
 import appMessage from 'utils/app-message';
 
 import ContainerWrapperSidebar from 'components/styled/Container/ContainerWrapperSidebar';
-import MultiSelectControl from 'components/forms/MultiSelectControl';
+import MultiSelectControl from 'components/formik/MultiSelectControl';
 
-import {
-  FILTER_FORM_MODEL,
-} from './constants';
-import {
-  setFilter,
-} from './actions';
+import { FILTER_FORM_MODEL, INITIAL_FORM } from './constants';
+import { setFilter } from './actions';
 
 const Styled = styled(ContainerWrapperSidebar)`
   z-index: ${(props) => props.sidebarResponsiveLarge ? 99 : 101};
@@ -57,15 +52,12 @@ const FormWrapper = styled.div`
 // z-index:-1;
 
 class EntityListForm extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  UNSAFE_componentWillMount() {
-    this.props.initialiseForm(this.props.model, this.props.formOptions.options);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Todo this is not efficent, parent component is creating a new map every time so we can't hashCode compare :(
-    if (!isEqual(nextProps.formOptions.options, this.props.formOptions.options)) {
-      this.props.initialiseForm(nextProps.model, nextProps.formOptions.options);
+  getInitialFormData = (options, fieldName) => {
+    let formData = INITIAL_FORM;
+    if (options) {
+      formData[fieldName] = Object.values(options);
     }
+    return formData;
   }
 
   render() {
@@ -80,6 +72,7 @@ class EntityListForm extends React.Component { // eslint-disable-line react/pref
     } else {
       formTitle = formOptions.title;
     }
+    const fieldName = 'values';
     return (
       <Styled
         sidebarResponsiveLarge={!formOptions.advanced}
@@ -93,40 +86,49 @@ class EntityListForm extends React.Component { // eslint-disable-line react/pref
           wide={formOptions.advanced}
           onClick={(evt) => evt.stopPropagation()}
         >
-          <Form
-            model={model}
-            onSubmit={onSubmit}
-          >
-            <MultiSelectControl
-              model=".values"
-              threeState
-              title={formTitle}
-              options={fromJS(formOptions.options).toList()}
-              multiple={formOptions.multiple}
-              required={formOptions.required}
-              search={formOptions.search}
-              advanced={formOptions.advanced}
-              groups={formOptions.groups}
-              closeOnClickOutside={false}
-              selectAll={formOptions.multiple && formOptions.selectAll}
-              tagFilterGroups={formOptions.tagFilterGroups}
-              panelId={activeOptionId}
-              onCancel={showCancelButton && onCancel ? onCancel : null}
-              onChange={(values) => {
-                this.props.onFormChange(values, model);
-                this.props.onSelect();
-              }}
-              buttons={buttons}
-            />
-          </Form>
+          <Formik
+            initialValues={this.getInitialFormData(formOptions.options, fieldName)}
+            onSubmit={(values) => onSubmit(fromJS(values))}
+          >       
+            {() =>
+              <Form>
+                <Field name={fieldName}>
+                  {({ form }) => (
+                    <MultiSelectControl
+                      threeState
+                      title={formTitle}
+                      values={fromJS(form.values[fieldName]).toList()}
+                      options={fromJS(formOptions.options).toList()}
+                      multiple={formOptions.multiple}
+                      required={formOptions.required}
+                      search={formOptions.search}
+                      advanced={formOptions.advanced}
+                      groups={formOptions.groups}
+                      closeOnClickOutside={false}
+                      selectAll={formOptions.multiple && formOptions.selectAll}
+                      tagFilterGroups={formOptions.tagFilterGroups}
+                      panelId={activeOptionId}
+                      onCancel={showCancelButton && onCancel ? onCancel : null}
+                      onChange={(fieldData) => {
+                        form.setFieldValue(fieldName, fieldData.toJS());
+                        this.props.onFormChange(fieldData, model);
+                        this.props.onSelect();
+                      }}
+                      buttons={buttons}
+                    />
+                  )
+                  }
+                </Field>
+              </Form>
+            }
+          </Formik>
         </FormWrapper>
       </Styled>
     );
   }
 }
 
 EntityListForm.propTypes = {
-  initialiseForm: PropTypes.func.isRequired,
   onFormChange: PropTypes.func.isRequired,
   model: PropTypes.string.isRequired,
   formOptions: PropTypes.object,
@@ -144,12 +146,6 @@ EntityListForm.defaultProps = {
 };
 
 const mapDispatchToProps = (dispatch) => ({
-  // resetForm: (model) => {
-  //   dispatch(formActions.reset(model));
-  // },
-  initialiseForm: (model, options) => {
-    dispatch(formActions.load(model, Map({ values: fromJS(options).toList() })));
-  },
   onFormChange: (values, model) => {
     if (model === FILTER_FORM_MODEL) {
       dispatch(setFilter(values));

diff --git a/app/containers/EntityListForm/reducer.js b/app/containers/EntityListForm/reducer.js
@@ -3,31 +3,6 @@
 * EntityListFilters reducer
 *
 */
-
-import { fromJS } from 'immutable';
-import { combineReducers } from 'redux-immutable';
-import { combineForms } from 'react-redux-form/immutable';
-
-const formInitial = fromJS({
+export const INITIAL_FORM = {
   values: [],
-});
-
-function filterFormReducer(state = formInitial, action) {
-  switch (action.type) {
-    default:
-      return state;
-  }
-}
-function editFormReducer(state = formInitial, action) {
-  switch (action.type) {
-    default:
-      return state;
-  }
-}
-
-export default combineReducers({
-  forms: combineForms({
-    filterData: filterFormReducer,
-    editData: editFormReducer,
-  }, 'entityListForm.forms'),
-});
+};
diff --git a/app/reducers.js b/app/reducers.js
@@ -12,7 +12,6 @@ import globalReducer from 'containers/App/reducer';
 import languageProviderReducer from 'containers/LanguageProvider/reducer';
 import entityNewReducer from 'containers/EntityNew/reducer';
 import entityListReducer from 'containers/EntityList/reducer';
-import entityListFormReducer from 'containers/EntityListForm/reducer';
 
 /*
  * routeReducer
@@ -59,7 +58,6 @@ export default function createReducer(asyncReducers) {
     language: languageProviderReducer,
     entityNew: entityNewReducer,
     entityList: entityListReducer,
-    entityListForm: entityListFormReducer,
     ...asyncReducers,
   });
 }