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>

10 files changed, 212 insertions, 223 deletions

diff --git a/.eslintrc.js b/.eslintrc.js
index fd4ff7516..585cb3e75 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -73,6 +73,7 @@ module.exports = {
         // TODO - [TS DEBT] should remove below config once application converted to TS
         'react/default-props-match-prop-types': 0,
         'react/require-default-props': 0,
+        '@typescript-eslint/no-useless-constructor': 0,
         // eslint-plugin-react
         'react/destructuring-assignment': 0,
         'react/button-has-type': 0,
diff --git a/src/components/settings/navigation/SettingsNavigation.jsx b/src/components/settings/navigation/SettingsNavigation.tsx
index e1242a7fe..95c69027c 100644
--- a/src/components/settings/navigation/SettingsNavigation.jsx
+++ b/src/components/settings/navigation/SettingsNavigation.tsx
@@ -1,18 +1,13 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { inject, observer } from 'mobx-react';
-import { RouterStore } from '@superwf/mobx-react-router';
-
 import { NavLink } from 'react-router-dom';
+import { StoresProps } from '../../../@types/ferdium-components.types';
 import {
   LOCAL_SERVER,
   LIVE_FERDIUM_API,
   LIVE_FRANZ_API,
 } from '../../../config';
-import UIStore from '../../../stores/UIStore';
-import SettingsStore from '../../../stores/SettingsStore';
-import UserStore from '../../../stores/UserStore';
 import globalMessages from '../../../i18n/globalMessages';
 
 const messages = defineMessages({
@@ -50,40 +45,37 @@ const messages = defineMessages({
   },
 });
 
-class SettingsNavigation extends Component {
-  static propTypes = {
-    stores: PropTypes.shape({
-      ui: PropTypes.instanceOf(UIStore).isRequired,
-      user: PropTypes.instanceOf(UserStore).isRequired,
-      settings: PropTypes.instanceOf(SettingsStore).isRequired,
-      router: PropTypes.instanceOf(RouterStore).isRequired,
-    }).isRequired,
-    actions: PropTypes.shape({
-      settings: PropTypes.instanceOf(SettingsStore).isRequired,
-    }).isRequired,
-    serviceCount: PropTypes.number.isRequired,
-    workspaceCount: PropTypes.number.isRequired,
-  };
+interface IProps extends Partial<StoresProps>, WrappedComponentProps {
+  serviceCount: number;
+  workspaceCount: number;
+}
+
+@inject('stores', 'actions')
+@observer
+class SettingsNavigation extends Component<IProps> {
+  constructor(props: IProps) {
+    super(props);
+  }
 
-  handleLogout() {
+  handleLogout(): void {
     const isUsingWithoutAccount =
-      this.props.stores.settings.app.server === LOCAL_SERVER;
+      this.props.stores!.settings.app.server === LOCAL_SERVER;
 
     // Remove current auth token
     localStorage.removeItem('authToken');
 
     if (isUsingWithoutAccount) {
       // Reset server back to Ferdium API
-      this.props.actions.settings.update({
+      this.props.actions!.settings.update({
         type: 'app',
         data: {
           server: LIVE_FERDIUM_API,
         },
       });
     }
-    this.props.stores.user.isLoggingOut = true;
+    this.props.stores!.user.isLoggingOut = true;
 
-    this.props.stores.router.push('/auth/welcome');
+    this.props.stores!.router.push('/auth/welcome');
 
     // Reload Ferdium, otherwise many settings won't sync correctly with the server
     // after logging into another account
@@ -91,10 +83,9 @@ class SettingsNavigation extends Component {
   }
 
   render() {
-    const { serviceCount, workspaceCount, stores } = this.props;
-    const { intl } = this.props;
-    const isUsingWithoutAccount = stores.settings.app.server === LOCAL_SERVER;
-    const isUsingFranzServer = stores.settings.app.server === LIVE_FRANZ_API;
+    const { serviceCount, workspaceCount, stores, intl } = this.props;
+    const isUsingWithoutAccount = stores!.settings.app.server === LOCAL_SERVER;
+    const isUsingFranzServer = stores!.settings.app.server === LIVE_FRANZ_API;
 
     return (
       <div className="settings-navigation">
@@ -163,12 +154,12 @@ class SettingsNavigation extends Component {
           }
         >
           {intl.formatMessage(globalMessages.settings)}
-          {stores.settings.app.automaticUpdates &&
-            (stores.ui.showServicesUpdatedInfoBar ||
-              stores.app.updateStatus ===
-                stores.app.updateStatusTypes.AVAILABLE ||
-              stores.app.updateStatus ===
-                stores.app.updateStatusTypes.DOWNLOADED) && (
+          {stores!.settings.app.automaticUpdates &&
+            (stores!.ui.showServicesUpdatedInfoBar ||
+              stores!.app.updateStatus ===
+                stores!.app.updateStatusTypes.AVAILABLE ||
+              stores!.app.updateStatus ===
+                stores!.app.updateStatusTypes.DOWNLOADED) && (
               <span className="update-available">•</span>
             )}
         </NavLink>
@@ -195,7 +186,8 @@ class SettingsNavigation extends Component {
         <span className="settings-navigation__expander" />
         <button
           type="button"
-          to="/auth/logout"
+          // @ts-ignore
+          to="/auth/logout" // TODO - [TS DEBT] Need to check if button take this prop
           className="settings-navigation__link"
           onClick={this.handleLogout.bind(this)}
         >
@@ -208,6 +200,4 @@ class SettingsNavigation extends Component {
   }
 }
 
-export default injectIntl(
-  inject('stores', 'actions')(observer(SettingsNavigation)),
-);
+export default injectIntl(SettingsNavigation);
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),
 );
diff --git a/src/components/ui/SearchInput.tsx b/src/components/ui/SearchInput.tsx
index 6a8c4de8f..39b8f95bf 100644
--- a/src/components/ui/SearchInput.tsx
+++ b/src/components/ui/SearchInput.tsx
@@ -1,43 +1,35 @@
-import { ChangeEvent, Component } from 'react';
+import { ChangeEvent, Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import { debounce } from 'lodash';
+import { debounce, noop } from 'lodash';
 import { mdiCloseCircleOutline, mdiMagnify } from '@mdi/js';
 import Icon from './icon';
 
-type Props = {
-  value: string;
+interface IProps {
+  value?: string;
   placeholder: string;
-  className: string;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  className?: string;
+  onChange?: (e: string) => void;
   onReset: () => void;
-  name: string;
-  throttle: boolean;
-  throttleDelay: number;
-  autoFocus: boolean;
-};
-
-// Should this file be converted into the coding style similar to './toggle/index.tsx'?
-class SearchInput extends Component<Props> {
-  static defaultProps = {
-    value: '',
-    placeholder: '',
-    className: '',
-    name: 'searchInput',
-    throttle: false,
-    throttleDelay: 250,
-    onChange: () => null,
-    onReset: () => null,
-    autoFocus: false,
-  };
-
-  input = null;
-
-  constructor(props: Props) {
+  name?: string;
+  throttle?: boolean;
+  throttleDelay?: number;
+  autoFocus?: boolean;
+}
+
+interface IState {
+  value: string;
+}
+
+@observer
+class SearchInput extends Component<IProps, IState> {
+  input: HTMLInputElement | null = null;
+
+  constructor(props: IProps) {
     super(props);
 
     this.state = {
-      value: props.value,
+      value: props.value || '',
     };
 
     this.throttledOnChange = debounce(
@@ -46,47 +38,47 @@ class SearchInput extends Component<Props> {
     );
   }
 
-  componentDidMount() {
-    const { autoFocus } = this.props;
+  componentDidMount(): void {
+    const { autoFocus = false } = this.props;
 
-    if (autoFocus) {
-      // @ts-expect-error Object is possibly 'null'.
+    if (autoFocus && this.input) {
       this.input.focus();
     }
   }
 
-  onChange(e: ChangeEvent<HTMLInputElement>) {
-    const { throttle, onChange } = this.props;
+  onChange(e: ChangeEvent<HTMLInputElement>): void {
+    const { throttle = false, onChange = noop } = this.props;
     const { value } = e.target;
     this.setState({ value });
 
     if (throttle) {
       e.persist();
-      // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'ChangeEvent<HTMLInputElement>'.
       this.throttledOnChange(value);
     } else {
-      // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'ChangeEvent<HTMLInputElement>'.
       onChange(value);
     }
   }
 
-  throttledOnChange(e: ChangeEvent<HTMLInputElement>) {
-    const { onChange } = this.props;
+  throttledOnChange(e: string): void {
+    const { onChange = noop } = this.props;
 
     onChange(e);
   }
 
-  reset() {
-    const { onReset } = this.props;
+  reset(): void {
+    const { onReset = noop } = this.props;
     this.setState({ value: '' });
 
     onReset();
   }
 
-  render() {
-    const { className, name, placeholder } = this.props;
-    // @ts-expect-error Property 'value' does not exist on type 'Readonly<{}>'.
-    const { value } = this.state;
+  render(): ReactElement {
+    const {
+      className = '',
+      name = 'searchInput',
+      placeholder = '',
+    } = this.props;
+    const { value = '' } = this.state;
 
     return (
       <div className={classnames([className, 'search-input'])}>
@@ -100,13 +92,12 @@ class SearchInput extends Component<Props> {
             value={value}
             onChange={e => this.onChange(e)}
             ref={ref => {
-              // @ts-expect-error Type 'HTMLInputElement | null' is not assignable to type 'null'.
               this.input = ref;
             }}
           />
         </label>
         {value.length > 0 && (
-          <span onClick={() => this.reset()}>
+          <span onClick={() => this.reset()} onKeyDown={noop}>
             <Icon icon={mdiCloseCircleOutline} />
           </span>
         )}
@@ -115,4 +106,4 @@ class SearchInput extends Component<Props> {
   }
 }
 
-export default observer(SearchInput);
+export default SearchInput;
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx
index 416017c83..bf097b6a6 100644
--- a/src/components/ui/effects/Appear.tsx
+++ b/src/components/ui/effects/Appear.tsx
@@ -1,16 +1,16 @@
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactElement, ReactNode, useEffect, useState } from 'react';
 import { CSSTransitionGroup } from 'react-transition-group';
 
-type Props = {
+interface IProps {
   children: ReactNode;
-  transitionName: string;
+  transitionName?: string;
   className?: string;
-};
+}
 const Appear = ({
   children,
   transitionName = 'fadeIn',
   className = '',
-}: Props) => {
+}: IProps): ReactElement | null => {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
@@ -36,8 +36,4 @@ const Appear = ({
   );
 };
 
-Appear.defaultProps = {
-  className: '',
-};
-
 export default Appear;
diff --git a/src/containers/settings/RecipesScreen.tsx b/src/containers/settings/RecipesScreen.tsx
index fffdd39fa..abbb79b39 100644
--- a/src/containers/settings/RecipesScreen.tsx
+++ b/src/containers/settings/RecipesScreen.tsx
@@ -16,27 +16,30 @@ import RecipePreview from '../../models/RecipePreview';
 import { openPath } from '../../helpers/url-helpers';
 import withParams from '../../components/util/WithParams';
 
-interface RecipesScreenProps extends StoresProps {
+interface IProps extends Partial<StoresProps> {
   params: Params;
 }
 
-class RecipesScreen extends Component<RecipesScreenProps> {
-  state: {
-    needle: string | null;
-    currentFilter: string;
-  } = {
-    needle: null,
-    currentFilter: 'featured',
-  };
+interface IState {
+  needle: string | null;
+  currentFilter: string;
+}
 
+@inject('stores', 'actions')
+@observer
+class RecipesScreen extends Component<IProps, IState> {
   autorunDisposer: IReactionDisposer | null = null;
 
   customRecipes: Recipe[] = [];
 
-  constructor(props: RecipesScreenProps) {
+  constructor(props: IProps) {
     super(props);
 
     this.customRecipes = readJsonSync(asarRecipesPath('all.json'));
+    this.state = {
+      needle: null,
+      currentFilter: 'featured',
+    };
   }
 
   componentDidMount(): void {
@@ -55,7 +58,7 @@ class RecipesScreen extends Component<RecipesScreenProps> {
   }
 
   componentWillUnmount(): void {
-    this.props.stores.services.resetStatus();
+    this.props.stores!.services.resetStatus();
 
     if (typeof this.autorunDisposer === 'function') {
       this.autorunDisposer();
@@ -66,7 +69,7 @@ class RecipesScreen extends Component<RecipesScreenProps> {
     if (needle === '') {
       this.resetSearch();
     } else {
-      const { search } = this.props.actions.recipePreview;
+      const { search } = this.props.actions!.recipePreview;
       this.setState({ needle });
       search({ needle });
     }
@@ -106,10 +109,8 @@ class RecipesScreen extends Component<RecipesScreenProps> {
   }
 
   render(): ReactElement {
-    const { recipePreviews, recipes, services } = this.props.stores;
-
-    const { app: appActions, service: serviceActions } = this.props.actions;
-
+    const { recipePreviews, recipes, services } = this.props.stores!;
+    const { app: appActions, service: serviceActions } = this.props.actions!;
     const filter = this.state.currentFilter;
 
     let recipeFilter;
@@ -163,7 +164,6 @@ class RecipesScreen extends Component<RecipesScreenProps> {
           recipes={allRecipes}
           customWebsiteRecipe={customWebsiteRecipe}
           isLoading={isLoading}
-          addedServiceCount={services.all.length}
           hasLoadedRecipes={
             recipePreviews.featuredRecipePreviewsRequest.wasExecuted
           }
@@ -184,4 +184,4 @@ class RecipesScreen extends Component<RecipesScreenProps> {
   }
 }
 
-export default withParams(inject('stores', 'actions')(observer(RecipesScreen)));
+export default withParams(RecipesScreen);
diff --git a/src/containers/settings/SettingsWindow.tsx b/src/containers/settings/SettingsWindow.tsx
index 93bb08c7c..d2cdf3eb3 100644
--- a/src/containers/settings/SettingsWindow.tsx
+++ b/src/containers/settings/SettingsWindow.tsx
@@ -1,20 +1,23 @@
 import { inject, observer } from 'mobx-react';
-import { Component, ReactPortal } from 'react';
+import { Component, ReactElement, ReactPortal } from 'react';
 import ReactDOM from 'react-dom';
 import { Outlet } from 'react-router-dom';
-
 import { StoresProps } from '../../@types/ferdium-components.types';
 import Navigation from '../../components/settings/navigation/SettingsNavigation';
 import Layout from '../../components/settings/SettingsLayout';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 import { workspaceStore } from '../../features/workspaces';
 
-class SettingsContainer extends Component<StoresProps> {
-  portalRoot: any;
+interface IProps extends Partial<StoresProps> {}
+
+@inject('stores', 'actions')
+@observer
+class SettingsContainer extends Component<IProps> {
+  portalRoot: HTMLElement | null;
 
   el: HTMLDivElement;
 
-  constructor(props: StoresProps) {
+  constructor(props: IProps) {
     super(props);
 
     this.portalRoot = document.querySelector('#portalContainer');
@@ -22,7 +25,9 @@ class SettingsContainer extends Component<StoresProps> {
   }
 
   componentDidMount(): void {
-    this.portalRoot.append(this.el);
+    if (this.portalRoot) {
+      this.portalRoot.append(this.el);
+    }
   }
 
   componentWillUnmount(): void {
@@ -31,11 +36,11 @@ class SettingsContainer extends Component<StoresProps> {
 
   render(): ReactPortal {
     const { stores } = this.props;
-    const { closeSettings } = this.props.actions.ui;
+    const { closeSettings } = this.props.actions!.ui;
 
-    const navigation = (
+    const navigation: ReactElement = (
       <Navigation
-        serviceCount={stores.services.all.length}
+        serviceCount={stores!.services.all.length}
         workspaceCount={workspaceStore.workspaces.length}
       />
     );
@@ -51,4 +56,4 @@ class SettingsContainer extends Component<StoresProps> {
   }
 }
 
-export default inject('stores', 'actions')(observer(SettingsContainer));
+export default SettingsContainer;
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.tsx
index 16da22dce..fb85d61e1 100644
--- a/src/features/quickSwitch/Component.js
+++ b/src/features/quickSwitch/Component.tsx
@@ -1,17 +1,16 @@
-import { Component, createRef } from 'react';
+import { ChangeEvent, Component, createRef, ReactElement } from 'react';
 import { getCurrentWindow } from '@electron/remote';
-import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import { reaction } from 'mobx';
-import injectSheet from 'react-jss';
-import { defineMessages, injectIntl } from 'react-intl';
-import { compact, invoke } from 'lodash';
-
+import withStyles, { WithStylesProps } from 'react-jss';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { compact, invoke, noop } from 'lodash';
+import { StoresProps } from '../../@types/ferdium-components.types';
+import Service from '../../models/Service';
 import Input from '../../components/ui/input/index';
 import { H1 } from '../../components/ui/headline';
 import Modal from '../../components/ui/Modal';
 import { state as ModalState } from './store';
-import ServicesStore from '../../stores/ServicesStore';
 
 const messages = defineMessages({
   title: {
@@ -75,17 +74,20 @@ const styles = theme => ({
   },
 });
 
-class QuickSwitchModal extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-  };
+interface IProps
+  extends WithStylesProps<typeof styles>,
+    Partial<StoresProps>,
+    WrappedComponentProps {}
 
-  state = {
-    selected: 0,
-    search: '',
-    wasPrevVisible: false,
-  };
+interface IState {
+  selected: number;
+  search: string;
+  wasPrevVisible: boolean;
+}
 
+@inject('stores', 'actions')
+@observer
+class QuickSwitchModal extends Component<IProps, IState> {
   ARROW_DOWN = 40;
 
   ARROW_UP = 38;
@@ -94,13 +96,19 @@ class QuickSwitchModal extends Component {
 
   TAB = 9;
 
-  inputRef = createRef();
+  inputRef = createRef<HTMLDivElement>();
 
   serviceElements = {};
 
   constructor(props) {
     super(props);
 
+    this.state = {
+      selected: 0,
+      search: '',
+      wasPrevVisible: false,
+    };
+
     this._handleKeyDown = this._handleKeyDown.bind(this);
     this._handleSearchUpdate = this._handleSearchUpdate.bind(this);
     this._handleVisibilityChange = this._handleVisibilityChange.bind(this);
@@ -115,46 +123,46 @@ class QuickSwitchModal extends Component {
   }
 
   // Add global keydown listener when component mounts
-  componentDidMount() {
+  componentDidMount(): void {
     document.addEventListener('keydown', this._handleKeyDown);
   }
 
   // Remove global keydown listener when component unmounts
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     document.removeEventListener('keydown', this._handleKeyDown);
   }
 
   // Get currently shown services
-  services() {
-    let services = [];
+  services(): Service[] {
+    let services: Service[] = [];
     if (
       this.state.search &&
       compact(invoke(this.state.search, 'match', /^[\da-z]/i)).length > 0
     ) {
       // Apply simple search algorythm to list of all services
-      services = this.props.stores.services.allDisplayed;
+      services = this.props.stores!.services.allDisplayed;
       services = services.filter(
         service =>
           service.name.toLowerCase().search(this.state.search.toLowerCase()) !==
           -1,
       );
-    } else if (this.props.stores.services.allDisplayed.length > 0) {
+    } else if (this.props.stores!.services.allDisplayed.length > 0) {
       // Add the currently active service first
-      const currentService = this.props.stores.services.active;
+      const currentService = this.props.stores!.services.active;
       if (currentService) {
         services.push(currentService);
       }
 
       // Add last used services to services array
-      for (const service of this.props.stores.services.lastUsedServices) {
-        const tempService = this.props.stores.services.one(service);
+      for (const service of this.props.stores!.services.lastUsedServices) {
+        const tempService = this.props.stores!.services.one(service);
         if (tempService && !services.includes(tempService)) {
           services.push(tempService);
         }
       }
 
       // Add all other services in the default order
-      for (const service of this.props.stores.services.allDisplayed) {
+      for (const service of this.props.stores!.services.allDisplayed) {
         if (!services.includes(service)) {
           services.push(service);
         }
@@ -164,10 +172,10 @@ class QuickSwitchModal extends Component {
     return services;
   }
 
-  openService(index) {
+  openService(index): void {
     // Open service
     const service = this.services()[index];
-    this.props.actions.service.setActive({ serviceId: service.id });
+    this.props.actions!.service.setActive({ serviceId: service.id });
 
     // Reset and close modal
     this.setState({
@@ -179,7 +187,7 @@ class QuickSwitchModal extends Component {
 
   // Change the selected service
   // factor should be -1 or 1
-  changeSelected(factor) {
+  changeSelected(factor: number): any {
     this.setState(state => {
       let newSelected = state.selected + factor;
       const services = this.services().length;
@@ -204,7 +212,7 @@ class QuickSwitchModal extends Component {
   }
 
   // Handle global key presses to change the selection
-  _handleKeyDown(event) {
+  _handleKeyDown(event: KeyboardEvent): void {
     if (ModalState.isModalVisible) {
       switch (event.keyCode) {
         case this.ARROW_DOWN:
@@ -230,13 +238,13 @@ class QuickSwitchModal extends Component {
   }
 
   // Handle update of the search query
-  _handleSearchUpdate(evt) {
+  _handleSearchUpdate(event: ChangeEvent<HTMLInputElement>): void {
     this.setState({
-      search: evt.target.value,
+      search: event.target.value,
     });
   }
 
-  _handleVisibilityChange() {
+  _handleVisibilityChange(): void {
     const { isModalVisible } = ModalState;
 
     if (isModalVisible && !this.state.wasPrevVisible) {
@@ -273,21 +281,16 @@ class QuickSwitchModal extends Component {
   }
 
   // Close this modal
-  close() {
+  close(): void {
     ModalState.isModalVisible = false;
   }
 
-  render() {
+  render(): ReactElement {
     const { isModalVisible } = ModalState;
-
     const { openService } = this;
-
-    const { classes } = this.props;
-
+    const { classes, intl } = this.props;
     const services = this.services();
 
-    const { intl } = this.props;
-
     return (
       <Modal
         isOpen={isModalVisible}
@@ -316,6 +319,7 @@ class QuickSwitchModal extends Component {
                   : ''
               } service`}
               onClick={() => openService(index)}
+              onKeyDown={noop}
               key={service.id}
               ref={el => {
                 this.serviceElements[index] = el;
@@ -340,18 +344,6 @@ class QuickSwitchModal extends Component {
   }
 }
 
-QuickSwitchModal.propTypes = {
-  stores: PropTypes.shape({
-    services: PropTypes.instanceOf(ServicesStore).isRequired,
-  }).isRequired,
-  actions: PropTypes.shape({
-    service: PropTypes.instanceOf(ServicesStore).isRequired,
-  }).isRequired,
-  classes: PropTypes.object.isRequired,
-};
-
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(
-    inject('stores', 'actions')(observer(QuickSwitchModal)),
-  ),
+  withStyles(styles, { injectTheme: true })(QuickSwitchModal),
 );
diff --git a/src/models/RecipePreview.ts b/src/models/RecipePreview.ts
index fb8cb3e3e..33b5e1432 100644
--- a/src/models/RecipePreview.ts
+++ b/src/models/RecipePreview.ts
@@ -4,6 +4,10 @@ interface IRecipePreview {
   icon: string;
   featured: boolean;
   aliases: string[];
+  isDevRecipe?: boolean;
+  icons?: {
+    svg: string;
+  };
 }
 
 export default class RecipePreview {
@@ -17,6 +21,12 @@ export default class RecipePreview {
 
   aliases: string[] = [];
 
+  isDevRecipe?: boolean;
+
+  icons?: {
+    svg: string;
+  };
+
   constructor(data: IRecipePreview) {
     if (!data) {
       throw new Error('RecipePreview config not valid');