Skip to content

Commit 618b22f

Browse files
BenMaruchuBenMaruchu
committed
refactor(event-types): migrate form to antd v4
 see #250
1 parent df265ff commit 618b22f

File tree

3 files changed

+142
-168
lines changed

3 files changed

+142
-168
lines changed

‎src/Events/EventTypes/Form/index.js

+125-167
Original file line numberDiff line numberDiff line change
@@ -1,190 +1,148 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
13
import { reduxActions } from '@codetanzania/ewea-api-states';
24
import { httpActions } from '@codetanzania/ewea-api-client';
3-
import { Form } from '@ant-design/compatible';
4-
import '@ant-design/compatible/assets/index.css';
5-
import { Button, Input } from 'antd';
6-
import PropTypes from 'prop-types';
7-
import React, { Component } from 'react';
5+
import { Button, Form, Input } from 'antd';
6+
import get from 'lodash/get';
7+
88
import SearchableSelectInput from '../../../components/SearchableSelectInput';
99
import { notifyError, notifySuccess } from '../../../util';
1010

11-
/* constants */
11+
/* http actions */
1212
const { getEventGroups } = httpActions;
13+
/* redux actions */
1314
const { putEventType, postEventType } = reduxActions;
15+
/* constants */
1416
const { TextArea } = Input;
17+
const formItemLayout = {
18+
labelCol: {
19+
xs: { span: 24 },
20+
sm: { span: 24 },
21+
md: { span: 24 },
22+
lg: { span: 24 },
23+
xl: { span: 24 },
24+
xxl: { span: 24 },
25+
},
26+
wrapperCol: {
27+
xs: { span: 24 },
28+
sm: { span: 24 },
29+
md: { span: 24 },
30+
lg: { span: 24 },
31+
xl: { span: 24 },
32+
xxl: { span: 24 },
33+
},
34+
};
1535

