aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/settings/services/ServicesDashboard.js
diff options
context:
space:
mode:
authorLibravatar muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com>2022-11-19 15:21:09 +0530
committerLibravatar GitHub <noreply@github.com>2022-11-19 09:51:09 +0000
commita051331680b21f20201a47601d69505a4cfa9e40 (patch)
treef98dd4bc668c9814d58c0e49170aeeb19c2fe1de /src/components/settings/services/ServicesDashboard.js
parent6.2.1-nightly.46 [skip ci] (diff)
downloadferdium-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.js190
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 @@
1import { Component } from 'react';
2import PropTypes from 'prop-types';
3import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
4import { Link } from 'react-router-dom';
5import { defineMessages, injectIntl } from 'react-intl';
6
7import SearchInput from '../../ui/SearchInput';
8import Infobox from '../../ui/Infobox';
9import Loader from '../../ui/Loader';
10import FAB from '../../ui/FAB';
11import ServiceItem from './ServiceItem';
12import Appear from '../../ui/effects/Appear';
13import { H1 } from '../../ui/headline';
14
15const 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
54class 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
190export default injectIntl(observer(ServicesDashboard));
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-08-02 09:49:48 +0000