diff options
Diffstat (limited to 'src/components/settings/services/ServicesDashboard.js')
-rw-r--r-- | src/components/settings/services/ServicesDashboard.js | 56 |
1 files changed, 30 insertions, 26 deletions
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js index 11d3eaa79..bb52db97f 100644 --- a/src/components/settings/services/ServicesDashboard.js +++ b/src/components/settings/services/ServicesDashboard.js | |||
@@ -2,7 +2,7 @@ import React, { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { Link } from 'react-router'; | 4 | import { Link } from 'react-router'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | 6 | ||
7 | import SearchInput from '../../ui/SearchInput'; | 7 | import SearchInput from '../../ui/SearchInput'; |
8 | import Infobox from '../../ui/Infobox'; | 8 | import Infobox from '../../ui/Infobox'; |
@@ -14,43 +14,45 @@ import Appear from '../../ui/effects/Appear'; | |||
14 | const messages = defineMessages({ | 14 | const messages = defineMessages({ |
15 | headline: { | 15 | headline: { |
16 | id: 'settings.services.headline', | 16 | id: 'settings.services.headline', |
17 | defaultMessage: '!!!Your services', | 17 | defaultMessage: 'Your services', |
18 | }, | 18 | }, |
19 | searchService: { | 19 | searchService: { |
20 | id: 'settings.searchService', | 20 | id: 'settings.searchService', |
21 | defaultMessage: '!!!Search service', | 21 | defaultMessage: 'Search service', |
22 | }, | 22 | }, |
23 | noServicesAdded: { | 23 | noServicesAdded: { |
24 | id: 'settings.services.noServicesAdded', | 24 | id: 'settings.services.noServicesAdded', |
25 | defaultMessage: '!!!Start by adding a service.', | 25 | defaultMessage: 'Start by adding a service.', |
26 | }, | 26 | }, |
27 | noServiceFound: { | 27 | noServiceFound: { |
28 | id: 'settings.recipes.nothingFound', | 28 | id: 'settings.services.nothingFound', |
29 | defaultMessage: '!!!Sorry, but no service matched your search term. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.', | 29 | defaultMessage: |
30 | 'Sorry, but no service matched your search term - but you can still probably add it using the "Custom Website" option. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.', | ||
30 | }, | 31 | }, |
31 | discoverServices: { | 32 | discoverServices: { |
32 | id: 'settings.services.discoverServices', | 33 | id: 'settings.services.discoverServices', |
33 | defaultMessage: '!!!Discover services', | 34 | defaultMessage: 'Discover services', |
34 | }, | 35 | }, |
35 | servicesRequestFailed: { | 36 | servicesRequestFailed: { |
36 | id: 'settings.services.servicesRequestFailed', | 37 | id: 'settings.services.servicesRequestFailed', |
37 | defaultMessage: '!!!Could not load your services', | 38 | defaultMessage: 'Could not load your services', |
38 | }, | 39 | }, |
39 | tryReloadServices: { | 40 | tryReloadServices: { |
40 | id: 'settings.account.tryReloadServices', | 41 | id: 'settings.account.tryReloadServices', |
41 | defaultMessage: '!!!Try again', | 42 | defaultMessage: 'Try again', |
42 | }, | 43 | }, |
43 | updatedInfo: { | 44 | updatedInfo: { |
44 | id: 'settings.services.updatedInfo', | 45 | id: 'settings.services.updatedInfo', |
45 | defaultMessage: '!!!Your changes have been saved', | 46 | defaultMessage: 'Your changes have been saved', |
46 | }, | 47 | }, |
47 | deletedInfo: { | 48 | deletedInfo: { |
48 | id: 'settings.services.deletedInfo', | 49 | id: 'settings.services.deletedInfo', |
49 | defaultMessage: '!!!Service has been deleted', | 50 | defaultMessage: 'Service has been deleted', |
50 | }, | 51 | }, |
51 | }); | 52 | }); |
52 | 53 | ||
53 | export default @observer class ServicesDashboard extends Component { | 54 | @observer |
55 | class ServicesDashboard extends Component { | ||
54 | static propTypes = { | 56 | static propTypes = { |
55 | services: MobxPropTypes.arrayOrObservableArray.isRequired, | 57 | services: MobxPropTypes.arrayOrObservableArray.isRequired, |
56 | isLoading: PropTypes.bool.isRequired, | 58 | isLoading: PropTypes.bool.isRequired, |
@@ -68,10 +70,6 @@ export default @observer class ServicesDashboard extends Component { | |||
68 | searchNeedle: '', | 70 | searchNeedle: '', |
69 | }; | 71 | }; |
70 | 72 | ||
71 | static contextTypes = { | ||
72 | intl: intlShape, | ||
73 | }; | ||
74 | |||
75 | render() { | 73 | render() { |
76 | const { | 74 | const { |
77 | services, | 75 | services, |
@@ -85,7 +83,7 @@ export default @observer class ServicesDashboard extends Component { | |||
85 | status, | 83 | status, |
86 | searchNeedle, | 84 | searchNeedle, |
87 | } = this.props; | 85 | } = this.props; |
88 | const { intl } = this.context; | 86 | const { intl } = this.props; |
89 | 87 | ||
90 | return ( | 88 | return ( |
91 | <div className="settings__main"> | 89 | <div className="settings__main"> |
@@ -93,10 +91,10 @@ export default @observer class ServicesDashboard extends Component { | |||
93 | <h1>{intl.formatMessage(messages.headline)}</h1> | 91 | <h1>{intl.formatMessage(messages.headline)}</h1> |
94 | </div> | 92 | </div> |
95 | <div className="settings__body"> | 93 | <div className="settings__body"> |
96 | {(services.length !== 0 || searchNeedle) && !isLoading && ( | 94 | {(services.length > 0 || searchNeedle) && !isLoading && ( |
97 | <SearchInput | 95 | <SearchInput |
98 | placeholder={intl.formatMessage(messages.searchService)} | 96 | placeholder={intl.formatMessage(messages.searchService)} |
99 | onChange={(needle) => filterServices({ needle })} | 97 | onChange={needle => filterServices({ needle })} |
100 | onReset={() => resetFilter()} | 98 | onReset={() => resetFilter()} |
101 | autoFocus | 99 | autoFocus |
102 | /> | 100 | /> |
@@ -145,7 +143,9 @@ export default @observer class ServicesDashboard extends Component { | |||
145 | </span> | 143 | </span> |
146 | {intl.formatMessage(messages.noServicesAdded)} | 144 | {intl.formatMessage(messages.noServicesAdded)} |
147 | </p> | 145 | </p> |
148 | <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link> | 146 | <Link to="/settings/recipes" className="button"> |
147 | {intl.formatMessage(messages.discoverServices)} | ||
148 | </Link> | ||
149 | </div> | 149 | </div> |
150 | )} | 150 | )} |
151 | {!isLoading && services.length === 0 && searchNeedle && ( | 151 | {!isLoading && services.length === 0 && searchNeedle && ( |
@@ -163,12 +163,16 @@ export default @observer class ServicesDashboard extends Component { | |||
163 | ) : ( | 163 | ) : ( |
164 | <table className="service-table"> | 164 | <table className="service-table"> |
165 | <tbody> | 165 | <tbody> |
166 | {services.map((service) => ( | 166 | {services.map(service => ( |
167 | <ServiceItem | 167 | <ServiceItem |
168 | key={service.id} | 168 | key={service.id} |
169 | service={service} | 169 | service={service} |
170 | toggleAction={() => toggleService({ serviceId: service.id })} | 170 | toggleAction={() => |
171 | goToServiceForm={() => goTo(`/settings/services/edit/${service.id}`)} | 171 | toggleService({ serviceId: service.id }) |
172 | } | ||
173 | goToServiceForm={() => | ||
174 | goTo(`/settings/services/edit/${service.id}`) | ||
175 | } | ||
172 | /> | 176 | /> |
173 | ))} | 177 | ))} |
174 | </tbody> | 178 | </tbody> |
@@ -176,12 +180,12 @@ export default @observer class ServicesDashboard extends Component { | |||
176 | )} | 180 | )} |
177 | 181 | ||
178 | <FAB> | 182 | <FAB> |
179 | <Link to="/settings/recipes"> | 183 | <Link to="/settings/recipes">+</Link> |
180 | + | ||
181 | </Link> | ||
182 | </FAB> | 184 | </FAB> |
183 | </div> | 185 | </div> |
184 | </div> | 186 | </div> |
185 | ); | 187 | ); |
186 | } | 188 | } |
187 | } | 189 | } |
190 | |||
191 | export default injectIntl(ServicesDashboard); | ||