diff options
author | 2022-06-27 18:21:31 +0200 | |
---|---|---|
committer | 2022-06-27 17:21:31 +0100 | |
commit | 0bf13689d53bd493fb4d0a4213c1801013b5aa8a (patch) | |
tree | 2b5ae44e4f1aa73b49c011954ff1cb47e3959bad /src/containers/settings/RecipesScreen.js | |
parent | chore: recommend specific vscode extensions to setup development [skip ci] (#... (diff) | |
download | ferdium-app-0bf13689d53bd493fb4d0a4213c1801013b5aa8a.tar.gz ferdium-app-0bf13689d53bd493fb4d0a4213c1801013b5aa8a.tar.zst ferdium-app-0bf13689d53bd493fb4d0a4213c1801013b5aa8a.zip |
chore: transform containers/settings from js to tsx (#384)
Diffstat (limited to 'src/containers/settings/RecipesScreen.js')
-rw-r--r-- | src/containers/settings/RecipesScreen.js | 204 |
1 files changed, 0 insertions, 204 deletions
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js deleted file mode 100644 index e8f0a7282..000000000 --- a/src/containers/settings/RecipesScreen.js +++ /dev/null | |||
@@ -1,204 +0,0 @@ | |||
1 | import { readJsonSync } from 'fs-extra'; | ||
2 | import { Component } from 'react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import { autorun } from 'mobx'; | ||
5 | import { inject, observer } from 'mobx-react'; | ||
6 | |||
7 | import RecipePreviewsStore from '../../stores/RecipePreviewsStore'; | ||
8 | import RecipeStore from '../../stores/RecipesStore'; | ||
9 | import ServiceStore from '../../stores/ServicesStore'; | ||
10 | import UserStore from '../../stores/UserStore'; | ||
11 | |||
12 | import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard'; | ||
13 | import ErrorBoundary from '../../components/util/ErrorBoundary'; | ||
14 | import { CUSTOM_WEBSITE_RECIPE_ID, FRANZ_DEV_DOCS } from '../../config'; | ||
15 | import { userDataRecipesPath } from '../../environment-remote'; | ||
16 | import { asarRecipesPath } from '../../helpers/asar-helpers'; | ||
17 | import { communityRecipesStore } from '../../features/communityRecipes'; | ||
18 | import RecipePreview from '../../models/RecipePreview'; | ||
19 | import AppStore from '../../stores/AppStore'; | ||
20 | import { openPath } from '../../helpers/url-helpers'; | ||
21 | |||
22 | class RecipesScreen extends Component { | ||
23 | static propTypes = { | ||
24 | params: PropTypes.shape({ | ||
25 | filter: PropTypes.string, | ||
26 | }), | ||
27 | }; | ||
28 | |||
29 | static defaultProps = { | ||
30 | params: { | ||
31 | filter: null, | ||
32 | }, | ||
33 | }; | ||
34 | |||
35 | state = { | ||
36 | needle: null, | ||
37 | currentFilter: 'featured', | ||
38 | }; | ||
39 | |||
40 | autorunDisposer = null; | ||
41 | |||
42 | customRecipes = []; | ||
43 | |||
44 | constructor(props) { | ||
45 | super(props); | ||
46 | |||
47 | this.customRecipes = readJsonSync(asarRecipesPath('all.json')); | ||
48 | } | ||
49 | |||
50 | componentDidMount() { | ||
51 | this.autorunDisposer = autorun(() => { | ||
52 | const { filter } = this.props.params; | ||
53 | const { currentFilter } = this.state; | ||
54 | |||
55 | if (filter === 'all' && currentFilter !== 'all') { | ||
56 | this.setState({ currentFilter: 'all' }); | ||
57 | } else if (filter === 'featured' && currentFilter !== 'featured') { | ||
58 | this.setState({ currentFilter: 'featured' }); | ||
59 | } else if (filter === 'dev' && currentFilter !== 'dev') { | ||
60 | this.setState({ currentFilter: 'dev' }); | ||
61 | } | ||
62 | }); | ||
63 | } | ||
64 | |||
65 | componentWillUnmount() { | ||
66 | this.props.stores.services.resetStatus(); | ||
67 | this.autorunDisposer(); | ||
68 | } | ||
69 | |||
70 | searchRecipes(needle) { | ||
71 | if (needle === '') { | ||
72 | this.resetSearch(); | ||
73 | } else { | ||
74 | const { search } = this.props.actions.recipePreview; | ||
75 | this.setState({ needle }); | ||
76 | search({ needle }); | ||
77 | } | ||
78 | } | ||
79 | |||
80 | _sortByName(recipe1, recipe2) { | ||
81 | if (recipe1.name.toLowerCase() < recipe2.name.toLowerCase()) { | ||
82 | return -1; | ||
83 | } | ||
84 | if (recipe1.name.toLowerCase() > recipe2.name.toLowerCase()) { | ||
85 | return 1; | ||
86 | } | ||
87 | return 0; | ||
88 | } | ||
89 | |||
90 | prepareRecipes(recipes) { | ||
91 | return ( | ||
92 | recipes | ||
93 | // Filter out duplicate recipes | ||
94 | .filter((recipe, index, self) => { | ||
95 | const ids = self.map(rec => rec.id); | ||
96 | return ids.indexOf(recipe.id) === index; | ||
97 | |||
98 | // Sort alphabetically | ||
99 | }) | ||
100 | .sort(this._sortByName) | ||
101 | ); | ||
102 | } | ||
103 | |||
104 | // Create an array of RecipePreviews from an array of recipe objects | ||
105 | createPreviews(recipes) { | ||
106 | return recipes.map(recipe => new RecipePreview(recipe)); | ||
107 | } | ||
108 | |||
109 | resetSearch() { | ||
110 | this.setState({ needle: null }); | ||
111 | } | ||
112 | |||
113 | render() { | ||
114 | const { recipePreviews, recipes, services } = this.props.stores; | ||
115 | |||
116 | const { app: appActions, service: serviceActions } = this.props.actions; | ||
117 | |||
118 | const { filter } = this.props.params; | ||
119 | let recipeFilter; | ||
120 | |||
121 | if (filter === 'all') { | ||
122 | recipeFilter = this.prepareRecipes([ | ||
123 | ...recipePreviews.all, | ||
124 | ...this.createPreviews(this.customRecipes), | ||
125 | ]); | ||
126 | } else if (filter === 'dev') { | ||
127 | recipeFilter = communityRecipesStore.communityRecipes; | ||
128 | } else { | ||
129 | recipeFilter = recipePreviews.featured; | ||
130 | } | ||
131 | recipeFilter = recipeFilter.sort(this._sortByName); | ||
132 | |||
133 | const allRecipes = this.state.needle | ||
134 | ? this.prepareRecipes([ | ||
135 | // All search recipes from server | ||
136 | ...recipePreviews.searchResults, | ||
137 | // All search recipes from local recipes | ||
138 | ...this.createPreviews( | ||
139 | this.customRecipes.filter( | ||
140 | service => | ||
141 | service.name | ||
142 | .toLowerCase() | ||
143 | .includes(this.state.needle.toLowerCase()) || | ||
144 | (service.aliases || []).some(alias => | ||
145 | alias.toLowerCase().includes(this.state.needle.toLowerCase()), | ||
146 | ), | ||
147 | ), | ||
148 | ), | ||
149 | ]).sort(this._sortByName) | ||
150 | : recipeFilter; | ||
151 | |||
152 | const customWebsiteRecipe = recipePreviews.all.find( | ||
153 | service => service.id === CUSTOM_WEBSITE_RECIPE_ID, | ||
154 | ); | ||
155 | |||
156 | const isLoading = recipePreviews.featuredRecipePreviewsRequest.isExecuting | ||
157 | || recipePreviews.allRecipePreviewsRequest.isExecuting | ||
158 | || recipes.installRecipeRequest.isExecuting | ||
159 | || recipePreviews.searchRecipePreviewsRequest.isExecuting; | ||
160 | |||
161 | const recipeDirectory = userDataRecipesPath('dev'); | ||
162 | |||
163 | return ( | ||
164 | <ErrorBoundary> | ||
165 | <RecipesDashboard | ||
166 | recipes={allRecipes} | ||
167 | customWebsiteRecipe={customWebsiteRecipe} | ||
168 | isLoading={isLoading} | ||
169 | addedServiceCount={services.all.length} | ||
170 | hasLoadedRecipes={recipePreviews.featuredRecipePreviewsRequest.wasExecuted} | ||
171 | showAddServiceInterface={serviceActions.showAddServiceInterface} | ||
172 | searchRecipes={e => this.searchRecipes(e)} | ||
173 | resetSearch={() => this.resetSearch()} | ||
174 | searchNeedle={this.state.needle} | ||
175 | serviceStatus={services.actionStatus} | ||
176 | recipeFilter={filter} | ||
177 | recipeDirectory={recipeDirectory} | ||
178 | openRecipeDirectory={() => openPath(recipeDirectory)} | ||
179 | openDevDocs={() => | ||
180 | appActions.openExternalUrl({ url: FRANZ_DEV_DOCS }) | ||
181 | } | ||
182 | /> | ||
183 | </ErrorBoundary> | ||
184 | ); | ||
185 | } | ||
186 | } | ||
187 | |||
188 | RecipesScreen.propTypes = { | ||
189 | stores: PropTypes.shape({ | ||
190 | recipePreviews: PropTypes.instanceOf(RecipePreviewsStore).isRequired, | ||
191 | recipes: PropTypes.instanceOf(RecipeStore).isRequired, | ||
192 | services: PropTypes.instanceOf(ServiceStore).isRequired, | ||
193 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
194 | }).isRequired, | ||
195 | actions: PropTypes.shape({ | ||
196 | app: PropTypes.instanceOf(AppStore).isRequired, | ||
197 | service: PropTypes.instanceOf(ServiceStore).isRequired, | ||
198 | recipePreview: PropTypes.shape({ | ||
199 | search: PropTypes.func.isRequired, | ||
200 | }).isRequired, | ||
201 | }).isRequired, | ||
202 | }; | ||
203 | |||
204 | export default inject('stores', 'actions')(observer(RecipesScreen)); | ||