diff options
Diffstat (limited to 'src/components/settings/recipes/RecipesDashboard.js')
-rw-r--r-- | src/components/settings/recipes/RecipesDashboard.js | 83 |
1 files changed, 49 insertions, 34 deletions
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js index 44ff2d0d7..e620abf93 100644 --- a/src/components/settings/recipes/RecipesDashboard.js +++ b/src/components/settings/recipes/RecipesDashboard.js | |||
@@ -1,7 +1,7 @@ | |||
1 | import React, { Component } from 'react'; | 1 | 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 { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | import { Link } from 'react-router'; | 5 | import { Link } from 'react-router'; |
6 | 6 | ||
7 | import { Button, Input } from '@meetfranz/forms'; | 7 | import { Button, Input } from '@meetfranz/forms'; |
@@ -18,55 +18,56 @@ import RecipePreview from '../../../models/RecipePreview'; | |||
18 | const messages = defineMessages({ | 18 | const messages = defineMessages({ |
19 | headline: { | 19 | headline: { |
20 | id: 'settings.recipes.headline', | 20 | id: 'settings.recipes.headline', |
21 | defaultMessage: '!!!Available Services', | 21 | defaultMessage: 'Available Services', |
22 | }, | 22 | }, |
23 | searchService: { | 23 | searchService: { |
24 | id: 'settings.searchService', | 24 | id: 'settings.searchService', |
25 | defaultMessage: '!!!Search service', | 25 | defaultMessage: 'Search service', |
26 | }, | 26 | }, |
27 | allRecipes: { | 27 | allRecipes: { |
28 | id: 'settings.recipes.all', | 28 | id: 'settings.recipes.all', |
29 | defaultMessage: '!!!All services', | 29 | defaultMessage: 'All services', |
30 | }, | 30 | }, |
31 | customRecipes: { | 31 | customRecipes: { |
32 | id: 'settings.recipes.custom', | 32 | id: 'settings.recipes.custom', |
33 | defaultMessage: '!!!Custom Services', | 33 | defaultMessage: 'Custom Services', |
34 | }, | 34 | }, |
35 | nothingFound: { | 35 | nothingFound: { |
36 | id: 'settings.recipes.nothingFound', | 36 | id: 'settings.recipes.nothingFound', |
37 | defaultMessage: '!!!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.', | 37 | defaultMessage: |
38 | '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.', | ||
38 | }, | 39 | }, |
39 | servicesSuccessfulAddedInfo: { | 40 | servicesSuccessfulAddedInfo: { |
40 | id: 'settings.recipes.servicesSuccessfulAddedInfo', | 41 | id: 'settings.recipes.servicesSuccessfulAddedInfo', |
41 | defaultMessage: '!!!Service successfully added', | 42 | defaultMessage: 'Service successfully added', |
42 | }, | 43 | }, |
43 | missingService: { | 44 | missingService: { |
44 | id: 'settings.recipes.missingService', | 45 | id: 'settings.recipes.missingService', |
45 | defaultMessage: '!!!Missing a service?', | 46 | defaultMessage: 'Missing a service?', |
46 | }, | 47 | }, |
47 | customRecipeIntro: { | 48 | customRecipeIntro: { |
48 | id: 'settings.recipes.customService.intro', | 49 | id: 'settings.recipes.customService.intro', |
49 | defaultMessage: '!!!To add a custom service, copy the recipe folder into:', | 50 | defaultMessage: 'To add a custom service, copy the recipe folder into:', |
50 | }, | 51 | }, |
51 | openFolder: { | 52 | openFolder: { |
52 | id: 'settings.recipes.customService.openFolder', | 53 | id: 'settings.recipes.customService.openFolder', |
53 | defaultMessage: '!!!Open directory', | 54 | defaultMessage: 'Open directory', |
54 | }, | 55 | }, |
55 | openDevDocs: { | 56 | openDevDocs: { |
56 | id: 'settings.recipes.customService.openDevDocs', | 57 | id: 'settings.recipes.customService.openDevDocs', |
57 | defaultMessage: '!!!Developer Documentation', | 58 | defaultMessage: 'Developer Documentation', |
58 | }, | 59 | }, |
59 | headlineCustomRecipes: { | 60 | headlineCustomRecipes: { |
60 | id: 'settings.recipes.customService.headline.customRecipes', | 61 | id: 'settings.recipes.customService.headline.customRecipes', |
61 | defaultMessage: '!!!Custom 3rd Party Recipes', | 62 | defaultMessage: 'Custom 3rd Party Recipes', |
62 | }, | 63 | }, |
63 | headlineCommunityRecipes: { | 64 | headlineCommunityRecipes: { |
64 | id: 'settings.recipes.customService.headline.communityRecipes', | 65 | id: 'settings.recipes.customService.headline.communityRecipes', |
65 | defaultMessage: '!!!Community 3rd Party Recipes', | 66 | defaultMessage: 'Community 3rd Party Recipes', |
66 | }, | 67 | }, |
67 | headlineDevRecipes: { | 68 | headlineDevRecipes: { |
68 | id: 'settings.recipes.customService.headline.devRecipes', | 69 | id: 'settings.recipes.customService.headline.devRecipes', |
69 | defaultMessage: '!!!Your Development Service Recipes', | 70 | defaultMessage: 'Your Development Service Recipes', |
70 | }, | 71 | }, |
71 | }); | 72 | }); |
72 | 73 | ||
@@ -81,7 +82,8 @@ const styles = { | |||
81 | marginTop: 20, | 82 | marginTop: 20, |
82 | 83 | ||
83 | '& > div': { | 84 | '& > div': { |
84 | fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace', | 85 | fontFamily: |
86 | 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace', | ||
85 | }, | 87 | }, |
86 | }, | 88 | }, |
87 | actionContainer: { | 89 | actionContainer: { |
@@ -98,7 +100,9 @@ const styles = { | |||
98 | }, | 100 | }, |
99 | }; | 101 | }; |
100 | 102 | ||
101 | export default @injectSheet(styles) @observer class RecipesDashboard extends Component { | 103 | @injectSheet(styles) |
104 | @observer | ||
105 | class RecipesDashboard extends Component { | ||
102 | static propTypes = { | 106 | static propTypes = { |
103 | recipes: MobxPropTypes.arrayOrObservableArray.isRequired, | 107 | recipes: MobxPropTypes.arrayOrObservableArray.isRequired, |
104 | customWebsiteRecipe: PropTypes.instanceOf(RecipePreview).isRequired, | 108 | customWebsiteRecipe: PropTypes.instanceOf(RecipePreview).isRequired, |
@@ -118,10 +122,6 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
118 | static defaultProps = { | 122 | static defaultProps = { |
119 | searchNeedle: '', | 123 | searchNeedle: '', |
120 | recipeFilter: 'all', | 124 | recipeFilter: 'all', |
121 | } | ||
122 | |||
123 | static contextTypes = { | ||
124 | intl: intlShape, | ||
125 | }; | 125 | }; |
126 | 126 | ||
127 | render() { | 127 | render() { |
@@ -140,7 +140,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
140 | openDevDocs, | 140 | openDevDocs, |
141 | classes, | 141 | classes, |
142 | } = this.props; | 142 | } = this.props; |
143 | const { intl } = this.context; | 143 | const { intl } = this.props; |
144 | 144 | ||
145 | const communityRecipes = recipes.filter(r => !r.isDevRecipe); | 145 | const communityRecipes = recipes.filter(r => !r.isDevRecipe); |
146 | const devRecipes = recipes.filter(r => r.isDevRecipe); | 146 | const devRecipes = recipes.filter(r => r.isDevRecipe); |
@@ -188,9 +188,13 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
188 | > | 188 | > |
189 | {intl.formatMessage(messages.customRecipes)} | 189 | {intl.formatMessage(messages.customRecipes)} |
190 | </Link> | 190 | </Link> |
191 | <a href={FRANZ_SERVICE_REQUEST} target="_blank" className="link recipes__service-request" rel="noreferrer"> | 191 | <a |
192 | {intl.formatMessage(messages.missingService)} | 192 | href={FRANZ_SERVICE_REQUEST} |
193 | {' '} | 193 | target="_blank" |
194 | className="link recipes__service-request" | ||
195 | rel="noreferrer" | ||
196 | > | ||
197 | {intl.formatMessage(messages.missingService)}{' '} | ||
194 | <i className="mdi mdi-open-in-new" /> | 198 | <i className="mdi mdi-open-in-new" /> |
195 | </a> | 199 | </a> |
196 | </div> | 200 | </div> |
@@ -201,13 +205,9 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
201 | <> | 205 | <> |
202 | {recipeFilter === 'dev' && ( | 206 | {recipeFilter === 'dev' && ( |
203 | <> | 207 | <> |
204 | <H2> | 208 | <H2>{intl.formatMessage(messages.headlineCustomRecipes)}</H2> |
205 | {intl.formatMessage(messages.headlineCustomRecipes)} | ||
206 | </H2> | ||
207 | <div className={classes.devRecipeIntroContainer}> | 209 | <div className={classes.devRecipeIntroContainer}> |
208 | <p> | 210 | <p>{intl.formatMessage(messages.customRecipeIntro)}</p> |
209 | {intl.formatMessage(messages.customRecipeIntro)} | ||
210 | </p> | ||
211 | <Input | 211 | <Input |
212 | value={recipeDirectory} | 212 | value={recipeDirectory} |
213 | className={classes.path} | 213 | className={classes.path} |
@@ -238,12 +238,19 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
238 | <img src="./assets/images/emoji/dontknow.png" alt="" /> | 238 | <img src="./assets/images/emoji/dontknow.png" alt="" /> |
239 | </span> | 239 | </span> |
240 | 240 | ||
241 | <p className="settings__empty-state-text">{intl.formatMessage(messages.nothingFound)}</p> | 241 | <p className="settings__empty-state-text"> |
242 | {intl.formatMessage(messages.nothingFound)} | ||
243 | </p> | ||
242 | 244 | ||
243 | <RecipeItem | 245 | <RecipeItem |
244 | key={customWebsiteRecipe.id} | 246 | key={customWebsiteRecipe.id} |
245 | recipe={customWebsiteRecipe} | 247 | recipe={customWebsiteRecipe} |
246 | onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: customWebsiteRecipe.id })} | 248 | onClick={() => |
249 | isLoggedIn && | ||
250 | showAddServiceInterface({ | ||
251 | recipeId: customWebsiteRecipe.id, | ||
252 | }) | ||
253 | } | ||
247 | /> | 254 | /> |
248 | </div> | 255 | </div> |
249 | )} | 256 | )} |
@@ -251,7 +258,10 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
251 | <RecipeItem | 258 | <RecipeItem |
252 | key={recipe.id} | 259 | key={recipe.id} |
253 | recipe={recipe} | 260 | recipe={recipe} |
254 | onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: recipe.id })} | 261 | onClick={() => |
262 | isLoggedIn && | ||
263 | showAddServiceInterface({ recipeId: recipe.id }) | ||
264 | } | ||
255 | /> | 265 | /> |
256 | ))} | 266 | ))} |
257 | </div> | 267 | </div> |
@@ -263,7 +273,10 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
263 | <RecipeItem | 273 | <RecipeItem |
264 | key={recipe.id} | 274 | key={recipe.id} |
265 | recipe={recipe} | 275 | recipe={recipe} |
266 | onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: recipe.id })} | 276 | onClick={() => |
277 | isLoggedIn && | ||
278 | showAddServiceInterface({ recipeId: recipe.id }) | ||
279 | } | ||
267 | /> | 280 | /> |
268 | ))} | 281 | ))} |
269 | </div> | 282 | </div> |
@@ -276,3 +289,5 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com | |||
276 | ); | 289 | ); |
277 | } | 290 | } |
278 | } | 291 | } |
292 | |||
293 | export default injectIntl(RecipesDashboard); | ||