refactor(roles): migrate form to antd v4

                 see #250

Author: BenMaruchu

src/Stakeholders/Roles/Form/index.js

@@ -1,174 +1,141 @@
-import { reduxActions } from '@codetanzania/ewea-api-states';
-import { Form } from '@ant-design/compatible';
-import '@ant-design/compatible/assets/index.css';
-import { Button, Col, Input, Row } from 'antd';
+import React from 'react';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { reduxActions } from '@codetanzania/ewea-api-states';
+import { Button, Col, Form, Input, Row } from 'antd';
+import get from 'lodash/get';
+
 import { notifyError, notifySuccess } from '../../../util';
 
-/* constants */
+/* redux actions */
 const { postPartyRole, putPartyRole } = reduxActions;
+/* constants */
 const { TextArea } = Input;
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 24 },
+    md: { span: 24 },
+    lg: { span: 24 },
+    xl: { span: 24 },
+    xxl: { span: 24 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 24 },
+    md: { span: 24 },
+    lg: { span: 24 },
+    xl: { span: 24 },
+    xxl: { span: 24 },
+  },
+};
 
 /**
- * @class
+ * @function
  * @name RoleForm
- * @description Render React Form
- *
- * @version 0.1.0
+ * @description Form component for creating and editing stakeholder roles
+ * @param {object} props Form properties object
+ * @param {object|null} props.role Role object to be edited if null will be created
+ * @param {boolean} props.posting Flag for showing spinner when posting data to the api
+ * @param {Function} props.onCancel Callback function for closing form
+ * @returns {object} Render Role Form
+ * @version 0.2.0
  * @since 0.1.0
  */
