diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/containers/settings/RecipesScreen.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/containers/settings/RecipesScreen.js')
-rw-r--r-- | src/containers/settings/RecipesScreen.js | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js new file mode 100644 index 000000000..65341e9e3 --- /dev/null +++ b/src/containers/settings/RecipesScreen.js | |||
@@ -0,0 +1,126 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { autorun } from 'mobx'; | ||
4 | import { inject, observer } from 'mobx-react'; | ||
5 | |||
6 | import RecipePreviewsStore from '../../stores/RecipePreviewsStore'; | ||
7 | import RecipeStore from '../../stores/RecipesStore'; | ||
8 | import ServiceStore from '../../stores/ServicesStore'; | ||
9 | import UserStore from '../../stores/UserStore'; | ||
10 | import { gaPage } from '../../lib/analytics'; | ||
11 | |||
12 | import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard'; | ||
13 | |||
14 | @inject('stores', 'actions') @observer | ||
15 | export default class RecipesScreen extends Component { | ||
16 | static propTypes = { | ||
17 | params: PropTypes.shape({ | ||
18 | filter: PropTypes.string, | ||
19 | }).isRequired, | ||
20 | }; | ||
21 | |||
22 | static defaultProps = { | ||
23 | params: { | ||
24 | filter: null, | ||
25 | }, | ||
26 | }; | ||
27 | |||
28 | state = { | ||
29 | needle: null, | ||
30 | currentFilter: 'featured', | ||
31 | }; | ||
32 | |||
33 | componentDidMount() { | ||
34 | gaPage('Settings/Recipe Dashboard/Featured'); | ||
35 | |||
36 | autorun(() => { | ||
37 | const { filter } = this.props.params; | ||
38 | const { currentFilter } = this.state; | ||
39 | |||
40 | if (filter === 'all' && currentFilter !== 'all') { | ||
41 | gaPage('Settings/Recipe Dashboard/All'); | ||
42 | this.setState({ currentFilter: 'all' }); | ||
43 | } else if (filter === 'featured' && currentFilter !== 'featured') { | ||
44 | gaPage('Settings/Recipe Dashboard/Featured'); | ||
45 | this.setState({ currentFilter: 'featured' }); | ||
46 | } else if (filter === 'dev' && currentFilter !== 'dev') { | ||
47 | gaPage('Settings/Recipe Dashboard/Dev'); | ||
48 | this.setState({ currentFilter: 'dev' }); | ||
49 | } | ||
50 | }); | ||
51 | } | ||
52 | |||
53 | componentWillUnmount() { | ||
54 | this.props.stores.services.resetStatus(); | ||
55 | } | ||
56 | |||
57 | searchRecipes(needle) { | ||
58 | if (needle === '') { | ||
59 | this.resetSearch(); | ||
60 | } else { | ||
61 | const { search } = this.props.actions.recipePreview; | ||
62 | this.setState({ needle }); | ||
63 | search({ needle }); | ||
64 | } | ||
65 | } | ||
66 | |||
67 | resetSearch() { | ||
68 | this.setState({ needle: null }); | ||
69 | } | ||
70 | |||
71 | render() { | ||
72 | const { recipePreviews, recipes, services, user } = this.props.stores; | ||
73 | const { showAddServiceInterface } = this.props.actions.service; | ||
74 | |||
75 | const { filter } = this.props.params; | ||
76 | let recipeFilter; | ||
77 | |||
78 | if (filter === 'all') { | ||
79 | recipeFilter = recipePreviews.all; | ||
80 | } else if (filter === 'dev') { | ||
81 | recipeFilter = recipePreviews.dev; | ||
82 | } else { | ||
83 | recipeFilter = recipePreviews.featured; | ||
84 | } | ||
85 | |||
86 | const allRecipes = this.state.needle ? recipePreviews.searchResults : recipeFilter; | ||
87 | |||
88 | const isLoading = recipePreviews.featuredRecipePreviewsRequest.isExecuting | ||
89 | || recipePreviews.allRecipePreviewsRequest.isExecuting | ||
90 | || recipes.installRecipeRequest.isExecuting | ||
91 | || recipePreviews.searchRecipePreviewsRequest.isExecuting; | ||
92 | |||
93 | return ( | ||
94 | <RecipesDashboard | ||
95 | recipes={allRecipes} | ||
96 | isLoading={isLoading} | ||
97 | addedServiceCount={services.all.length} | ||
98 | isPremium={user.data.isPremium} | ||
99 | hasLoadedRecipes={recipePreviews.featuredRecipePreviewsRequest.wasExecuted} | ||
100 | showAddServiceInterface={showAddServiceInterface} | ||
101 | searchRecipes={e => this.searchRecipes(e)} | ||
102 | resetSearch={() => this.resetSearch()} | ||
103 | searchNeedle={this.state.needle} | ||
104 | serviceStatus={services.actionStatus} | ||
105 | devRecipesCount={recipePreviews.dev.length} | ||
106 | /> | ||
107 | ); | ||
108 | } | ||
109 | } | ||
110 | |||
111 | RecipesScreen.wrappedComponent.propTypes = { | ||
112 | stores: PropTypes.shape({ | ||
113 | recipePreviews: PropTypes.instanceOf(RecipePreviewsStore).isRequired, | ||
114 | recipes: PropTypes.instanceOf(RecipeStore).isRequired, | ||
115 | services: PropTypes.instanceOf(ServiceStore).isRequired, | ||
116 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
117 | }).isRequired, | ||
118 | actions: PropTypes.shape({ | ||
119 | service: PropTypes.shape({ | ||
120 | showAddServiceInterface: PropTypes.func.isRequired, | ||
121 | }).isRequired, | ||
122 | recipePreview: PropTypes.shape({ | ||
123 | search: PropTypes.func.isRequired, | ||
124 | }).isRequired, | ||
125 | }).isRequired, | ||
126 | }; | ||