diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-19 15:21:09 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-19 09:51:09 +0000 |
commit | a051331680b21f20201a47601d69505a4cfa9e40 (patch) | |
tree | f98dd4bc668c9814d58c0e49170aeeb19c2fe1de /src/components/settings/services/ServicesDashboard.js | |
parent | 6.2.1-nightly.46 [skip ci] (diff) | |
download | ferdium-app-a051331680b21f20201a47601d69505a4cfa9e40.tar.gz ferdium-app-a051331680b21f20201a47601d69505a4cfa9e40.tar.zst ferdium-app-a051331680b21f20201a47601d69505a4cfa9e40.zip |
Transform service components to ts (#778)
Diffstat (limited to 'src/components/settings/services/ServicesDashboard.js')
-rw-r--r-- | src/components/settings/services/ServicesDashboard.js | 190 |
1 files changed, 0 insertions, 190 deletions
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js deleted file mode 100644 index ac1c30ecb..000000000 --- a/src/components/settings/services/ServicesDashboard.js +++ /dev/null | |||
@@ -1,190 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | ||
4 | import { Link } from 'react-router-dom'; | ||
5 | import { defineMessages, injectIntl } from 'react-intl'; | ||
6 | |||
7 | import SearchInput from '../../ui/SearchInput'; | ||
8 | import Infobox from '../../ui/Infobox'; | ||
9 | import Loader from '../../ui/Loader'; | ||
10 | import FAB from '../../ui/FAB'; | ||
11 | import ServiceItem from './ServiceItem'; | ||
12 | import Appear from '../../ui/effects/Appear'; | ||
13 | import { H1 } from '../../ui/headline'; | ||
14 | |||
15 | const messages = defineMessages({ | ||
16 | headline: { | ||
17 | id: 'settings.services.headline', | ||
18 | defaultMessage: 'Your services', | ||
19 | }, | ||
20 | searchService: { | ||
21 | id: 'settings.searchService', | ||
22 | defaultMessage: 'Search service', | ||
23 | }, | ||
24 | noServicesAdded: { | ||
25 | id: 'settings.services.noServicesAdded', | ||
26 | defaultMessage: 'Start by adding a service.', | ||
27 | }, | ||
28 | noServiceFound: { | ||
29 | id: 'settings.services.nothingFound', | ||
30 | defaultMessage: 'Sorry, but no service matched your search term.', | ||
31 | }, | ||
32 | discoverServices: { | ||
33 | id: 'settings.services.discoverServices', | ||
34 | defaultMessage: 'Discover services', | ||
35 | }, | ||
36 | servicesRequestFailed: { | ||
37 | id: 'settings.services.servicesRequestFailed', | ||
38 | defaultMessage: 'Could not load your services', | ||
39 | }, | ||
40 | tryReloadServices: { | ||
41 | id: 'settings.account.tryReloadServices', | ||
42 | defaultMessage: 'Try again', | ||
43 | }, | ||
44 | updatedInfo: { | ||
45 | id: 'settings.services.updatedInfo', | ||
46 | defaultMessage: 'Your changes have been saved', | ||
47 | }, | ||
48 | deletedInfo: { | ||
49 | id: 'settings.services.deletedInfo', | ||
50 | defaultMessage: 'Service has been deleted', | ||
51 | }, | ||
52 | }); | ||
53 | |||
54 | class ServicesDashboard extends Component { | ||
55 | static propTypes = { | ||
56 | services: MobxPropTypes.arrayOrObservableArray.isRequired, | ||
57 | isLoading: PropTypes.bool.isRequired, | ||
58 | toggleService: PropTypes.func.isRequired, | ||
59 | filterServices: PropTypes.func.isRequired, | ||
60 | resetFilter: PropTypes.func.isRequired, | ||
61 | goTo: PropTypes.func.isRequired, | ||
62 | servicesRequestFailed: PropTypes.bool.isRequired, | ||
63 | retryServicesRequest: PropTypes.func.isRequired, | ||
64 | status: MobxPropTypes.arrayOrObservableArray.isRequired, | ||
65 | searchNeedle: PropTypes.string, | ||
66 | }; | ||
67 | |||
68 | static defaultProps = { | ||
69 | searchNeedle: '', | ||
70 | }; | ||
71 | |||
72 | render() { | ||
73 | const { | ||
74 | services, | ||
75 | isLoading, | ||
76 | toggleService, | ||
77 | filterServices, | ||
78 | resetFilter, | ||
79 | goTo, | ||
80 | servicesRequestFailed, | ||
81 | retryServicesRequest, | ||
82 | status, | ||
83 | searchNeedle, | ||
84 | } = this.props; | ||
85 | const { intl } = this.props; | ||
86 | |||
87 | return ( | ||
88 | <div className="settings__main"> | ||
89 | <div className="settings__header"> | ||
90 | <H1>{intl.formatMessage(messages.headline)}</H1> | ||
91 | </div> | ||
92 | <div className="settings__body"> | ||
93 | {(services.length > 0 || searchNeedle) && !isLoading && ( | ||
94 | <SearchInput | ||
95 | placeholder={intl.formatMessage(messages.searchService)} | ||
96 | onChange={needle => filterServices({ needle })} | ||
97 | onReset={() => resetFilter()} | ||
98 | autoFocus | ||
99 | /> | ||
100 | )} | ||
101 | {!isLoading && servicesRequestFailed && ( | ||
102 | <Infobox | ||
103 | icon="alert" | ||
104 | type="danger" | ||
105 | ctaLabel={intl.formatMessage(messages.tryReloadServices)} | ||
106 | ctaLoading={isLoading} | ||
107 | ctaOnClick={retryServicesRequest} | ||
108 | > | ||
109 | {intl.formatMessage(messages.servicesRequestFailed)} | ||
110 | </Infobox> | ||
111 | )} | ||
112 | |||
113 | {status.length > 0 && status.includes('updated') && ( | ||
114 | <Appear> | ||
115 | <Infobox | ||
116 | type="success" | ||
117 | icon="checkbox-marked-circle-outline" | ||
118 | dismissable | ||
119 | > | ||
120 | {intl.formatMessage(messages.updatedInfo)} | ||
121 | </Infobox> | ||
122 | </Appear> | ||
123 | )} | ||
124 | |||
125 | {status.length > 0 && status.includes('service-deleted') && ( | ||
126 | <Appear> | ||
127 | <Infobox | ||
128 | type="success" | ||
129 | icon="checkbox-marked-circle-outline" | ||
130 | dismissable | ||
131 | > | ||
132 | {intl.formatMessage(messages.deletedInfo)} | ||
133 | </Infobox> | ||
134 | </Appear> | ||
135 | )} | ||
136 | |||
137 | {!isLoading && services.length === 0 && !searchNeedle && ( | ||
138 | <div className="align-middle settings__empty-state"> | ||
139 | <p className="settings__empty-text"> | ||
140 | <span className="emoji"> | ||
141 | <img src="./assets/images/emoji/star.png" alt="" /> | ||
142 | </span> | ||
143 | {intl.formatMessage(messages.noServicesAdded)} | ||
144 | </p> | ||
145 | <Link to="/settings/recipes" className="button"> | ||
146 | {intl.formatMessage(messages.discoverServices)} | ||
147 | </Link> | ||
148 | </div> | ||
149 | )} | ||
150 | {!isLoading && services.length === 0 && searchNeedle && ( | ||
151 | <div className="align-middle settings__empty-state"> | ||
152 | <p className="settings__empty-text"> | ||
153 | <span className="emoji"> | ||
154 | <img src="./assets/images/emoji/dontknow.png" alt="" /> | ||
155 | </span> | ||
156 | {intl.formatMessage(messages.noServiceFound)} | ||
157 | </p> | ||
158 | </div> | ||
159 | )} | ||
160 | {isLoading ? ( | ||
161 | <Loader /> | ||
162 | ) : ( | ||
163 | <table className="service-table"> | ||
164 | <tbody> | ||
165 | {services.map(service => ( | ||
166 | <ServiceItem | ||
167 | key={service.id} | ||
168 | service={service} | ||
169 | toggleAction={() => | ||
170 | toggleService({ serviceId: service.id }) | ||
171 | } | ||
172 | goToServiceForm={() => | ||
173 | goTo(`/settings/services/edit/${service.id}`) | ||
174 | } | ||
175 | /> | ||
176 | ))} | ||
177 | </tbody> | ||
178 | </table> | ||
179 | )} | ||
180 | |||
181 | <FAB> | ||
182 | <Link to="/settings/recipes">+</Link> | ||
183 | </FAB> | ||
184 | </div> | ||
185 | </div> | ||
186 | ); | ||
187 | } | ||
188 | } | ||
189 | |||
190 | export default injectIntl(observer(ServicesDashboard)); | ||