refactor: split quicklinks, move features to functional components

src/components/Form/Settings/Dropdown/Dropdown.jsx

@@ -1,78 +1,72 @@
 import variables from 'config/variables';
-import { PureComponent, createRef } from 'react';
+import { memo, useState, useCallback, useRef } from 'react';
 import { InputLabel, MenuItem, FormControl, Select } from '@mui/material';
 
 import EventBus from 'utils/eventbus';
 
-class Dropdown extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: localStorage.getItem(this.props.name) || this.props.items[0].value,
-      title: '',
-    };
-    this.dropdown = createRef();
-  }
+const Dropdown = memo((props) => {
+  const [value, setValue] = useState(
+    localStorage.getItem(props.name) || props.items[0].value,
+  );
+  const dropdown = useRef();
 
-  onChange = (e) => {
-    const { value } = e.target;
+  const onChange = useCallback((e) => {
+    const newValue = e.target.value;
 
-    if (value === variables.getMessage('modals.main.loading')) {
+    if (newValue === variables.getMessage('modals.main.loading')) {
       return;
     }
 
-    variables.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
+    variables.stats.postEvent('setting', `${props.name} from ${value} to ${newValue}`);
 
-    this.setState({
-      value,
-    });
+    setValue(newValue);
 
-    if (!this.props.noSetting) {
-      localStorage.setItem(this.props.name, value);
-      localStorage.setItem(this.props.name2, this.props.value2);
+    if (!props.noSetting) {
+      localStorage.setItem(props.name, newValue);
+      localStorage.setItem(props.name2, props.value2);
     }
 
-    if (this.props.onChange) {
-      this.props.onChange(value);
+    if (props.onChange) {
+      props.onChange(newValue);
     }
 
-    if (this.props.element) {
-      if (!document.querySelector(this.props.element)) {
+    if (props.element) {
+      if (!document.querySelector(props.element)) {
         document.querySelector('.reminder-info').style.display = 'flex';
         return localStorage.setItem('showReminder', true);
       }
     }
 
-    EventBus.emit('refresh', this.props.category);
-  };
+    EventBus.emit('refresh', props.category);
+  }, [value, props]);
 
-  render() {
-    const id = 'dropdown' + this.props.name;
-    const label = this.props.label || '';
+  const id = 'dropdown' + props.name;
+  const label = props.label || '';
 
-    return (
-      <FormControl fullWidth className={id}>
-        <InputLabel id={id}>{label}</InputLabel>
-        <Select
-          labelId={id}
-          id={this.props.name}
-          value={this.state.value}
-          label={label}
-          onChange={this.onChange}
-          ref={this.dropdown}
-          key={id}
-        >
-          {this.props.items.map((item) =>
-            item !== null ? (
-              <MenuItem key={id + item.value} value={item.value}>
-                {item.text}
-              </MenuItem>
-            ) : null,
-          )}
-        </Select>
-      </FormControl>
-    );
-  }
-}
+  return (
+    <FormControl fullWidth className={id}>
+      <InputLabel id={id}>{label}</InputLabel>
+      <Select
+        labelId={id}
+        id={props.name}
+        value={value}
+        label={label}
+        onChange={onChange}
+        ref={dropdown}
+        key={id}
+      >
+        {props.items.map((item) =>
+          item !== null ? (
+            <MenuItem key={id + item.value} value={item.value}>
+              {item.text}
+            </MenuItem>
+          ) : null,
+        )}
+      </Select>
+    </FormControl>
+  );
+});
+
+Dropdown.displayName = 'Dropdown';
 
 export { Dropdown as default, Dropdown };