-class RoleForm extends Component {
-  /**
-   * @function
-   * @name handleSubmit
-   * @description Handle form submit action
-   *
-   * @param {object} event onSubmit event
-   *
-   * @version 0.1.0
-   * @since 0.1.0
-   */
-  handleSubmit = (event) => {
-    event.preventDefault();
-
-    const {
-      form: { validateFieldsAndScroll },
-      role,
-      isEditForm,
-    } = this.props;
-
-    validateFieldsAndScroll((error, values) => {
-      if (!error) {
-        if (isEditForm) {
-          const updatedRole = { ...role, ...values };
-          putPartyRole(
-            updatedRole,
-            () => {
-              notifySuccess('Role was updated successfully');
-            },
-            () => {
-              notifyError(
-                'Something occurred while updating role, please try again!'
-              );
-            }
+const RoleForm = ({ role, posting, onCancel }) => {
+  const onFinish = (values) => {
+    if (get(role, '_id')) {
+      const updatedRole = { ...role, ...values };
+      putPartyRole(
+        updatedRole,
+        () => {
+          notifySuccess('Role was updated successfully');
+        },
+        () => {
+          notifyError(
+            'Something occurred while updating role, please try again!'
           );
-        } else {
-          postPartyRole(
-            values,
-            () => {
-              notifySuccess('Role was created successfully');
-            },
-            () => {
-              notifyError(
-                'Something occurred while saving role, please try again!'
-              );
-            }
+        }
+      );
+    } else {
+      postPartyRole(
+        values,
+        () => {
+          notifySuccess('Role was created successfully');
+        },
+        () => {
+          notifyError(
+            'Something occurred while saving role, please try again!'
           );
         }
-      }
-    });
+      );
+    }
   };
 
-  render() {
-    const {
-      isEditForm,
-      role,
-      posting,
-      onCancel,
-      form: { getFieldDecorator },
-    } = this.props;
-
-    const formItemLayout = {
-      labelCol: {
-        xs: { span: 24 },
-        sm: { span: 24 },
-        md: { span: 24 },
-        lg: { span: 24 },
-        xl: { span: 24 },
-        xxl: { span: 24 },
-      },
-      wrapperCol: {
-        xs: { span: 24 },
-        sm: { span: 24 },
-        md: { span: 24 },
-        lg: { span: 24 },
-        xl: { span: 24 },
-        xxl: { span: 24 },
-      },
-    };
-
-    return (
-      <Form onSubmit={this.handleSubmit} autoComplete="off">
-        {/* role name and abbreviation */}
-        <Row type="flex" justify="space-between">
-          <Col xxl={17} xl={17} lg={17} md={17} sm={24} xs={24}>
-            {/* role name */}
-            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <Form.Item {...formItemLayout} label=" Name">
-              {getFieldDecorator('strings.name.en', {
-                initialValue: isEditForm ? role.strings.name.en : undefined,
-                rules: [{ required: true, message: 'Role  name is required' }],
-              })(<Input />)}
-            </Form.Item>
-            {/* end role name */}
-          </Col>
+  return (
+    <Form
+      onFinish={onFinish}
+      {...formItemLayout} // eslint-disable-line
+      initialValues={{ ...role }}
+      autoComplete="off"
+    >
+      {/* role name and abbreviation */}
+      <Row type="flex" justify="space-between">
+        <Col xxl={17} xl={17} lg={17} md={17} sm={24} xs={24}>
+          {/* role name */}
+          <Form.Item
+            name={['strings', 'name', 'en']}
+            label="Name"
+            rules={[{ required: true, message: 'Role name is required' }]}
+          >
+            <Input />
+          </Form.Item>
+          {/* end role name */}
+        </Col>
 
-          <Col xxl={6} xl={6} lg={6} md={6} sm={24} xs={24}>
-            {/* role abbreviation */}
-            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <Form.Item {...formItemLayout} label="Abbreviation">
-              {getFieldDecorator('strings.abbreviation.en', {
-                initialValue: isEditForm
-                  ? role.strings.abbreviation.en
-                  : undefined,
-              })(<Input />)}
-            </Form.Item>
-            {/* end role abbreviation */}
-          </Col>
-        </Row>
-        {/* end role name and abbreviation */}
+        <Col xxl={6} xl={6} lg={6} md={6} sm={24} xs={24}>
+          {/* role abbreviation */}
+          <Form.Item
+            name={['strings', 'abbreviation', 'en']}
+            label="Abbreviation"
+          >
+            <Input />
+          </Form.Item>
+          {/* end role abbreviation */}
+        </Col>
+      </Row>
+      {/* end role name and abbreviation */}
 
-        {/* role description */}
-        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-        <Form.Item {...formItemLayout} label="Description">
-          {getFieldDecorator('strings.description.en', {
-            initialValue: isEditForm ? role.strings.description.en : undefined,
-          })(<TextArea autoSize={{ minRows: 3, maxRows: 10 }} />)}
-        </Form.Item>
-        {/* end role description */}
+      {/* role description */}
+      <Form.Item name={['strings', 'description', 'en']} label="Description">
+        <TextArea autoSize={{ minRows: 3, maxRows: 10 }} />
+      </Form.Item>
+      {/* end role description */}
 
-        {/* form actions */}
-        <Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'right' }}>
-          <Button onClick={onCancel}>Cancel</Button>
-          <Button
-            style={{ marginLeft: 8 }}
-            type="primary"
-            htmlType="submit"
-            loading={posting}
-          >
-            Save
-          </Button>
-        </Form.Item>
-        {/* end form actions */}
-      </Form>
-    );
-  }
-}
+      {/* form actions */}
+      <Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'right' }}>
+        <Button onClick={onCancel}>Cancel</Button>
+        <Button
+          style={{ marginLeft: 8 }}
+          type="primary"
+          htmlType="submit"
+          loading={posting}
+        >
+          Save
+        </Button>
+      </Form.Item>
+      {/* end form actions */}
+    </Form>
+  );
+};
 
 RoleForm.propTypes = {
-  isEditForm: PropTypes.bool.isRequired,
   role: PropTypes.shape({
     strings: PropTypes.shape({
       name: PropTypes.shape({ en: PropTypes.string }),
       abbreviation: PropTypes.shape({ en: PropTypes.string }),
       description: PropTypes.shape({ en: PropTypes.string }),
     }),
   }),
-  form: PropTypes.shape({
-    getFieldDecorator: PropTypes.func,
-    validateFieldsAndScroll: PropTypes.func,
-  }).isRequired,
   onCancel: PropTypes.func.isRequired,
   posting: PropTypes.bool.isRequired,
 };
@@ -177,4 +144,4 @@ RoleForm.defaultProps = {
   role: null,
 };
 
-export default Form.create()(RoleForm);
+export default RoleForm;

src/Stakeholders/Roles/index.js

@@ -170,6 +170,7 @@ class Roles extends Component {
    * @since 0.1.0
    */
   handleAfterCloseForm = () => {
+    selectPartyRole(null);
     this.setState({ isEditForm: false });
   };
 
@@ -431,7 +432,6 @@ class Roles extends Component {
         >
           <RoleForm
             posting={posting}
-            isEditForm={isEditForm}
             role={role}
             onCancel={this.closePartyRolesForm}
           />