chore: refactor to functional components

Author: dubisdev

app/main/components/ResultsList/Row/index.js

@@ -1,48 +1,24 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { SmartIcon } from '@cerebroapp/cerebro-ui'
 import styles from './styles.module.css'
 
-class Row extends Component {
-  classNames() {
-    return [
-      styles.row,
-      this.props.selected ? styles.selected : null
-    ].join(' ')
-  }
+function Row({
+  selected, icon, title, onSelect, onMouseMove, subtitle
+}) {
+  const classNames = [styles.row, selected ? styles.selected : null].join(' ')
 
-  renderIcon() {
-    const { icon } = this.props
-    if (!icon) return null
-    return <SmartIcon path={icon} className={styles.icon} />
-  }
+  return (
+    <div className={classNames} onClick={onSelect} onMouseMove={onMouseMove}>
+      {icon && <SmartIcon path={icon} className={styles.icon} />}
 
-  render() {
-    const {
-      title,
-      onSelect,
-      onMouseMove,
-      subtitle
-    } = this.props
+      <div className={styles.details}>
+        {title && <div className={styles.title}>{title}</div>}
 
-    return (
-      <div className={this.classNames()} onClick={onSelect} onMouseMove={onMouseMove}>
-        {this.renderIcon()}
-        <div className={styles.details}>
-          {title && (
-          <div className={styles.title}>
-            {` ${title} `}
-          </div>
-          )}
-          {subtitle && (
-          <div className={styles.subtitle}>
-            {` ${subtitle} `}
-          </div>
-          )}
-        </div>
+        {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 Row.propTypes = {

app/plugins/core/settings/Settings/Hotkey.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './styles.module.css'
 
@@ -102,42 +102,38 @@ const charCodeToSign = ({ keyCode, shiftKey }) => {
   return String.fromCharCode(code)
 }
 
-class Hotkey extends Component {
-  onKeyDown(event) {
+function Hotkey({ hotkey, onChange }) {
+  const onKeyDown = (event) => {
     if (!event.ctrlKey && !event.altKey && !event.metaKey) {
       // Do not allow to set global shorcut without modifier keys
       // At least one of alt, cmd or ctrl is required
       return
     }
     event.preventDefault()
     event.stopPropagation()
+
     const key = charCodeToSign(event)
-    if (!key) {
-      return
-    }
+    if (!key) return
     const keys = []
+
     if (event.ctrlKey) keys.push('Control')
     if (event.altKey) keys.push('Alt')
     if (event.shiftKey) keys.push('Shift')
     if (event.metaKey) keys.push('Command')
     keys.push(key)
-    this.props.onChange(keys.join('+'))
-  }
-
-  render() {
-    const { hotkey } = this.props
-    const keys = hotkey.split('+').map(keyToSign).join(osKeyDelimiter)
-    return (
-      <div>
-        <input
-          className={styles.input}
-          type="text"
-          value={keys}
-          onKeyDown={this.onKeyDown.bind(this)}
-        />
-      </div>
-    )
+    onChange(keys.join('+'))
   }
+  const keys = hotkey.split('+').map(keyToSign).join(osKeyDelimiter)
+  return (
+    <div>
+      <input
+        className={styles.input}
+        type="text"
+        value={keys}
+        onKeyDown={onKeyDown}
+      />
+    </div>
+  )
 }
 
 Hotkey.propTypes = {