refactor: Changes to translations

src/features/marketplace/views/ItemPage.jsx

@@ -32,7 +32,7 @@ const ItemPage = () => {
   const { selectedItem } = useMarketData();
 
   const locale = localStorage.getItem('language');
-  const shortLocale = locale.includes('_') ? locale.split('_')[0] : locale;
+  const shortLocale = locale.includes('-') ? locale.split('-')[0] : locale;
   let languageNames = new Intl.DisplayNames([shortLocale], { type: 'language' });
 
   let dateObj, formattedDate;

src/features/marketplace/views/oldItemPage.jsx

@@ -128,7 +128,7 @@ class ItemPage extends PureComponent {
 
   render() {
     const locale = localStorage.getItem('language');
-    const shortLocale = locale.includes('_') ? locale.split('_')[0] : locale;
+    const shortLocale = locale.includes('-') ? locale.split('-')[0] : locale;
     let languageNames = new Intl.DisplayNames([shortLocale], { type: 'language' });
 
     const convertedType = (() => {

src/features/misc/sections/Language.jsx

@@ -3,8 +3,19 @@ import { useState, useEffect } from 'react';
 
 import { MdOutlineOpenInNew } from 'react-icons/md';
 import { Radio } from 'components/Form/Settings';
+import { languages } from 'lib/i18n';
 
-import languages from '@/i18n/languages.json';
+const options = languages.map(id => {
+  const native = new Intl.DisplayNames([id], { type: 'language' });
+  // const current = new Intl.DisplayNames([variables.locale_id], { type: 'language' });
+  const current = new Intl.DisplayNames([localStorage.getItem('language')], { type: 'language' });
+  return {
+    name: native.of(id),
+    subname: current.of(id),
+    value: id,
+  };
+})
+console.log(options)
 
 function LanguageOptions() {
   const [quoteLanguages, setQuoteLanguages] = useState([
@@ -20,9 +31,7 @@ function LanguageOptions() {
 
       const quoteLanguages = data.map((language) => {
         return {
-          name: languages.find((l) => l.value === language.name)
-            ? languages.find((l) => l.value === language.name).name
-            : 'English',
+          name: new Intl.DisplayNames([variables.locale_id], { type: 'language' }).of(language),
           value: language,
         };
       });
@@ -52,7 +61,7 @@ function LanguageOptions() {
         </div>
       </div>
       <div className="languageSettings">
-        <Radio name="language" options={languages} element=".other" />
+        <Radio name="language" options={options} element=".other" />
       </div>
       <span className="mainTitle">
         {variables.getMessage('settings:sections.language.quote')}

src/features/quote/Quote.jsx

@@ -276,9 +276,9 @@ class Quote extends PureComponent {
         }
 
         const getAPIQuoteData = async () => {
-          const quoteLanguage = localStorage.getItem('quoteLanguage');
+          const quoteLanguage = localStorage.getItem('quoteLanguage') || 'en';
           const data = await (
-            await fetch(`${variables.constants.API_URL}/quotes/random?language=${quoteLanguage || 'en'}`)
+            await fetch(`${variables.constants.API_URL}/quotes/random?language=${quoteLanguage}`)
           ).json();
           // If we hit the ratelimit, we fall back to local quotes
           if (data.statusCode === 429) {

src/features/time/Date.jsx

@@ -94,7 +94,7 @@ const DateWidget = () => {
       setDate(format);
     } else {
       // Long date
-      const lang = variables.locale_id.split('_')[0];
+      const lang = variables.locale_id.split('-')[0];
 
       const datenth =
         localStorage.getItem('datenth') === 'true'

src/features/welcome/components/Sections/ChooseLanguage.jsx

@@ -1,10 +1,22 @@
 import variables from 'config/variables';
 import { MdOutlineOpenInNew } from 'react-icons/md';
-import languages from '@/i18n/languages.json';
+import { languages } from 'lib/i18n';
 
 import { Radio } from 'components/Form/Settings';
 import { Header, Content } from '../Layout';
 
+const options = languages.map(id => {
+  const native = new Intl.DisplayNames([id], { type: 'language' });
+  // const current = new Intl.DisplayNames([variables.locale_id], { type: 'language' });
+  // const current = new Intl.DisplayNames([localStorage.getItem('language')], { type: 'language' });
+  const current = new Intl.DisplayNames(['en'], { type: 'language' });
+  return {
+    name: native.of(id),
+    subname: current.of(id),
+    value: id,
+  };
+})
+
 function ChooseLanguage() {
   return (
     <Content>
@@ -31,7 +43,7 @@ function ChooseLanguage() {
         <MdOutlineOpenInNew />
       </a>
       <div className="languageSettings">
-        <Radio name="language" options={languages} category="welcomeLanguage" />
+        <Radio name="language" options={options} category="welcomeLanguage" />
       </div>
     </Content>
   );

src/features/welcome/components/Sections/Final.jsx

@@ -1,9 +1,9 @@
 import variables from 'config/variables';
-import languages from '@/i18n/languages.json';
 import { Header, Content } from '../Layout';
 import defaults from 'config/default';
 
 function Final(props) {
+  const language = localStorage.getItem('language') || defaults.language;
   return (
     <Content>
       <Header
@@ -18,7 +18,7 @@ function Final(props) {
         <div className="toggle" onClick={() => props.switchTab(1)}>
           <span>
             {variables.getMessage('settings:sections.language.title')}:{' '}
-            {languages.find((i) => i.value === localStorage.getItem('language') || defaults.language).name}
+            {new Intl.DisplayNames([language], { type: 'language' }).of(language)}
           </span>
         </div>
         <div className="toggle" onClick={() => props.switchTab(3)}>