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>

1 files changed, 0 insertions, 357 deletions

diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js
deleted file mode 100644
index 16da22dce..000000000
--- a/src/features/quickSwitch/Component.js
+++ /dev/null
@@ -1,357 +0,0 @@
-import { Component, createRef } 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 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: {
-    id: 'feature.quickSwitch.title',
-    defaultMessage: 'QuickSwitch',
-  },
-  search: {
-    id: 'feature.quickSwitch.search',
-    defaultMessage: 'Search...',
-  },
-  info: {
-    id: 'feature.quickSwitch.info',
-    defaultMessage:
-      'Select a service with TAB, ↑ and ↓. Open a service with ENTER.',
-  },
-});
-
-const styles = theme => ({
-  modal: {
-    width: '80%',
-    maxWidth: 600,
-    background: theme.styleTypes.primary.contrast,
-    paddingTop: 30,
-  },
-  headline: {
-    fontSize: 20,
-    marginBottom: 20,
-    marginTop: -27,
-  },
-  services: {
-    width: '100%',
-    maxHeight: '50vh',
-    overflowX: 'hidden',
-    overflowY: 'auto',
-  },
-  service: {
-    background: theme.styleTypes.primary.contrast,
-    color: theme.colorText,
-    borderRadius: 6,
-    padding: '3px 25px',
-    marginBottom: 10,
-    display: 'flex',
-    alignItems: 'center',
-    '&:last-child': {
-      marginBottom: 0,
-    },
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
-  activeService: {
-    background: `${theme.styleTypes.primary.accent} !important`,
-    color: theme.styleTypes.primary.contrast,
-    cursor: 'pointer',
-  },
-  serviceIcon: {
-    width: 50,
-    height: 50,
-    paddingRight: 20,
-    objectFit: 'contain',
-  },
-});
-
-class QuickSwitchModal extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-  };
-
-  state = {
-    selected: 0,
-    search: '',
-    wasPrevVisible: false,
-  };
-
-  ARROW_DOWN = 40;
-
-  ARROW_UP = 38;
-
-  ENTER = 13;
-
-  TAB = 9;
-
-  inputRef = createRef();
-
-  serviceElements = {};
-
-  constructor(props) {
-    super(props);
-
-    this._handleKeyDown = this._handleKeyDown.bind(this);
-    this._handleSearchUpdate = this._handleSearchUpdate.bind(this);
-    this._handleVisibilityChange = this._handleVisibilityChange.bind(this);
-    this.openService = this.openService.bind(this);
-
-    reaction(
-      () => ModalState.isModalVisible,
-      () => {
-        this._handleVisibilityChange();
-      },
-    );
-  }
-
-  // Add global keydown listener when component mounts
-  componentDidMount() {
-    document.addEventListener('keydown', this._handleKeyDown);
-  }
-
-  // Remove global keydown listener when component unmounts
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this._handleKeyDown);
-  }
-
-  // Get currently shown services
-  services() {
-    let services = [];
-    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 = services.filter(
-        service =>
-          service.name.toLowerCase().search(this.state.search.toLowerCase()) !==
-          -1,
-      );
-    } else if (this.props.stores.services.allDisplayed.length > 0) {
-      // Add the currently active service first
-      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);
-        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) {
-        if (!services.includes(service)) {
-          services.push(service);
-        }
-      }
-    }
-
-    return services;
-  }
-
-  openService(index) {
-    // Open service
-    const service = this.services()[index];
-    this.props.actions.service.setActive({ serviceId: service.id });
-
-    // Reset and close modal
-    this.setState({
-      selected: 0,
-      search: '',
-    });
-    this.close();
-  }
-
-  // Change the selected service
-  // factor should be -1 or 1
-  changeSelected(factor) {
-    this.setState(state => {
-      let newSelected = state.selected + factor;
-      const services = this.services().length;
-
-      // Roll around when on edge of list
-      if (state.selected < 1 && factor === -1) {
-        newSelected = services - 1;
-      } else if (state.selected >= services - 1 && factor === 1) {
-        newSelected = 0;
-      }
-
-      // Make sure new selection is visible
-      const serviceElement = this.serviceElements[newSelected];
-      if (serviceElement) {
-        serviceElement.scrollIntoViewIfNeeded(false);
-      }
-
-      return {
-        selected: newSelected,
-      };
-    });
-  }
-
-  // Handle global key presses to change the selection
-  _handleKeyDown(event) {
-    if (ModalState.isModalVisible) {
-      switch (event.keyCode) {
-        case this.ARROW_DOWN:
-          this.changeSelected(1);
-          break;
-        case this.TAB:
-          if (event.shiftKey) {
-            this.changeSelected(-1);
-          } else {
-            this.changeSelected(1);
-          }
-          break;
-        case this.ARROW_UP:
-          this.changeSelected(-1);
-          break;
-        case this.ENTER:
-          this.openService(this.state.selected);
-          break;
-        default:
-          break;
-      }
-    }
-  }
-
-  // Handle update of the search query
-  _handleSearchUpdate(evt) {
-    this.setState({
-      search: evt.target.value,
-    });
-  }
-
-  _handleVisibilityChange() {
-    const { isModalVisible } = ModalState;
-
-    if (isModalVisible && !this.state.wasPrevVisible) {
-      // Set focus back on current window if its in a service
-      // TODO: Find a way to gain back focus
-      getCurrentWindow().blurWebView();
-      getCurrentWindow().webContents.focus();
-
-      // The input "focus" attribute will only work on first modal open
-      // Manually add focus to the input element
-      // Wrapped inside timeout to let the modal render first
-      setTimeout(() => {
-        if (this.inputRef.current) {
-          this.inputRef.current.querySelectorAll('input')[0].focus();
-        }
-      }, 10);
-
-      this.setState({
-        wasPrevVisible: true,
-      });
-    } else if (!isModalVisible && this.state.wasPrevVisible) {
-      // Manually blur focus from the input element to prevent
-      // search query change when modal not visible
-      setTimeout(() => {
-        if (this.inputRef.current) {
-          this.inputRef.current.querySelectorAll('input')[0].blur();
-        }
-      }, 100);
-
-      this.setState({
-        wasPrevVisible: false,
-      });
-    }
-  }
-
-  // Close this modal
-  close() {
-    ModalState.isModalVisible = false;
-  }
-
-  render() {
-    const { isModalVisible } = ModalState;
-
-    const { openService } = this;
-
-    const { classes } = this.props;
-
-    const services = this.services();
-
-    const { intl } = this.props;
-
-    return (
-      <Modal
-        isOpen={isModalVisible}
-        className={`${classes.modal} quick-switch`}
-        shouldCloseOnOverlayClick
-        close={this.close.bind(this)}
-      >
-        <H1 className={classes.headline}>
-          {intl.formatMessage(messages.title)}
-        </H1>
-        <div ref={this.inputRef}>
-          <Input
-            placeholder={intl.formatMessage(messages.search)}
-            focus
-            value={this.state.search}
-            onChange={this._handleSearchUpdate}
-          />
-        </div>
-
-        <div className={classes.services}>
-          {services.map((service, index) => (
-            <div
-              className={`${classes.service} ${
-                this.state.selected === index
-                  ? `${classes.activeService} active`
-                  : ''
-              } service`}
-              onClick={() => openService(index)}
-              key={service.id}
-              ref={el => {
-                this.serviceElements[index] = el;
-              }}
-            >
-              <img
-                src={service.icon}
-                className={classes.serviceIcon}
-                alt={service.recipe.name}
-              />
-              <div>{service.name}</div>
-            </div>
-          ))}
-        </div>
-
-        <p>
-          <br />
-          {intl.formatMessage(messages.info)}
-        </p>
-      </Modal>
-    );
-  }
-}
-
-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)),
-  ),
-);