refactor(settings): migrate event status form to ant v4

                    ref #250

Author: BenMaruchu

src/Events/EventStatuses/Form/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import NotificationForm from '../../components/NotificationForm';
 import Topbar from '../../components/Topbar';
-import EventStatusForm from './Form';
+import SettingForm from '../../components/SettingForm';
 import ListItemActions from '../../components/ListItemActions';
 import ListItem from '../../components/ListItem';
 import ItemList from '../../components/List';
@@ -33,6 +33,8 @@ const {
   refreshEventStatuses,
   paginateEventStatuses,
   deleteEventStatus,
+  postEventStatus,
+  putEventStatus,
 } = reduxActions;
 
 const nameSpan = { xxl: 4, xl: 5, lg: 6, md: 7, sm: 0, xs: 0 };
@@ -202,6 +204,7 @@ class EventStatuses extends Component {
    * @since 0.1.0
    */
   handleAfterCloseForm = () => {
+    selectEventStatus(null);
     this.setState({ isEditForm: false });
   };
 
@@ -383,11 +386,12 @@ class EventStatuses extends Component {
           maskClosable={false}
           afterClose={this.handleAfterCloseForm}
         >
-          <EventStatusForm
+          <SettingForm
             posting={posting}
-            isEditForm={isEditForm}
-            eventStatus={eventStatus}
-            onCancel={this.closeEventStatusForm}
+            setting={eventStatus}
+            onCancel={this.handleAfterCloseForm}
+            onCreate={postEventStatus}
+            onUpdate={putEventStatus}
           />
         </Modal>
         {/* end create/edit form modal */}

src/Events/EventStatuses/index.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Form } from 'antd';
+import get from 'lodash/get';
+
+import { notifyError, notifySuccess } from '../../util';
+
+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 },
+  },
+};
+
+/**
+ * @function
+ * @name SettingForm
+ * @description Form for creating and editing settings
+ * @param {object} props Properties object
+ * @param {object|null} props.setting Setting object to be edited
+ * @param {boolean} props.posting Flag for showing spinner while posting
+ * @param {Function} props.onCancel On Cancel form callback
+ * @param {Function} props.onCreate On Create setting callback function
+ * @param {Function} props.onUpdate onUpdate setting callback function
+ * @returns {object} Setting Form
+ * @version 0.1.0
+ * @since 0.1.0
+ */
+const SettingForm = ({ setting, posting, onCancel, onCreate, onUpdate }) => {
+  const onFinish = (values) => {
+    if (get(setting, '_id')) {
+      const updatedSetting = { ...setting, ...values };
+      onUpdate(
+        updatedSetting,
+        () => notifySuccess('Setting was updated successfully'),
+        () =>
+          notifyError(
+            'An error occurred while updating setting, please contact your system administrator'
+          )
+      );
+
+      return;
+    }
+
+    onCreate(
+      values,
+      () => notifySuccess('Setting was created successfully'),
+      () =>
+        notifyError(
+          'An error occurred while saving setting, please contact your system administrator'
+        )
+    );
+  };
+
+  return (
+    <Form
+      {...formItemLayout} // eslint-disable-line
+      autoComplete="off"
+      onFinish={onFinish}
+      initialValues={{ ...setting }}
+    >
+      {/* setting name */}
+      <Form.Item
+        label="Name"
+        name={['strings', 'name', 'en']}
+        rules={[{ required: true, message: 'This field is required' }]}
+      >
+        <Input />
+      </Form.Item>
+      {/* end setting name */}
+
+      {/* setting description */}
+      <Form.Item label="Description" name={['strings', 'description', 'en']}>
+        <TextArea autoSize={{ minRows: 3, maxRows: 10 }} />
+      </Form.Item>
+      {/* end setting 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>
+  );
+};
+
+SettingForm.propTypes = {
+  setting: PropTypes.shape({
+    strings: PropTypes.shape({
+      name: PropTypes.shape({ en: PropTypes.string }),
+      abbreviation: PropTypes.shape({ en: PropTypes.string }),
+      description: PropTypes.shape({ en: PropTypes.string }),
+    }),
+  }),
+  onCancel: PropTypes.func.isRequired,
+  onCreate: PropTypes.func.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  posting: PropTypes.bool.isRequired,
+};
+
+SettingForm.defaultProps = {
+  setting: null,
+};
+
+export default SettingForm;