refactor: split quicklinks, move features to functional components

src/features/misc/sections/Language.jsx

@@ -1,5 +1,5 @@
 import variables from 'config/variables';
-import { PureComponent } from 'react';
+import { useState, useEffect, useRef } from 'react';
 
 import { MdOutlineOpenInNew } from 'react-icons/md';
 
@@ -7,32 +7,28 @@ import { Radio } from 'components/Form/Settings';
 
 import languages from '@/i18n/languages.json';
 
-class LanguageOptions extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      quoteLanguages: [
-        {
-          name: variables.getMessage('modals.main.loading'),
-          value: 'loading',
-        },
-      ],
-    };
-    this.controller = new AbortController();
-  }
+const LanguageOptions = () => {
+  const [quoteLanguages, setQuoteLanguages] = useState([
+    {
+      name: variables.getMessage('modals.main.loading'),
+      value: 'loading',
+    },
+  ]);
 
-  async getquoteLanguages() {
+  const controllerRef = useRef(new AbortController());
+
+  const getquoteLanguages = async () => {
     const data = await (
       await fetch(variables.constants.API_URL + '/quotes/languages', {
-        signal: this.controller.signal,
+        signal: controllerRef.current.signal,
       })
     ).json();
 
-    if (this.controller.signal.aborted === true) {
+    if (controllerRef.current.signal.aborted === true) {
       return;
     }
 
-    const quoteLanguages = data.map((language) => {
+    const fetchedQuoteLanguages = data.map((language) => {
       return {
         name: languages.find((l) => l.value === language.name)
           ? languages.find((l) => l.value === language.name).name
@@ -41,69 +37,64 @@ class LanguageOptions extends PureComponent {
       };
     });
 
-    this.setState({
-      quoteLanguages,
-    });
-  }
+    setQuoteLanguages(fetchedQuoteLanguages);
+  };
 
-  componentDidMount() {
+  useEffect(() => {
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
-      return this.setState({
-        quoteLanguages: [
-          {
-            name: variables.getMessage('modals.main.marketplace.offline.description'),
-            value: 'loading',
-          },
-        ],
-      });
+      setQuoteLanguages([
+        {
+          name: variables.getMessage('modals.main.marketplace.offline.description'),
+          value: 'loading',
+        },
+      ]);
+      return;
     }
 
-    this.getquoteLanguages();
-  }
+    getquoteLanguages();
 
-  componentWillUnmount() {
-    // stop making requests
-    this.controller.abort();
-  }
+    return () => {
+      // stop making requests
+      controllerRef.current.abort();
+    };
+  }, []);
 
-  render() {
-    return (
-      <>
-        <div className="modalHeader">
-          <span className="mainTitle">
-            {variables.getMessage('modals.main.settings.sections.language.title')}
-          </span>
-          <div className="headerActions">
-            <a
-              className="link"
-              href="https://hosted.weblate.org/new-lang/mue/mue-tab/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Add translation
-              <MdOutlineOpenInNew />
-            </a>
-          </div>
-        </div>
-        <div className="languageSettings">
-          <Radio name="language" options={languages} element=".other" />
-        </div>
+  return (
+    <>
+      <div className="modalHeader">
         <span className="mainTitle">
-          {variables.getMessage('modals.main.settings.sections.language.quote')}
+          {variables.getMessage('modals.main.settings.sections.language.title')}
         </span>
-        <div className="languageSettings">
-          <Radio
-            name="quoteLanguage"
-            options={this.state.quoteLanguages.map((language) => {
-              return { name: language.name, value: language.value.name };
-            })}
-            defaultValue={this.state.quoteLanguages[0].name}
-            category="quote"
-          />
+        <div className="headerActions">
+          <a
+            className="link"
+            href="https://hosted.weblate.org/new-lang/mue/mue-tab/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Add translation
+            <MdOutlineOpenInNew />
+          </a>
         </div>
-      </>
-    );
-  }
-}
+      </div>
+      <div className="languageSettings">
+        <Radio name="language" options={languages} element=".other" />
+      </div>
+      <span className="mainTitle">
+        {variables.getMessage('modals.main.settings.sections.language.quote')}
+      </span>
+      <div className="languageSettings">
+        <Radio
+          name="quoteLanguage"
+          options={quoteLanguages.map((language) => {
+            return { name: language.name, value: language.value.name };
+          })}
+          defaultValue={quoteLanguages[0].name}
+          category="quote"
+        />
+      </div>
+    </>
+  );
+};
 
 export { LanguageOptions as default, LanguageOptions };