diff options
author | 2022-10-27 07:13:47 +0530 | |
---|---|---|
committer | 2022-10-27 01:43:47 +0000 | |
commit | 81c43ecc3d17e0dbf7ad1d949b6d977f2c65bd48 (patch) | |
tree | dfa7c08cb54fb81b7d2e788d350de52c2ebd05d2 /src/components/settings/recipes | |
parent | 6.2.1-nightly.30 [skip ci] (diff) | |
download | ferdium-app-81c43ecc3d17e0dbf7ad1d949b6d977f2c65bd48.tar.gz ferdium-app-81c43ecc3d17e0dbf7ad1d949b6d977f2c65bd48.tar.zst ferdium-app-81c43ecc3d17e0dbf7ad1d949b6d977f2c65bd48.zip |
fix: 'failed prop' warning in QuickSwitchModal, SettingsNavigation, SettingsWindow and Recipe component tree (#713)
* chore: turn off eslint rule @typescript-eslint/no-useless-constructor to initialize dynamic props & state
Co-authored-by: Muhamed <>
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/components/settings/recipes')
-rw-r--r-- | src/components/settings/recipes/RecipeItem.tsx (renamed from src/components/settings/recipes/RecipeItem.js) | 23 | ||||
-rw-r--r-- | src/components/settings/recipes/RecipesDashboard.tsx (renamed from src/components/settings/recipes/RecipesDashboard.jsx) | 65 |
2 files changed, 46 insertions, 42 deletions
diff --git a/src/components/settings/recipes/RecipeItem.js b/src/components/settings/recipes/RecipeItem.tsx index df5b42222..432e4e6a1 100644 --- a/src/components/settings/recipes/RecipeItem.js +++ b/src/components/settings/recipes/RecipeItem.tsx | |||
@@ -1,14 +1,17 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, MouseEventHandler } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import RecipePreview from '../../../models/RecipePreview'; | ||
4 | 4 | ||
5 | import RecipePreviewModel from '../../../models/RecipePreview'; | 5 | interface IProps { |
6 | recipe: RecipePreview; | ||
7 | onClick: MouseEventHandler<HTMLButtonElement>; | ||
8 | } | ||
6 | 9 | ||
7 | class RecipeItem extends Component { | 10 | @observer |
8 | static propTypes = { | 11 | class RecipeItem extends Component<IProps> { |
9 | recipe: PropTypes.instanceOf(RecipePreviewModel).isRequired, | 12 | constructor(props: IProps) { |
10 | onClick: PropTypes.func.isRequired, | 13 | super(props); |
11 | }; | 14 | } |
12 | 15 | ||
13 | render() { | 16 | render() { |
14 | const { recipe, onClick } = this.props; | 17 | const { recipe, onClick } = this.props; |
@@ -18,7 +21,7 @@ class RecipeItem extends Component { | |||
18 | {recipe.isDevRecipe && ( | 21 | {recipe.isDevRecipe && ( |
19 | <span className="recipe-teaser__dev-badge">dev</span> | 22 | <span className="recipe-teaser__dev-badge">dev</span> |
20 | )} | 23 | )} |
21 | <img src={recipe.icons.svg} className="recipe-teaser__icon" alt="" /> | 24 | <img src={recipe.icons?.svg} className="recipe-teaser__icon" alt="" /> |
22 | <span className="recipe-teaser__label">{recipe.name}</span> | 25 | <span className="recipe-teaser__label">{recipe.name}</span> |
23 | {recipe.aliases && recipe.aliases.length > 0 && ( | 26 | {recipe.aliases && recipe.aliases.length > 0 && ( |
24 | <span className="recipe-teaser__alias_label"> | 27 | <span className="recipe-teaser__alias_label"> |
@@ -30,4 +33,4 @@ class RecipeItem extends Component { | |||
30 | } | 33 | } |
31 | } | 34 | } |
32 | 35 | ||
33 | export default observer(RecipeItem); | 36 | export default RecipeItem; |
diff --git a/src/components/settings/recipes/RecipesDashboard.jsx b/src/components/settings/recipes/RecipesDashboard.tsx index d6150d300..fc687bc79 100644 --- a/src/components/settings/recipes/RecipesDashboard.jsx +++ b/src/components/settings/recipes/RecipesDashboard.tsx | |||
@@ -1,17 +1,14 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import { observer } from 'mobx-react'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | ||
5 | import { NavLink } from 'react-router-dom'; | 4 | import { NavLink } from 'react-router-dom'; |
6 | 5 | import withStyles, { WithStylesProps } from 'react-jss'; | |
7 | import injectSheet from 'react-jss'; | ||
8 | |||
9 | import { mdiOpenInNew } from '@mdi/js'; | 6 | import { mdiOpenInNew } from '@mdi/js'; |
10 | import Button from '../../ui/button'; | 7 | import Button from '../../ui/button'; |
11 | import Input from '../../ui/input/index'; | 8 | import Input from '../../ui/input/index'; |
12 | import { H1, H2, H3 } from '../../ui/headline'; | 9 | import { H1, H2, H3 } from '../../ui/headline'; |
13 | import SearchInput from '../../ui/SearchInput'; | 10 | import SearchInput from '../../ui/SearchInput'; |
14 | import Infobox from '../../ui/Infobox'; | 11 | import Infobox from '../../ui/infobox'; |
15 | import RecipeItem from './RecipeItem'; | 12 | import RecipeItem from './RecipeItem'; |
16 | import Loader from '../../ui/Loader'; | 13 | import Loader from '../../ui/Loader'; |
17 | import Appear from '../../ui/effects/Appear'; | 14 | import Appear from '../../ui/effects/Appear'; |
@@ -109,28 +106,32 @@ const styles = { | |||
109 | }, | 106 | }, |
110 | }; | 107 | }; |
111 | 108 | ||
112 | class RecipesDashboard extends Component { | 109 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { |
113 | static propTypes = { | 110 | recipes: RecipePreview[]; |
114 | recipes: MobxPropTypes.arrayOrObservableArray.isRequired, | 111 | customWebsiteRecipe?: RecipePreview; |
115 | customWebsiteRecipe: PropTypes.instanceOf(RecipePreview).isRequired, | 112 | isLoading: boolean; |
116 | isLoading: PropTypes.bool.isRequired, | 113 | hasLoadedRecipes: boolean; |
117 | hasLoadedRecipes: PropTypes.bool.isRequired, | 114 | showAddServiceInterface: (...args: any[]) => void; |
118 | showAddServiceInterface: PropTypes.func.isRequired, | 115 | searchRecipes: (e: string | null) => void; |
119 | searchRecipes: PropTypes.func.isRequired, | 116 | resetSearch: () => void; |
120 | resetSearch: PropTypes.func.isRequired, | 117 | serviceStatus: string[]; |
121 | serviceStatus: MobxPropTypes.arrayOrObservableArray.isRequired, | 118 | searchNeedle: string | null; |
122 | searchNeedle: PropTypes.string, | 119 | recipeFilter?: string; |
123 | recipeFilter: PropTypes.string, | 120 | recipeDirectory: string; |
124 | recipeDirectory: PropTypes.string.isRequired, | 121 | openRecipeDirectory: () => void; |
125 | openRecipeDirectory: PropTypes.func.isRequired, | 122 | openDevDocs: () => void; |
126 | openDevDocs: PropTypes.func.isRequired, | 123 | } |
127 | classes: PropTypes.object.isRequired, | 124 | |
128 | }; | 125 | interface IState { |
126 | searchNeedle: string | null; | ||
127 | recipeFilter: string; | ||
128 | } | ||
129 | 129 | ||
130 | static defaultProps = { | 130 | @observer |
131 | searchNeedle: '', | 131 | class RecipesDashboard extends Component<IProps, IState> { |
132 | recipeFilter: 'all', | 132 | constructor(props: IProps) { |
133 | }; | 133 | super(props); |
134 | } | ||
134 | 135 | ||
135 | render() { | 136 | render() { |
136 | const { | 137 | const { |
@@ -141,15 +142,15 @@ class RecipesDashboard extends Component { | |||
141 | showAddServiceInterface, | 142 | showAddServiceInterface, |
142 | searchRecipes, | 143 | searchRecipes, |
143 | resetSearch, | 144 | resetSearch, |
144 | serviceStatus, | 145 | serviceStatus = 'all', |
145 | searchNeedle, | 146 | searchNeedle = '', |
146 | recipeFilter, | 147 | recipeFilter, |
147 | recipeDirectory, | 148 | recipeDirectory, |
148 | openRecipeDirectory, | 149 | openRecipeDirectory, |
149 | openDevDocs, | 150 | openDevDocs, |
150 | classes, | 151 | classes, |
152 | intl, | ||
151 | } = this.props; | 153 | } = this.props; |
152 | const { intl } = this.props; | ||
153 | 154 | ||
154 | const communityRecipes = recipes.filter(r => !r.isDevRecipe); | 155 | const communityRecipes = recipes.filter(r => !r.isDevRecipe); |
155 | const devRecipes = recipes.filter(r => r.isDevRecipe); | 156 | const devRecipes = recipes.filter(r => r.isDevRecipe); |
@@ -307,5 +308,5 @@ class RecipesDashboard extends Component { | |||
307 | } | 308 | } |
308 | 309 | ||
309 | export default injectIntl( | 310 | export default injectIntl( |
310 | injectSheet(styles, { injectTheme: true })(observer(RecipesDashboard)), | 311 | withStyles(styles, { injectTheme: true })(RecipesDashboard), |
311 | ); | 312 | ); |