diff options
author | Muhamed <unknown> | 2022-11-08 07:40:02 +0530 |
---|---|---|
committer | Vijay Aravamudhan <vraravam@users.noreply.github.com> | 2022-11-08 17:25:27 +0530 |
commit | 570d26baf9e4ad87a8c0752b5edfb5c441bf9d80 (patch) | |
tree | ee0a0e6bec7d10ec438b5269537905fee80c377b /src/containers/settings/EditServiceScreen.tsx | |
parent | refactor: remove toggle component's duplicate (diff) | |
download | ferdium-app-570d26baf9e4ad87a8c0752b5edfb5c441bf9d80.tar.gz ferdium-app-570d26baf9e4ad87a8c0752b5edfb5c441bf9d80.tar.zst ferdium-app-570d26baf9e4ad87a8c0752b5edfb5c441bf9d80.zip |
fix: slack issue caused by input TS conversion
Diffstat (limited to 'src/containers/settings/EditServiceScreen.tsx')
-rw-r--r-- | src/containers/settings/EditServiceScreen.tsx | 93 |
1 files changed, 53 insertions, 40 deletions
diff --git a/src/containers/settings/EditServiceScreen.tsx b/src/containers/settings/EditServiceScreen.tsx index d0f0c779d..09dd19925 100644 --- a/src/containers/settings/EditServiceScreen.tsx +++ b/src/containers/settings/EditServiceScreen.tsx | |||
@@ -1,25 +1,19 @@ | |||
1 | import { Component, ReactElement } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import { inject, observer } from 'mobx-react'; | 2 | import { inject, observer } from 'mobx-react'; |
3 | import { defineMessages, injectIntl } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
4 | |||
5 | import { Params } from 'react-router-dom'; | 4 | import { Params } from 'react-router-dom'; |
6 | import { StoresProps } from '../../@types/ferdium-components.types'; | 5 | import { StoresProps } from '../../@types/ferdium-components.types'; |
7 | import { IRecipe } from '../../models/Recipe'; | 6 | import { IRecipe } from '../../models/Recipe'; |
8 | import Service from '../../models/Service'; | 7 | import Service from '../../models/Service'; |
9 | import { FormFields } from '../../@types/mobx-form.types'; | 8 | import { FormFields } from '../../@types/mobx-form.types'; |
10 | import Form from '../../lib/Form'; | 9 | import Form from '../../lib/Form'; |
11 | |||
12 | import ServiceError from '../../components/settings/services/ServiceError'; | 10 | import ServiceError from '../../components/settings/services/ServiceError'; |
13 | import EditServiceForm from '../../components/settings/services/EditServiceForm'; | 11 | import EditServiceForm from '../../components/settings/services/EditServiceForm'; |
14 | import ErrorBoundary from '../../components/util/ErrorBoundary'; | 12 | import ErrorBoundary from '../../components/util/ErrorBoundary'; |
15 | |||
16 | import { required, url, oneRequired } from '../../helpers/validation-helpers'; | 13 | import { required, url, oneRequired } from '../../helpers/validation-helpers'; |
17 | import { getSelectOptions } from '../../helpers/i18n-helpers'; | 14 | import { getSelectOptions } from '../../helpers/i18n-helpers'; |
18 | |||
19 | import { config as proxyFeature } from '../../features/serviceProxy'; | 15 | import { config as proxyFeature } from '../../features/serviceProxy'; |
20 | |||
21 | import { SPELLCHECKER_LOCALES } from '../../i18n/languages'; | 16 | import { SPELLCHECKER_LOCALES } from '../../i18n/languages'; |
22 | |||
23 | import globalMessages from '../../i18n/globalMessages'; | 17 | import globalMessages from '../../i18n/globalMessages'; |
24 | import { DEFAULT_APP_SETTINGS, DEFAULT_SERVICE_SETTINGS } from '../../config'; | 18 | import { DEFAULT_APP_SETTINGS, DEFAULT_SERVICE_SETTINGS } from '../../config'; |
25 | import withParams from '../../components/util/WithParams'; | 19 | import withParams from '../../components/util/WithParams'; |
@@ -123,13 +117,22 @@ const messages = defineMessages({ | |||
123 | }, | 117 | }, |
124 | }); | 118 | }); |
125 | 119 | ||
126 | interface EditServicesScreenProps extends StoresProps { | 120 | interface IProxyConfig { |
127 | intl: any; | 121 | isEnabled?: boolean; |
122 | host?: string; | ||
123 | port?: number; | ||
124 | user?: string; | ||
125 | password?: string; | ||
126 | } | ||
127 | |||
128 | interface IProps extends StoresProps, WrappedComponentProps { | ||
128 | params: Params; | 129 | params: Params; |
129 | } | 130 | } |
130 | 131 | ||
131 | class EditServiceScreen extends Component<EditServicesScreenProps> { | 132 | @inject('stores', 'actions') |
132 | onSubmit(data: any) { | 133 | @observer |
134 | class EditServiceScreen extends Component<IProps> { | ||
135 | onSubmit(data: any): void { | ||
133 | const { action } = this.props.params; | 136 | const { action } = this.props.params; |
134 | const { recipes, services } = this.props.stores; | 137 | const { recipes, services } = this.props.stores; |
135 | const { createService, updateService } = this.props.actions.service; | 138 | const { createService, updateService } = this.props.actions.service; |
@@ -153,9 +156,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
153 | } | 156 | } |
154 | 157 | ||
155 | prepareForm(recipe: IRecipe, service: Service | null, proxy: any): Form { | 158 | prepareForm(recipe: IRecipe, service: Service | null, proxy: any): Form { |
156 | const { intl } = this.props; | 159 | const { stores, intl } = this.props; |
157 | |||
158 | const { stores } = this.props; | ||
159 | 160 | ||
160 | let defaultSpellcheckerLanguage = | 161 | let defaultSpellcheckerLanguage = |
161 | SPELLCHECKER_LOCALES[stores.settings.app.spellcheckerLanguage]; | 162 | SPELLCHECKER_LOCALES[stores.settings.app.spellcheckerLanguage]; |
@@ -189,41 +190,49 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
189 | label: intl.formatMessage(messages.enableService), | 190 | label: intl.formatMessage(messages.enableService), |
190 | value: service?.isEnabled, | 191 | value: service?.isEnabled, |
191 | default: DEFAULT_SERVICE_SETTINGS.isEnabled, | 192 | default: DEFAULT_SERVICE_SETTINGS.isEnabled, |
193 | type: 'checkbox', | ||
192 | }, | 194 | }, |
193 | isHibernationEnabled: { | 195 | isHibernationEnabled: { |
194 | label: intl.formatMessage(messages.enableHibernation), | 196 | label: intl.formatMessage(messages.enableHibernation), |
195 | value: service?.isHibernationEnabled, | 197 | value: service?.isHibernationEnabled, |
196 | default: DEFAULT_SERVICE_SETTINGS.isHibernationEnabled, | 198 | default: DEFAULT_SERVICE_SETTINGS.isHibernationEnabled, |
199 | type: 'checkbox', | ||
197 | }, | 200 | }, |
198 | isWakeUpEnabled: { | 201 | isWakeUpEnabled: { |
199 | label: intl.formatMessage(messages.enableWakeUp), | 202 | label: intl.formatMessage(messages.enableWakeUp), |
200 | value: service?.isWakeUpEnabled, | 203 | value: service?.isWakeUpEnabled, |
201 | default: DEFAULT_SERVICE_SETTINGS.isWakeUpEnabled, | 204 | default: DEFAULT_SERVICE_SETTINGS.isWakeUpEnabled, |
205 | type: 'checkbox', | ||
202 | }, | 206 | }, |
203 | isNotificationEnabled: { | 207 | isNotificationEnabled: { |
204 | label: intl.formatMessage(messages.enableNotification), | 208 | label: intl.formatMessage(messages.enableNotification), |
205 | value: service?.isNotificationEnabled, | 209 | value: service?.isNotificationEnabled, |
206 | default: DEFAULT_SERVICE_SETTINGS.isNotificationEnabled, | 210 | default: DEFAULT_SERVICE_SETTINGS.isNotificationEnabled, |
211 | type: 'checkbox', | ||
207 | }, | 212 | }, |
208 | isBadgeEnabled: { | 213 | isBadgeEnabled: { |
209 | label: intl.formatMessage(messages.enableBadge), | 214 | label: intl.formatMessage(messages.enableBadge), |
210 | value: service?.isBadgeEnabled, | 215 | value: service?.isBadgeEnabled, |
211 | default: DEFAULT_SERVICE_SETTINGS.isBadgeEnabled, | 216 | default: DEFAULT_SERVICE_SETTINGS.isBadgeEnabled, |
217 | type: 'checkbox', | ||
212 | }, | 218 | }, |
213 | isMediaBadgeEnabled: { | 219 | isMediaBadgeEnabled: { |
214 | label: intl.formatMessage(messages.enableMediaBadge), | 220 | label: intl.formatMessage(messages.enableMediaBadge), |
215 | value: service?.isMediaBadgeEnabled, | 221 | value: service?.isMediaBadgeEnabled, |
216 | default: DEFAULT_SERVICE_SETTINGS.isMediaBadgeEnabled, | 222 | default: DEFAULT_SERVICE_SETTINGS.isMediaBadgeEnabled, |
223 | type: 'checkbox', | ||
217 | }, | 224 | }, |
218 | trapLinkClicks: { | 225 | trapLinkClicks: { |
219 | label: intl.formatMessage(messages.trapLinkClicks), | 226 | label: intl.formatMessage(messages.trapLinkClicks), |
220 | value: service?.trapLinkClicks, | 227 | value: service?.trapLinkClicks, |
221 | default: DEFAULT_SERVICE_SETTINGS.trapLinkClicks, | 228 | default: DEFAULT_SERVICE_SETTINGS.trapLinkClicks, |
229 | type: 'checkbox', | ||
222 | }, | 230 | }, |
223 | isMuted: { | 231 | isMuted: { |
224 | label: intl.formatMessage(messages.enableAudio), | 232 | label: intl.formatMessage(messages.enableAudio), |
225 | value: !service?.isMuted, | 233 | value: !service?.isMuted, |
226 | default: DEFAULT_SERVICE_SETTINGS.isMuted, | 234 | default: DEFAULT_SERVICE_SETTINGS.isMuted, |
235 | type: 'checkbox', | ||
227 | }, | 236 | }, |
228 | customIcon: { | 237 | customIcon: { |
229 | label: intl.formatMessage(messages.icon), | 238 | label: intl.formatMessage(messages.icon), |
@@ -235,6 +244,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
235 | label: intl.formatMessage(messages.enableDarkMode), | 244 | label: intl.formatMessage(messages.enableDarkMode), |
236 | value: service?.isDarkModeEnabled, | 245 | value: service?.isDarkModeEnabled, |
237 | default: stores.settings.app.darkMode, | 246 | default: stores.settings.app.darkMode, |
247 | type: 'checkbox', | ||
238 | }, | 248 | }, |
239 | darkReaderBrightness: { | 249 | darkReaderBrightness: { |
240 | label: intl.formatMessage(messages.darkReaderBrightness), | 250 | label: intl.formatMessage(messages.darkReaderBrightness), |
@@ -261,6 +271,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
261 | label: intl.formatMessage(messages.enableProgressbar), | 271 | label: intl.formatMessage(messages.enableProgressbar), |
262 | value: service?.isProgressbarEnabled, | 272 | value: service?.isProgressbarEnabled, |
263 | default: DEFAULT_SERVICE_SETTINGS.isProgressbarEnabled, | 273 | default: DEFAULT_SERVICE_SETTINGS.isProgressbarEnabled, |
274 | type: 'checkbox', | ||
264 | }, | 275 | }, |
265 | spellcheckerLanguage: { | 276 | spellcheckerLanguage: { |
266 | label: intl.formatMessage(globalMessages.spellcheckerLanguage), | 277 | label: intl.formatMessage(globalMessages.spellcheckerLanguage), |
@@ -277,25 +288,28 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
277 | }; | 288 | }; |
278 | 289 | ||
279 | if (recipe.hasTeamId) { | 290 | if (recipe.hasTeamId) { |
280 | Object.assign(config.fields, { | 291 | config.fields = { |
292 | ...config.fields, | ||
293 | |||
281 | team: { | 294 | team: { |
282 | label: intl.formatMessage(messages.team), | 295 | label: intl.formatMessage(messages.team), |
283 | placeholder: intl.formatMessage(messages.team), | 296 | placeholder: intl.formatMessage(messages.team), |
284 | value: service?.team, | 297 | value: service?.team, |
285 | validators: [required], | 298 | validators: [required], |
286 | }, | 299 | }, |
287 | }); | 300 | }; |
288 | } | 301 | } |
289 | 302 | ||
290 | if (recipe.hasCustomUrl) { | 303 | if (recipe.hasCustomUrl) { |
291 | Object.assign(config.fields, { | 304 | config.fields = { |
305 | ...config.fields, | ||
292 | customUrl: { | 306 | customUrl: { |
293 | label: intl.formatMessage(messages.customUrl), | 307 | label: intl.formatMessage(messages.customUrl), |
294 | placeholder: "'http://' or 'https://' or 'file:///'", | 308 | placeholder: "'http://' or 'https://' or 'file:///'", |
295 | value: service?.customUrl || recipe.serviceURL, | 309 | value: service?.customUrl || recipe.serviceURL, |
296 | validators: [required, url], | 310 | validators: [required, url], |
297 | }, | 311 | }, |
298 | }); | 312 | }; |
299 | } | 313 | } |
300 | 314 | ||
301 | // More fine grained and use case specific validation rules | 315 | // More fine grained and use case specific validation rules |
@@ -318,38 +332,37 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
318 | } | 332 | } |
319 | 333 | ||
320 | if (recipe.hasIndirectMessages) { | 334 | if (recipe.hasIndirectMessages) { |
321 | Object.assign(config.fields, { | 335 | config.fields = { |
336 | ...config.fields, | ||
322 | isIndirectMessageBadgeEnabled: { | 337 | isIndirectMessageBadgeEnabled: { |
323 | label: intl.formatMessage(messages.indirectMessages), | 338 | label: intl.formatMessage(messages.indirectMessages), |
324 | value: service?.isIndirectMessageBadgeEnabled, | 339 | value: service?.isIndirectMessageBadgeEnabled, |
325 | default: DEFAULT_SERVICE_SETTINGS.hasIndirectMessages, | 340 | default: DEFAULT_SERVICE_SETTINGS.hasIndirectMessages, |
341 | type: 'checkbox', | ||
326 | }, | 342 | }, |
327 | }); | 343 | }; |
328 | } | 344 | } |
329 | 345 | ||
330 | if (recipe.allowFavoritesDelineationInUnreadCount) { | 346 | if (recipe.allowFavoritesDelineationInUnreadCount) { |
331 | Object.assign(config.fields, { | 347 | config.fields = { |
348 | ...config.fields, | ||
332 | onlyShowFavoritesInUnreadCount: { | 349 | onlyShowFavoritesInUnreadCount: { |
333 | label: intl.formatMessage(messages.onlyShowFavoritesInUnreadCount), | 350 | label: intl.formatMessage(messages.onlyShowFavoritesInUnreadCount), |
334 | value: service?.onlyShowFavoritesInUnreadCount, | 351 | value: service?.onlyShowFavoritesInUnreadCount, |
335 | default: DEFAULT_APP_SETTINGS.onlyShowFavoritesInUnreadCount, | 352 | default: DEFAULT_APP_SETTINGS.onlyShowFavoritesInUnreadCount, |
353 | type: 'checkbox', | ||
336 | }, | 354 | }, |
337 | }); | 355 | }; |
338 | } | 356 | } |
339 | 357 | ||
340 | if (proxy.isEnabled) { | 358 | if (proxy.isEnabled) { |
341 | let serviceProxyConfig: { | 359 | let serviceProxyConfig: IProxyConfig = {}; |
342 | isEnabled?: boolean; | ||
343 | host?: string; | ||
344 | port?: number; | ||
345 | user?: string; | ||
346 | password?: string; | ||
347 | } = {}; | ||
348 | if (service) { | 360 | if (service) { |
349 | serviceProxyConfig = stores.settings.proxy[service.id] || {}; | 361 | serviceProxyConfig = stores.settings.proxy[service.id] || {}; |
350 | } | 362 | } |
351 | 363 | ||
352 | Object.assign(config.fields, { | 364 | config.fields = { |
365 | ...config.fields, | ||
353 | proxy: { | 366 | proxy: { |
354 | name: 'proxy', | 367 | name: 'proxy', |
355 | label: 'proxy', | 368 | label: 'proxy', |
@@ -358,6 +371,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
358 | label: intl.formatMessage(messages.enableProxy), | 371 | label: intl.formatMessage(messages.enableProxy), |
359 | value: serviceProxyConfig.isEnabled, | 372 | value: serviceProxyConfig.isEnabled, |
360 | default: DEFAULT_APP_SETTINGS.proxyFeatureEnabled, | 373 | default: DEFAULT_APP_SETTINGS.proxyFeatureEnabled, |
374 | type: 'checkbox', | ||
361 | }, | 375 | }, |
362 | host: { | 376 | host: { |
363 | label: intl.formatMessage(messages.proxyHost), | 377 | label: intl.formatMessage(messages.proxyHost), |
@@ -382,11 +396,10 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
382 | }, | 396 | }, |
383 | }, | 397 | }, |
384 | }, | 398 | }, |
385 | }); | 399 | }; |
386 | } | 400 | } |
387 | 401 | ||
388 | // @ts-ignore: Remove this ignore once mobx-react-form v4 with typescript | 402 | // @ts-ignore: Remove this ignore once mobx-react-form v4 with typescript |
389 | // support has been released. | ||
390 | return new Form(config); | 403 | return new Form(config); |
391 | } | 404 | } |
392 | 405 | ||
@@ -417,7 +430,11 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
417 | } | 430 | } |
418 | 431 | ||
419 | render(): ReactElement { | 432 | render(): ReactElement { |
420 | const { recipes, services, user } = this.props.stores; | 433 | const { |
434 | recipes, | ||
435 | services, | ||
436 | // user | ||
437 | } = this.props.stores; | ||
421 | const { action } = this.props.params; | 438 | const { action } = this.props.params; |
422 | 439 | ||
423 | let recipe: null | IRecipe = null; | 440 | let recipe: null | IRecipe = null; |
@@ -455,9 +472,9 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
455 | action={action} | 472 | action={action} |
456 | recipe={recipe} | 473 | recipe={recipe} |
457 | service={service} | 474 | service={service} |
458 | user={user.data} | 475 | // user={user.data} // TODO - [TS DEBT] Need to check why its passed as its not used inside EditServiceForm |
459 | form={form} | 476 | form={form} |
460 | status={services.actionStatus} | 477 | // status={services.actionStatus} // TODO - [TS DEBT] Need to check why its passed as its not used inside EditServiceForm |
461 | isSaving={ | 478 | isSaving={ |
462 | services.updateServiceRequest.isExecuting || | 479 | services.updateServiceRequest.isExecuting || |
463 | services.createServiceRequest.isExecuting | 480 | services.createServiceRequest.isExecuting |
@@ -473,8 +490,4 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
473 | } | 490 | } |
474 | } | 491 | } |
475 | 492 | ||
476 | export default withParams( | 493 | export default withParams(injectIntl(EditServiceScreen)); |
477 | injectIntl<'intl', EditServicesScreenProps>( | ||
478 | inject('stores', 'actions')(observer(EditServiceScreen)), | ||
479 | ), | ||
480 | ); | ||