1636
/**
17-
* @class
37+
* @function
1838
* @name EventTypeForm
19-
* @description Render form for creating a new event type
20-
*
21-
* @version 0.1.0
39+
* @description Form for creating and editing event type
40+
* @param {object} props Form properties object
41+
* @param {object|null} props.eventType Event Type object to be edited if null it will be created
42+
* @param {boolean} props.posting Boolean flag for showing spinner while sending data to the api
43+
* @param {Function} props.onCancel Callback for closing form
44+
* @returns {object} Render Event Type form
45+
* @version 0.2.0
2246
* @since 0.1.0
2347
*/
24-
class EventTypeForm extends Component {
25-
/**
26-
* @function
27-
* @name handleSubmit
28-
* @description call back function to handle submit action
29-
*
30-
* @param {object} e event object
31-
*
32-
* @returns {undefined} does not return anything
33-
*
34-
* @version 0.1.0
35-
* @since 0.1.0
36-
*/
37-
handleSubmit = (e) => {
38-
e.preventDefault();
39-
const {
40-
form: { validateFieldsAndScroll },
41-
eventType,
42-
isEditForm,
43-
} = this.props;
44-
45-
validateFieldsAndScroll((error, values) => {
46-
if (!error) {
47-
const payload = {
48-
strings: {
49-
name: {
50-
en: values.name,
51-
},
52-
description: {
53-
en: values.description,
54-
},
55-
},
56-
relations: {
57-
group: { _id: values.group },
58-
},
59-
};
60-
if (isEditForm) {
61-
const updatedContact = { ...eventType, ...payload };
62-
putEventType(
63-
updatedContact,
64-
() => {
65-
notifySuccess('Event Type was updated successfully');
66-
},
67-
() => {
68-
notifyError(
69-
'Something occurred while updating Event Type, please try again!'
70-
);
71-
}
72-
);
73-
} else {
74-
postEventType(
75-
payload,
76-
() => {
77-
notifySuccess('Event Type was created successfully');
78-
},
79-
() => {
80-
notifyError(
81-
'Something occurred while saving Event Type, please try again!'
82-
);
83-
}
48+
const EventTypeForm = ({ eventType, posting, onCancel }) => {
49+
const onFinish = (values) => {
50+
if (get(eventType, '_id')) {
51+
const updatedContact = { ...eventType, ...values };
52+
putEventType(
53+
updatedContact,
54+
() => {
55+
notifySuccess('Event Type was updated successfully');
56+
},
57+
() => {
58+
notifyError(
59+
'Something occurred while updating Event Type, please try again!'
8460
);
8561
}
86-
}
87-
});
88-
};
89-
90-
render() {
91-
const {
92-
posting,
93-
onCancel,
94-
isEditForm,
95-
eventType,
96-
form: { getFieldDecorator },
97-
} = this.props;
62+
);
63+
return;
64+
}
9865

99-
const formItemLayout = {
100-
labelCol: {
101-
xs: { span: 24 },
102-
sm: { span: 24 },
103-
md: { span: 24 },
104-
lg: { span: 24 },
105-
xl: { span: 24 },
106-
xxl: { span: 24 },
66+
postEventType(
67+
values,
68+
() => {
69+
notifySuccess('Event Type was created successfully');
10770
},
108-
wrapperCol: {
109-
xs: { span: 24 },
110-
sm: { span: 24 },
111-
md: { span: 24 },
112-
lg: { span: 24 },
113-
xl: { span: 24 },
114-
xxl: { span: 24 },
115-
},
116-
};
71+
() => {
72+
notifyError(
73+
'Something occurred while saving Event Type, please try again!'
74+
);
75+
}
76+
);
77+
};
11778

118-
return (
119-
<Form onSubmit={this.handleSubmit} autoComplete="off">
120-
{/* Event Type name */}
121-
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
122-
<Form.Item {...formItemLayout} label="Name">
123-
{getFieldDecorator('name', {
124-
initialValue: isEditForm ? eventType.strings.name.en : undefined,
125-
rules: [
126-
{
127-
required: true,
128-
message: ' Event Types organization name is required',
129-
},
130-
],
131-
})(<Input />)}
132-
</Form.Item>
133-
{/* end Event Type name */}
79+
return (
80+
<Form
81+
{...formItemLayout} // eslint-disable-line
82+
onFinish={onFinish}
83+
autoComplete="off"
84+
initialValues={{
85+
...eventType,
86+
relations: {
87+
group: get(eventType, 'relations.group._id'),
88+
},
89+
}}
90+
>
91+
<Form.Item
92+
name={['strings', 'name', 'en']}
93+
label="Name"
94+
rules={[
95+
{
96+
required: true,
97+
message: ' Event Types organization name is required',
98+
},
99+
]}
100+
>
101+
<Input />
102+
</Form.Item>
103+
{/* end Event Type name */}
134104

135-
{/* Event Type group */}
136-
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
137-
<Form.Item {...formItemLayout} label="Group">
138-
{getFieldDecorator('group', {
139-
initialValue:
140-
isEditForm && eventType.relations.group // eslint-disable-line
141-
? eventType.relations.group._id // eslint-disable-line
142-
: undefined,
143-
rules: [{ message: 'Event Type group is required' }],
144-
})(
145-
<SearchableSelectInput
146-
onSearch={getEventGroups}
147-
optionLabel={(group) => group.strings.name.en}
148-
optionValue="_id"
149-
initialValue={
150-
isEditForm && eventType.relations.group
151-
? eventType.relations.group
152-
: undefined
153-
}
154-
/>
155-
)}
156-
</Form.Item>
157-
{/* end Event Type group */}
105+
{/* Event Type group */}
106+
<Form.Item
107+
name={['relations', 'group']}
108+
label="Group"
109+
rules={[{ message: 'Event Type group is required' }]}
110+
>
111+
<SearchableSelectInput
112+
onSearch={getEventGroups}
113+
optionLabel={(group) => group.strings.name.en}
114+
optionValue="_id"
115+
initialValue={get(eventType, 'relations.group')}
116+
/>
117+
</Form.Item>
118+
{/* end Event Type group */}
158119

159-
{/* Event type */}
160-
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
161-
<Form.Item {...formItemLayout} label="Description">
162-
{getFieldDecorator('description', {
163-
initialValue: isEditForm
164-
? eventType.strings.description.en
165-
: undefined,
166-
rules: [{ required: true, message: 'Description is required' }],
167-
})(<TextArea autoSize={{ minRows: 3, maxRows: 10 }} />)}
168-
</Form.Item>
169-
{/* end Event Type */}
120+
{/* Event type */}
121+
<Form.Item
122+
name={['strings', 'description', 'en']}
123+
label="Description"
124+
rules={[{ required: true, message: 'Description is required' }]}
125+
>
126+
<TextArea autoSize={{ minRows: 3, maxRows: 10 }} />
127+
</Form.Item>
128+
{/* end Event Type */}
170129

171-
{/* form actions */}
172-
<Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'right' }}>
173-
<Button onClick={onCancel}>Cancel</Button>
174-
<Button
175-
style={{ marginLeft: 8 }}
176-
type="primary"
177-
htmlType="submit"
178-
loading={posting}
179-
>
180-
Save
181-
</Button>
182-
</Form.Item>
183-
{/* end form actions */}
184-
</Form>
185-
);
186-
}
187-
}
130+
{/* form actions */}
131+
<Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'right' }}>
132+
<Button onClick={onCancel}>Cancel</Button>
133+
<Button
134+
style={{ marginLeft: 8 }}
135+
type="primary"
136+
htmlType="submit"
137+
loading={posting}
138+
>
139+
Save
140+
</Button>
141+
</Form.Item>
142+
{/* end form actions */}
143+
</Form>
144+
);
145+
};
188146

