chore(settings-plugin): refactor to functional component

cerebroapp · Sep 17, 2022 · 8dfc73c · 8dfc73c
1 parent 4f9669a
commit 8dfc73c
Showing 1 changed file with 70 additions and 89 deletions.
diff --git a/app/plugins/core/settings/Settings/index.js b/app/plugins/core/settings/Settings/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { FormComponents } from '@cerebroapp/cerebro-ui'
 import loadThemes from 'lib/loadThemes'
@@ -11,98 +11,79 @@ const {
   Select, Checkbox, Wrapper, Text
 } = FormComponents
 
-class Settings extends Component {
-  constructor(props) {
-    super(props)
-    const { get } = this.props
-    this.state = {
-      hotkey: get('hotkey'),
-      showInTray: get('showInTray'),
-      country: get('country'),
-      theme: get('theme'),
-      proxy: get('proxy'),
-      developerMode: get('developerMode'),
-      cleanOnHide: get('cleanOnHide'),
-      pluginsSettings: get('plugins'),
-      trackingEnabled: get('trackingEnabled'),
-      crashreportingEnabled: get('crashreportingEnabled'),
-      openAtLogin: get('openAtLogin')
-    }
-    this.changeConfig = this.changeConfig.bind(this)
-  }
+function Settings({ get, set }) {
+  const [state, setState] = useState(() => ({
+    hotkey: get('hotkey'),
+    showInTray: get('showInTray'),
+    country: get('country'),
+    theme: get('theme'),
+    proxy: get('proxy'),
+    developerMode: get('developerMode'),
+    cleanOnHide: get('cleanOnHide'),
+    pluginsSettings: get('plugins'),
+    crashreportingEnabled: get('crashreportingEnabled'),
+    openAtLogin: get('openAtLogin')
+  }))
 
-  changeConfig(key, value) {
-    this.props.set(key, value)
-    this.setState({
-      [key]: value
-    })
+  const changeConfig = (key, value) => {
+    set(key, value)
+    setState((prevState) => ({ ...prevState, [key]: value }))
   }
 
-  render() {
-    const {
-      hotkey, showInTray, country, theme, proxy, developerMode, cleanOnHide, openAtLogin,
-      trackingEnabled, crashreportingEnabled
-    } = this.state
-
-    return (
-      <div className={styles.settings}>
-        <Wrapper label="Hotkey" description="Type your global shortcut for Cerebro in this input">
-          <Hotkey
-            hotkey={hotkey}
-            onChange={(key) => this.changeConfig('hotkey', key)}
-          />
-        </Wrapper>
-        <Select
-          label="Country"
-          description="Choose your country so Cerebro can better choose currency, language, etc."
-          value={country}
-          options={countries}
-          onChange={(value) => this.changeConfig('country', value)}
-        />
-        <Select
-          label="Theme"
-          value={theme}
-          options={loadThemes()}
-          onChange={(value) => this.changeConfig('theme', value)}
-        />
-        <Text
-          label="Proxy"
-          value={proxy}
-          onChange={(value) => this.changeConfig('proxy', value)}
-        />
-        <Checkbox
-          label="Open at login"
-          value={openAtLogin}
-          onChange={(value) => this.changeConfig('openAtLogin', value)}
-        />
-        <Checkbox
-          label="Show in menu bar"
-          value={showInTray}
-          onChange={(value) => this.changeConfig('showInTray', value)}
+  return (
+    <div className={styles.settings}>
+      <Wrapper label="Hotkey" description="Type your global shortcut for Cerebro in this input">
+        <Hotkey
+          hotkey={state.hotkey}
+          onChange={(key) => changeConfig('hotkey', key)}
         />
-        <Checkbox
-          label="Developer Mode"
-          value={developerMode}
-          onChange={(value) => this.changeConfig('developerMode', value)}
-        />
-        <Checkbox
-          label="Clean results on hide"
-          value={cleanOnHide}
-          onChange={(value) => this.changeConfig('cleanOnHide', value)}
-        />
-        <Checkbox
-          label="Send anonymous statistics (requires restart)"
-          value={trackingEnabled}
-          onChange={(value) => this.changeConfig('trackingEnabled', value)}
-        />
-        <Checkbox
-          label="Send automatic crash reports (requires restart)"
-          value={crashreportingEnabled}
-          onChange={(value) => this.changeConfig('crashreportingEnabled', value)}
-        />
-      </div>
-    )
-  }
+      </Wrapper>
+      <Select
+        label="Country"
+        description="Choose your country so Cerebro can better choose currency, language, etc."
+        value={state.country}
+        options={countries}
+        onChange={(value) => changeConfig('country', value)}
+      />
+      <Select
+        label="Theme"
+        value={state.theme}
+        options={loadThemes()}
+        onChange={(value) => changeConfig('theme', value)}
+      />
+      <Text
+        type="text"
+        label="Proxy"
+        value={state.proxy}
+        onChange={(value) => changeConfig('proxy', value)}
+      />
+      <Checkbox
+        label="Open at login"
+        value={state.openAtLogin}
+        onChange={(value) => changeConfig('openAtLogin', value)}
+      />
+      <Checkbox
+        label="Show in menu bar"
+        value={state.showInTray}
+        onChange={(value) => changeConfig('showInTray', value)}
+      />
+      <Checkbox
+        label="Developer Mode"
+        value={state.developerMode}
+        onChange={(value) => changeConfig('developerMode', value)}
+      />
+      <Checkbox
+        label="Clean results on hide"
+        value={state.cleanOnHide}
+        onChange={(value) => changeConfig('cleanOnHide', value)}
+      />
+      <Checkbox
+        label="Send automatic crash reports (requires restart)"
+        value={state.crashreportingEnabled}
+        onChange={(value) => changeConfig('crashreportingEnabled', value)}
+      />
+    </div>
+  )
 }
 
 Settings.propTypes = {