diff options
Diffstat (limited to 'src/components/settings')
-rw-r--r-- | src/components/settings/services/ServiceError.tsx (renamed from src/components/settings/services/ServiceError.js) | 14 | ||||
-rw-r--r-- | src/components/settings/services/ServiceItem.tsx (renamed from src/components/settings/services/ServiceItem.js) | 53 | ||||
-rw-r--r-- | src/components/settings/services/ServicesDashboard.tsx (renamed from src/components/settings/services/ServicesDashboard.js) | 66 |
3 files changed, 76 insertions, 57 deletions
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.tsx index fdcdb54c9..87efdeb96 100644 --- a/src/components/settings/services/ServiceError.js +++ b/src/components/settings/services/ServiceError.tsx | |||
@@ -1,8 +1,7 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import { Link } from 'react-router-dom'; | 3 | import { Link } from 'react-router-dom'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
5 | |||
6 | import Infobox from '../../ui/Infobox'; | 5 | import Infobox from '../../ui/Infobox'; |
7 | import Button from '../../ui/button'; | 6 | import Button from '../../ui/button'; |
8 | 7 | ||
@@ -25,8 +24,11 @@ const messages = defineMessages({ | |||
25 | }, | 24 | }, |
26 | }); | 25 | }); |
27 | 26 | ||
28 | class ServiceError extends Component { | 27 | interface IProps extends WrappedComponentProps {} |
29 | render() { | 28 | |
29 | @observer | ||
30 | class ServiceError extends Component<IProps> { | ||
31 | render(): ReactElement { | ||
30 | const { intl } = this.props; | 32 | const { intl } = this.props; |
31 | 33 | ||
32 | return ( | 34 | return ( |
@@ -59,4 +61,4 @@ class ServiceError extends Component { | |||
59 | } | 61 | } |
60 | } | 62 | } |
61 | 63 | ||
62 | export default injectIntl(observer(ServiceError)); | 64 | export default injectIntl(ServiceError); |
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.tsx index c666b7dd2..fd961a0a8 100644 --- a/src/components/settings/services/ServiceItem.js +++ b/src/components/settings/services/ServiceItem.tsx | |||
@@ -1,10 +1,8 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
3 | import { defineMessages, injectIntl } from 'react-intl'; | ||
4 | import ReactTooltip from 'react-tooltip'; | 3 | import ReactTooltip from 'react-tooltip'; |
5 | import { observer } from 'mobx-react'; | 4 | import { observer } from 'mobx-react'; |
6 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
7 | |||
8 | import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js'; | 6 | import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js'; |
9 | import ServiceModel from '../../../models/Service'; | 7 | import ServiceModel from '../../../models/Service'; |
10 | import Icon from '../../ui/icon'; | 8 | import Icon from '../../ui/icon'; |
@@ -24,16 +22,17 @@ const messages = defineMessages({ | |||
24 | }, | 22 | }, |
25 | }); | 23 | }); |
26 | 24 | ||
27 | class ServiceItem extends Component { | 25 | interface IProps extends WrappedComponentProps { |
28 | static propTypes = { | 26 | service: ServiceModel; |
29 | service: PropTypes.instanceOf(ServiceModel).isRequired, | 27 | goToServiceForm: () => void; |
30 | goToServiceForm: PropTypes.func.isRequired, | 28 | } |
31 | }; | ||
32 | 29 | ||
33 | render() { | 30 | @observer |
31 | class ServiceItem extends Component<IProps> { | ||
32 | render(): ReactElement { | ||
34 | const { | 33 | const { |
35 | service, | 34 | service, |
36 | // toggleAction, | 35 | // toggleAction, // TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] check it later |
37 | goToServiceForm, | 36 | goToServiceForm, |
38 | } = this.props; | 37 | } = this.props; |
39 | const { intl } = this.props; | 38 | const { intl } = this.props; |
@@ -45,7 +44,11 @@ class ServiceItem extends Component { | |||
45 | 'service-table__row--disabled': !service.isEnabled, | 44 | 'service-table__row--disabled': !service.isEnabled, |
46 | })} | 45 | })} |
47 | > | 46 | > |
48 | <td className="service-table__column-icon" onClick={goToServiceForm}> | 47 | <td |
48 | className="service-table__column-icon" | ||
49 | onClick={goToServiceForm} | ||
50 | role="gridcell" | ||
51 | > | ||
49 | <img | 52 | <img |
50 | src={service.icon} | 53 | src={service.icon} |
51 | className={classnames({ | 54 | className={classnames({ |
@@ -55,10 +58,18 @@ class ServiceItem extends Component { | |||
55 | alt="" | 58 | alt="" |
56 | /> | 59 | /> |
57 | </td> | 60 | </td> |
58 | <td className="service-table__column-name" onClick={goToServiceForm}> | 61 | <td |
62 | className="service-table__column-name" | ||
63 | onClick={goToServiceForm} | ||
64 | role="gridcell" | ||
65 | > | ||
59 | {service.name !== '' ? service.name : service.recipe.name} | 66 | {service.name !== '' ? service.name : service.recipe.name} |
60 | </td> | 67 | </td> |
61 | <td className="service-table__column-info" onClick={goToServiceForm}> | 68 | <td |
69 | className="service-table__column-info" | ||
70 | onClick={goToServiceForm} | ||
71 | role="gridcell" | ||
72 | > | ||
62 | {service.isMuted && ( | 73 | {service.isMuted && ( |
63 | <Icon | 74 | <Icon |
64 | icon={mdiBellOff} | 75 | icon={mdiBellOff} |
@@ -66,7 +77,11 @@ class ServiceItem extends Component { | |||
66 | /> | 77 | /> |
67 | )} | 78 | )} |
68 | </td> | 79 | </td> |
69 | <td className="service-table__column-info" onClick={goToServiceForm}> | 80 | <td |
81 | className="service-table__column-info" | ||
82 | onClick={goToServiceForm} | ||
83 | role="gridcell" | ||
84 | > | ||
70 | {!service.isEnabled && ( | 85 | {!service.isEnabled && ( |
71 | <Icon | 86 | <Icon |
72 | icon={mdiPower} | 87 | icon={mdiPower} |
@@ -74,7 +89,11 @@ class ServiceItem extends Component { | |||
74 | /> | 89 | /> |
75 | )} | 90 | )} |
76 | </td> | 91 | </td> |
77 | <td className="service-table__column-info" onClick={goToServiceForm}> | 92 | <td |
93 | className="service-table__column-info" | ||
94 | onClick={goToServiceForm} | ||
95 | role="gridcell" | ||
96 | > | ||
78 | {!service.isNotificationEnabled && ( | 97 | {!service.isNotificationEnabled && ( |
79 | <Icon | 98 | <Icon |
80 | icon={mdiMessageBulletedOff} | 99 | icon={mdiMessageBulletedOff} |
@@ -90,4 +109,4 @@ class ServiceItem extends Component { | |||
90 | } | 109 | } |
91 | } | 110 | } |
92 | 111 | ||
93 | export default injectIntl(observer(ServiceItem)); | 112 | export default injectIntl(ServiceItem); |
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.tsx index ac1c30ecb..36057902f 100644 --- a/src/components/settings/services/ServicesDashboard.js +++ b/src/components/settings/services/ServicesDashboard.tsx | |||
@@ -1,9 +1,8 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import { observer } from 'mobx-react'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | ||
4 | import { Link } from 'react-router-dom'; | 3 | import { Link } from 'react-router-dom'; |
5 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
6 | 5 | import { To } from 'history'; | |
7 | import SearchInput from '../../ui/SearchInput'; | 6 | import SearchInput from '../../ui/SearchInput'; |
8 | import Infobox from '../../ui/Infobox'; | 7 | import Infobox from '../../ui/Infobox'; |
9 | import Loader from '../../ui/Loader'; | 8 | import Loader from '../../ui/Loader'; |
@@ -11,6 +10,7 @@ import FAB from '../../ui/FAB'; | |||
11 | import ServiceItem from './ServiceItem'; | 10 | import ServiceItem from './ServiceItem'; |
12 | import Appear from '../../ui/effects/Appear'; | 11 | import Appear from '../../ui/effects/Appear'; |
13 | import { H1 } from '../../ui/headline'; | 12 | import { H1 } from '../../ui/headline'; |
13 | import Service from '../../../models/Service'; | ||
14 | 14 | ||
15 | const messages = defineMessages({ | 15 | const messages = defineMessages({ |
16 | headline: { | 16 | headline: { |
@@ -51,38 +51,35 @@ const messages = defineMessages({ | |||
51 | }, | 51 | }, |
52 | }); | 52 | }); |
53 | 53 | ||
54 | class ServicesDashboard extends Component { | 54 | interface IProps extends WrappedComponentProps { |
55 | static propTypes = { | 55 | services: Service[]; |
56 | services: MobxPropTypes.arrayOrObservableArray.isRequired, | 56 | isLoading: boolean; |
57 | isLoading: PropTypes.bool.isRequired, | 57 | // toggleService: any; // TODO - - [TECH DEBT] check it later |
58 | toggleService: PropTypes.func.isRequired, | 58 | filterServices: any; |
59 | filterServices: PropTypes.func.isRequired, | 59 | resetFilter: () => void; |
60 | resetFilter: PropTypes.func.isRequired, | 60 | goTo: (to: To, state?: any) => void; |
61 | goTo: PropTypes.func.isRequired, | 61 | servicesRequestFailed: boolean; |
62 | servicesRequestFailed: PropTypes.bool.isRequired, | 62 | retryServicesRequest: () => void; |
63 | retryServicesRequest: PropTypes.func.isRequired, | 63 | status: any; |
64 | status: MobxPropTypes.arrayOrObservableArray.isRequired, | 64 | searchNeedle: string | null; |
65 | searchNeedle: PropTypes.string, | 65 | } |
66 | }; | ||
67 | |||
68 | static defaultProps = { | ||
69 | searchNeedle: '', | ||
70 | }; | ||
71 | 66 | ||
72 | render() { | 67 | @observer |
68 | class ServicesDashboard extends Component<IProps> { | ||
69 | render(): ReactElement { | ||
73 | const { | 70 | const { |
74 | services, | 71 | services, |
75 | isLoading, | 72 | isLoading, |
76 | toggleService, | 73 | // toggleService, // TODO - - [TECH DEBT] check it later |
77 | filterServices, | 74 | filterServices, |
78 | resetFilter, | 75 | resetFilter, |
79 | goTo, | 76 | goTo, |
80 | servicesRequestFailed, | 77 | servicesRequestFailed, |
81 | retryServicesRequest, | 78 | retryServicesRequest, |
82 | status, | 79 | status, |
83 | searchNeedle, | 80 | searchNeedle = '', |
81 | intl, | ||
84 | } = this.props; | 82 | } = this.props; |
85 | const { intl } = this.props; | ||
86 | 83 | ||
87 | return ( | 84 | return ( |
88 | <div className="settings__main"> | 85 | <div className="settings__main"> |
@@ -115,7 +112,7 @@ class ServicesDashboard extends Component { | |||
115 | <Infobox | 112 | <Infobox |
116 | type="success" | 113 | type="success" |
117 | icon="checkbox-marked-circle-outline" | 114 | icon="checkbox-marked-circle-outline" |
118 | dismissable | 115 | dismissible |
119 | > | 116 | > |
120 | {intl.formatMessage(messages.updatedInfo)} | 117 | {intl.formatMessage(messages.updatedInfo)} |
121 | </Infobox> | 118 | </Infobox> |
@@ -127,7 +124,7 @@ class ServicesDashboard extends Component { | |||
127 | <Infobox | 124 | <Infobox |
128 | type="success" | 125 | type="success" |
129 | icon="checkbox-marked-circle-outline" | 126 | icon="checkbox-marked-circle-outline" |
130 | dismissable | 127 | dismissible |
131 | > | 128 | > |
132 | {intl.formatMessage(messages.deletedInfo)} | 129 | {intl.formatMessage(messages.deletedInfo)} |
133 | </Infobox> | 130 | </Infobox> |
@@ -160,15 +157,16 @@ class ServicesDashboard extends Component { | |||
160 | {isLoading ? ( | 157 | {isLoading ? ( |
161 | <Loader /> | 158 | <Loader /> |
162 | ) : ( | 159 | ) : ( |
163 | <table className="service-table"> | 160 | <table className="service-table" role="grid"> |
164 | <tbody> | 161 | <tbody> |
165 | {services.map(service => ( | 162 | {services.map(service => ( |
166 | <ServiceItem | 163 | <ServiceItem |
167 | key={service.id} | 164 | key={service.id} |
168 | service={service} | 165 | service={service} |
169 | toggleAction={() => | 166 | // TODO - - [TECH DEBT][PROPS NOT USED IN COMPONENT] check it later |
170 | toggleService({ serviceId: service.id }) | 167 | // toggleAction={() => |
171 | } | 168 | // toggleService({ serviceId: service.id }) |
169 | // } | ||
172 | goToServiceForm={() => | 170 | goToServiceForm={() => |
173 | goTo(`/settings/services/edit/${service.id}`) | 171 | goTo(`/settings/services/edit/${service.id}`) |
174 | } | 172 | } |
@@ -178,7 +176,7 @@ class ServicesDashboard extends Component { | |||
178 | </table> | 176 | </table> |
179 | )} | 177 | )} |
180 | 178 | ||
181 | <FAB> | 179 | <FAB className="FAB-class"> |
182 | <Link to="/settings/recipes">+</Link> | 180 | <Link to="/settings/recipes">+</Link> |
183 | </FAB> | 181 | </FAB> |
184 | </div> | 182 | </div> |
@@ -187,4 +185,4 @@ class ServicesDashboard extends Component { | |||
187 | } | 185 | } |
188 | } | 186 | } |
189 | 187 | ||
190 | export default injectIntl(observer(ServicesDashboard)); | 188 | export default injectIntl(ServicesDashboard); |