189147
EventTypeForm.propTypes = {
190148
eventType: PropTypes.shape({
@@ -210,4 +168,4 @@ EventTypeForm.propTypes = {
210168
}).isRequired,
211169
};
212170

213-
export default Form.create()(EventTypeForm);
171+
export default EventTypeForm;

‎src/Events/EventTypes/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ class EventTypes extends Component {
131131
* @since 0.1.0
132132
*/
133133
handleAfterCloseForm = () => {
134+
selectEventType(null);
134135
this.setState({ isEditForm: false });
135136
};
136137

‎src/components/StakeholderForm/index.js

+16-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const {
1313
getPartyRoles,
1414
getPartyGroups,
1515
} = httpActions;
16-
/* redux actions */
1716
/* constants */
1817
const { TextArea } = Input;
1918
const formItemLayout = {
@@ -35,6 +34,21 @@ const formItemLayout = {
3534
},
3635
};
3736

37+
/**
38+
* @function
39+
* @name StakeholderForm
40+
* @description Form for creating focal person or an agency in stakeholder module
41+
* @param {object} props Form properties object
42+
* @param {object|null} props.stakeholder Stakeholder object to be edited if present or created if null on save
43+
* @param {boolean} props.posting Boolean flag for showing spinner while sending data to the api
44+
* @param {Function} props.onCancel Callback for closing the form
45+
* @param {Function} props.onCreate Callback for creating stakeholder
46+
* @param {Function} props.onUpdate Callback for updating stakeholder
47+
* @param {boolean} props.isAgency Boolean flag for marking the type of stakeholder
48+
* @returns {object} Render stakeholder form based on stakeholder type i.e focal or agency
49+
* @version 0.1.0
50+
* @since 0.1.0
51+
*/
3852
const StakeholderForm = ({
3953
stakeholder,
4054
posting,
@@ -57,6 +71,7 @@ const StakeholderForm = ({
5771
<Form
5872
{...formItemLayout} // eslint-disable-line
5973
onFinish={onFinish}
74+
autoComplete="off"
6075
initialValues={{
6176
...stakeholder,
6277
party: get(stakeholder, 'party._id'),

0 commit comments

Comments
 (0)