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>

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 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, MouseEventHandler } from 'react';
 import { observer } from 'mobx-react';
+import RecipePreview from '../../../models/RecipePreview';
 
-import RecipePreviewModel from '../../../models/RecipePreview';
+interface IProps {
+  recipe: RecipePreview;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+}
 
-class RecipeItem extends Component {
-  static propTypes = {
-    recipe: PropTypes.instanceOf(RecipePreviewModel).isRequired,
-    onClick: PropTypes.func.isRequired,
-  };
+@observer
+class RecipeItem extends Component<IProps> {
+  constructor(props: IProps) {
+    super(props);
+  }
 
   render() {
     const { recipe, onClick } = this.props;
@@ -18,7 +21,7 @@ class RecipeItem extends Component {
         {recipe.isDevRecipe && (
           <span className="recipe-teaser__dev-badge">dev</span>
         )}
-        <img src={recipe.icons.svg} className="recipe-teaser__icon" alt="" />
+        <img src={recipe.icons?.svg} className="recipe-teaser__icon" alt="" />
         <span className="recipe-teaser__label">{recipe.name}</span>
         {recipe.aliases && recipe.aliases.length > 0 && (
           <span className="recipe-teaser__alias_label">
@@ -30,4 +33,4 @@ class RecipeItem extends Component {
   }
 }
 
-export default observer(RecipeItem);
+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 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { NavLink } from 'react-router-dom';
-
-import injectSheet from 'react-jss';
-
+import withStyles, { WithStylesProps } from 'react-jss';
 import { mdiOpenInNew } from '@mdi/js';
 import Button from '../../ui/button';
 import Input from '../../ui/input/index';
 import { H1, H2, H3 } from '../../ui/headline';
 import SearchInput from '../../ui/SearchInput';
-import Infobox from '../../ui/Infobox';
+import Infobox from '../../ui/infobox';
 import RecipeItem from './RecipeItem';
 import Loader from '../../ui/Loader';
 import Appear from '../../ui/effects/Appear';
@@ -109,28 +106,32 @@ const styles = {
   },
 };
 
-class RecipesDashboard extends Component {
-  static propTypes = {
-    recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
-    customWebsiteRecipe: PropTypes.instanceOf(RecipePreview).isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    hasLoadedRecipes: PropTypes.bool.isRequired,
-    showAddServiceInterface: PropTypes.func.isRequired,
-    searchRecipes: PropTypes.func.isRequired,
-    resetSearch: PropTypes.func.isRequired,
-    serviceStatus: MobxPropTypes.arrayOrObservableArray.isRequired,
-    searchNeedle: PropTypes.string,
-    recipeFilter: PropTypes.string,
-    recipeDirectory: PropTypes.string.isRequired,
-    openRecipeDirectory: PropTypes.func.isRequired,
-    openDevDocs: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
-  };
+interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
+  recipes: RecipePreview[];
+  customWebsiteRecipe?: RecipePreview;
+  isLoading: boolean;
+  hasLoadedRecipes: boolean;
+  showAddServiceInterface: (...args: any[]) => void;
+  searchRecipes: (e: string | null) => void;
+  resetSearch: () => void;
+  serviceStatus: string[];
+  searchNeedle: string | null;
+  recipeFilter?: string;
+  recipeDirectory: string;
+  openRecipeDirectory: () => void;
+  openDevDocs: () => void;
+}
+
+interface IState {
+  searchNeedle: string | null;
+  recipeFilter: string;
+}
 
-  static defaultProps = {
-    searchNeedle: '',
-    recipeFilter: 'all',
-  };
+@observer
+class RecipesDashboard extends Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+  }
 
   render() {
     const {
@@ -141,15 +142,15 @@ class RecipesDashboard extends Component {
       showAddServiceInterface,
       searchRecipes,
       resetSearch,
-      serviceStatus,
-      searchNeedle,
+      serviceStatus = 'all',
+      searchNeedle = '',
       recipeFilter,
       recipeDirectory,
       openRecipeDirectory,
       openDevDocs,
       classes,
+      intl,
     } = this.props;
-    const { intl } = this.props;
 
     const communityRecipes = recipes.filter(r => !r.isDevRecipe);
     const devRecipes = recipes.filter(r => r.isDevRecipe);
@@ -307,5 +308,5 @@ class RecipesDashboard extends Component {
 }
 
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(RecipesDashboard)),
+  withStyles(styles, { injectTheme: true })(RecipesDashboard),
 );