diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/containers/settings/EditServiceScreen.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/containers/settings/EditServiceScreen.js')
-rw-r--r-- | src/containers/settings/EditServiceScreen.js | 208 |
1 files changed, 208 insertions, 0 deletions
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js new file mode 100644 index 000000000..6c614b941 --- /dev/null +++ b/src/containers/settings/EditServiceScreen.js | |||
@@ -0,0 +1,208 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { inject, observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | |||
6 | import UserStore from '../../stores/UserStore'; | ||
7 | import RecipesStore from '../../stores/RecipesStore'; | ||
8 | import ServicesStore from '../../stores/ServicesStore'; | ||
9 | import Form from '../../lib/Form'; | ||
10 | import { gaPage } from '../../lib/analytics'; | ||
11 | |||
12 | |||
13 | import ServiceError from '../../components/settings/services/ServiceError'; | ||
14 | import EditServiceForm from '../../components/settings/services/EditServiceForm'; | ||
15 | import { required, url, oneRequired } from '../../helpers/validation-helpers'; | ||
16 | |||
17 | const messages = defineMessages({ | ||
18 | name: { | ||
19 | id: 'settings.service.form.name', | ||
20 | defaultMessage: '!!!Name', | ||
21 | }, | ||
22 | enableService: { | ||
23 | id: 'settings.service.form.enableService', | ||
24 | defaultMessage: '!!!Enable service', | ||
25 | }, | ||
26 | enableNotification: { | ||
27 | id: 'settings.service.form.enableNotification', | ||
28 | defaultMessage: '!!!Enable Notifications', | ||
29 | }, | ||
30 | team: { | ||
31 | id: 'settings.service.form.team', | ||
32 | defaultMessage: '!!!Team', | ||
33 | }, | ||
34 | customUrl: { | ||
35 | id: 'settings.service.form.customUrl', | ||
36 | defaultMessage: '!!!Custom server', | ||
37 | }, | ||
38 | indirectMessages: { | ||
39 | id: 'settings.service.form.indirectMessages', | ||
40 | defaultMessage: '!!!Show message badge for all new messages', | ||
41 | }, | ||
42 | }); | ||
43 | |||
44 | @inject('stores', 'actions') @observer | ||
45 | export default class EditServiceScreen extends Component { | ||
46 | static contextTypes = { | ||
47 | intl: intlShape, | ||
48 | }; | ||
49 | |||
50 | componentDidMount() { | ||
51 | gaPage('Settings/Service/Edit'); | ||
52 | } | ||
53 | |||
54 | onSubmit(serviceData) { | ||
55 | const { action } = this.props.router.params; | ||
56 | const { recipes, services } = this.props.stores; | ||
57 | const { createService, updateService } = this.props.actions.service; | ||
58 | |||
59 | if (action === 'edit') { | ||
60 | updateService({ serviceId: services.activeSettings.id, serviceData }); | ||
61 | } else { | ||
62 | createService({ recipeId: recipes.active.id, serviceData }); | ||
63 | } | ||
64 | } | ||
65 | |||
66 | prepareForm(recipe, service) { | ||
67 | const { intl } = this.context; | ||
68 | const config = { | ||
69 | fields: { | ||
70 | name: { | ||
71 | label: intl.formatMessage(messages.name), | ||
72 | placeholder: intl.formatMessage(messages.name), | ||
73 | value: service.id ? service.name : recipe.name, | ||
74 | }, | ||
75 | isEnabled: { | ||
76 | label: intl.formatMessage(messages.enableService), | ||
77 | value: service.isEnabled, | ||
78 | default: true, | ||
79 | }, | ||
80 | isNotificationEnabled: { | ||
81 | label: intl.formatMessage(messages.enableNotification), | ||
82 | value: service.isNotificationEnabled, | ||
83 | default: true, | ||
84 | }, | ||
85 | }, | ||
86 | }; | ||
87 | |||
88 | if (recipe.hasTeamId) { | ||
89 | Object.assign(config.fields, { | ||
90 | team: { | ||
91 | label: intl.formatMessage(messages.team), | ||
92 | placeholder: intl.formatMessage(messages.team), | ||
93 | value: service.team, | ||
94 | validate: [required], | ||
95 | }, | ||
96 | }); | ||
97 | } | ||
98 | |||
99 | if (recipe.hasCustomUrl) { | ||
100 | Object.assign(config.fields, { | ||
101 | customUrl: { | ||
102 | label: intl.formatMessage(messages.customUrl), | ||
103 | placeholder: 'https://', | ||
104 | value: service.customUrl, | ||
105 | validate: [required, url], | ||
106 | }, | ||
107 | }); | ||
108 | } | ||
109 | |||
110 | if (recipe.hasTeamId && recipe.hasCustomUrl) { | ||
111 | config.fields.team.validate = [oneRequired(['team', 'customUrl'])]; | ||
112 | config.fields.customUrl.validate = [url, oneRequired(['team', 'customUrl'])]; | ||
113 | } | ||
114 | |||
115 | if (recipe.hasIndirectMessages) { | ||
116 | Object.assign(config.fields, { | ||
117 | isIndirectMessageBadgeEnabled: { | ||
118 | label: intl.formatMessage(messages.indirectMessages), | ||
119 | value: service.isIndirectMessageBadgeEnabled, | ||
120 | default: true, | ||
121 | }, | ||
122 | }); | ||
123 | } | ||
124 | |||
125 | return new Form(config); | ||
126 | } | ||
127 | |||
128 | deleteService() { | ||
129 | const { deleteService } = this.props.actions.service; | ||
130 | const { action } = this.props.router.params; | ||
131 | |||
132 | if (action === 'edit') { | ||
133 | const { activeSettings: service } = this.props.stores.services; | ||
134 | deleteService({ | ||
135 | serviceId: service.id, | ||
136 | redirect: '/settings/services', | ||
137 | }); | ||
138 | } | ||
139 | } | ||
140 | |||
141 | render() { | ||
142 | const { recipes, services, user } = this.props.stores; | ||
143 | const { action } = this.props.router.params; | ||
144 | |||
145 | let recipe; | ||
146 | let service = {}; | ||
147 | let isLoading = false; | ||
148 | |||
149 | if (action === 'add') { | ||
150 | recipe = recipes.active; | ||
151 | |||
152 | // TODO: render error message when recipe is `null` | ||
153 | if (!recipe) { | ||
154 | return ( | ||
155 | <ServiceError /> | ||
156 | ); | ||
157 | } | ||
158 | } else { | ||
159 | service = services.activeSettings; | ||
160 | isLoading = services.allServicesRequest.isExecuting; | ||
161 | |||
162 | if (!isLoading && service) { | ||
163 | recipe = service.recipe; | ||
164 | } | ||
165 | } | ||
166 | |||
167 | if (isLoading) { | ||
168 | return (<div>Loading...</div>); | ||
169 | } | ||
170 | |||
171 | const form = this.prepareForm(recipe, service); | ||
172 | |||
173 | return ( | ||
174 | <EditServiceForm | ||
175 | action={action} | ||
176 | recipe={recipe} | ||
177 | service={service} | ||
178 | user={user.data} | ||
179 | form={form} | ||
180 | status={services.actionStatus} | ||
181 | isSaving={services.updateServiceRequest.isExecuting || services.createServiceRequest.isExecuting} | ||
182 | isDeleting={services.deleteServiceRequest.isExecuting} | ||
183 | onSubmit={d => this.onSubmit(d)} | ||
184 | onDelete={() => this.deleteService()} | ||
185 | /> | ||
186 | ); | ||
187 | } | ||
188 | } | ||
189 | |||
190 | EditServiceScreen.wrappedComponent.propTypes = { | ||
191 | stores: PropTypes.shape({ | ||
192 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
193 | recipes: PropTypes.instanceOf(RecipesStore).isRequired, | ||
194 | services: PropTypes.instanceOf(ServicesStore).isRequired, | ||
195 | }).isRequired, | ||
196 | router: PropTypes.shape({ | ||
197 | params: PropTypes.shape({ | ||
198 | action: PropTypes.string.isRequired, | ||
199 | }).isRequired, | ||
200 | }).isRequired, | ||
201 | actions: PropTypes.shape({ | ||
202 | service: PropTypes.shape({ | ||
203 | createService: PropTypes.func.isRequired, | ||
204 | updateService: PropTypes.func.isRequired, | ||
205 | deleteService: PropTypes.func.isRequired, | ||
206 | }).isRequired, | ||
207 | }).isRequired, | ||
208 | }; | ||