diff options
author | Ricardo Cino <ricardo@cino.io> | 2022-07-07 09:31:50 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-07 09:31:50 +0200 |
commit | 71c52373f81cace664047edd19d9d289f45a4dff (patch) | |
tree | 69b3f1d45a8b3f1ceab9497ea3c96e9dc18e3166 /src/components/settings/recipes | |
parent | 6.0.0-nightly.91 [skip ci] (diff) | |
download | ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.tar.gz ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.tar.zst ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.zip |
chore: Mobx & React-Router upgrade (#406)
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/components/settings/recipes')
-rw-r--r-- | src/components/settings/recipes/RecipesDashboard.jsx (renamed from src/components/settings/recipes/RecipesDashboard.js) | 67 |
1 files changed, 36 insertions, 31 deletions
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.jsx index c05144117..589b97ecd 100644 --- a/src/components/settings/recipes/RecipesDashboard.js +++ b/src/components/settings/recipes/RecipesDashboard.jsx | |||
@@ -2,7 +2,7 @@ import { 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, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | import { Link } from 'react-router'; | 5 | import { NavLink } from 'react-router-dom'; |
6 | 6 | ||
7 | import injectSheet from 'react-jss'; | 7 | import injectSheet from 'react-jss'; |
8 | 8 | ||
@@ -179,30 +179,33 @@ class RecipesDashboard extends Component { | |||
179 | throttle | 179 | throttle |
180 | /> | 180 | /> |
181 | <div className="recipes__navigation"> | 181 | <div className="recipes__navigation"> |
182 | <Link | 182 | <NavLink |
183 | to="/settings/recipes" | 183 | to="/settings/recipes" |
184 | className="badge" | 184 | className={() => |
185 | activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`} | 185 | recipeFilter === 'featured' ? 'badge badge--primary' : 'badge' |
186 | } | ||
186 | onClick={() => resetSearch()} | 187 | onClick={() => resetSearch()} |
187 | > | 188 | > |
188 | {intl.formatMessage(messages.ferdiumPicksRecipes)} | 189 | {intl.formatMessage(messages.ferdiumPicksRecipes)} |
189 | </Link> | 190 | </NavLink> |
190 | <Link | 191 | <NavLink |
191 | to="/settings/recipes/all" | 192 | to="/settings/recipes/all" |
192 | className="badge" | 193 | className={({ isActive }) => |
193 | activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`} | 194 | isActive && recipeFilter === 'all' ? 'badge badge--primary' : 'badge' |
195 | } | ||
194 | onClick={() => resetSearch()} | 196 | onClick={() => resetSearch()} |
195 | > | 197 | > |
196 | {intl.formatMessage(messages.allRecipes)} | 198 | {intl.formatMessage(messages.allRecipes)} |
197 | </Link> | 199 | </NavLink> |
198 | <Link | 200 | <NavLink |
199 | to="/settings/recipes/dev" | 201 | to="/settings/recipes/dev" |
200 | className="badge" | 202 | className={({ isActive }) => |
201 | activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`} | 203 | isActive && !searchNeedle ? 'badge badge--primary' : 'badge' |
204 | } | ||
202 | onClick={() => resetSearch()} | 205 | onClick={() => resetSearch()} |
203 | > | 206 | > |
204 | {intl.formatMessage(messages.customRecipes)} | 207 | {intl.formatMessage(messages.customRecipes)} |
205 | </Link> | 208 | </NavLink> |
206 | <a | 209 | <a |
207 | href={FERDIUM_SERVICE_REQUEST} | 210 | href={FERDIUM_SERVICE_REQUEST} |
208 | target="_blank" | 211 | target="_blank" |
@@ -257,24 +260,26 @@ class RecipesDashboard extends Component { | |||
257 | /> | 260 | /> |
258 | ))} | 261 | ))} |
259 | </div> | 262 | </div> |
260 | {hasLoadedRecipes && recipes.length === 0 && recipeFilter !== 'dev' && ( | 263 | {hasLoadedRecipes && |
261 | <div className="align-middle settings__empty-state"> | 264 | recipes.length === 0 && |
262 | {customWebsiteRecipe && customWebsiteRecipe.id && ( | 265 | recipeFilter !== 'dev' && ( |
263 | <RecipeItem | 266 | <div className="align-middle settings__empty-state"> |
264 | key={customWebsiteRecipe.id} | 267 | {customWebsiteRecipe && customWebsiteRecipe.id && ( |
265 | recipe={customWebsiteRecipe} | 268 | <RecipeItem |
266 | onClick={() => | 269 | key={customWebsiteRecipe.id} |
267 | showAddServiceInterface({ | 270 | recipe={customWebsiteRecipe} |
268 | recipeId: customWebsiteRecipe.id, | 271 | onClick={() => |
269 | }) | 272 | showAddServiceInterface({ |
270 | } | 273 | recipeId: customWebsiteRecipe.id, |
271 | /> | 274 | }) |
272 | )} | 275 | } |
273 | <p className="settings__empty-state-text"> | 276 | /> |
274 | {intl.formatMessage(messages.nothingFound)} | 277 | )} |
275 | </p> | 278 | <p className="settings__empty-state-text"> |
276 | </div> | 279 | {intl.formatMessage(messages.nothingFound)} |
277 | )} | 280 | </p> |
281 | </div> | ||
282 | )} | ||
278 | {recipeFilter === 'dev' && devRecipes.length > 0 && ( | 283 | {recipeFilter === 'dev' && devRecipes.length > 0 && ( |
279 | <div className={classes.devRecipeList}> | 284 | <div className={classes.devRecipeList}> |
280 | <H3>{intl.formatMessage(messages.headlineDevRecipes)}</H3> | 285 | <H3>{intl.formatMessage(messages.headlineDevRecipes)}</H3> |