refactor: Move misc options to different folder

2026-07-27 18:51:05 +02:00 · 2024-03-01 21:24:42 +00:00
parent 038185b656
commit 603a6c5acc
16 changed files with 62 additions and 31 deletions
--- a/src/features/misc/sections/Language.jsx
+++ b/src/features/misc/sections/Language.jsx
@@ -0,0 +1,113 @@
+import variables from 'config/variables';
+import { PureComponent } from 'react';
+
+import { MdOutlineOpenInNew } from 'react-icons/md';
+
+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();
+  }
+
+  async getquoteLanguages() {
+    const data = await (
+      await fetch(variables.constants.API_URL + '/quotes/languages', {
+        signal: this.controller.signal,
+      })
+    ).json();
+
+    if (this.controller.signal.aborted === true) {
+      return;
+    }
+
+    const quoteLanguages = data.map((language) => {
+      return {
+        name: languages.find((l) => l.value === language.name)
+          ? languages.find((l) => l.value === language.name).name
+          : 'English',
+        value: language,
+      };
+    });
+
+    this.setState({
+      quoteLanguages,
+    });
+  }
+
+  componentDidMount() {
+    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
+      return this.setState({
+        quoteLanguages: [
+          {
+            name: variables.getMessage('modals.main.marketplace.offline.description'),
+            value: 'loading',
+          },
+        ],
+      });
+    }
+
+    this.getquoteLanguages();
+  }
+
+  componentWillUnmount() {
+    // stop making requests
+    this.controller.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="" target="_blank" rel="noopener noreferrer">
+              Improve
+              <MdOutlineOpenInNew />
+    </a>*/}
+            <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={this.state.quoteLanguages.map((language) => {
+              return { name: language.name, value: language.value.name };
+            })}
+            defaultValue={this.state.quoteLanguages[0].name}
+            category="quote"
+          />
+        </div>
+      </>
+    );
+  }
+}
+
+export { LanguageOptions as default, LanguageOptions };