diff --git a/src/components/Form/Settings/Radio/Radio.jsx b/src/components/Form/Settings/Radio/Radio.jsx index 99dfae8b..a06bf806 100644 --- a/src/components/Form/Settings/Radio/Radio.jsx +++ b/src/components/Form/Settings/Radio/Radio.jsx @@ -15,9 +15,10 @@ function Radio(props) { if (props.name === 'language') { // old tab name - if (localStorage.getItem('tabName') === variables.getMessage('tabname')) { - localStorage.setItem('tabName', translations[value].tabname); - } + // TODO: was this important? + // if (localStorage.getItem('tabName') === variables.getMessage('tabname')) { + // localStorage.setItem('tabName', translations[value].tabname); + // } } localStorage.setItem(props.name, value); @@ -60,9 +61,9 @@ function Radio(props) {

{option.name}

-
10%
+
{option.subname}
-
sus
+
10%
diff --git a/src/features/marketplace/views/ItemPage.jsx b/src/features/marketplace/views/ItemPage.jsx index 8f0b6bcd..278a805f 100644 --- a/src/features/marketplace/views/ItemPage.jsx +++ b/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; diff --git a/src/features/marketplace/views/oldItemPage.jsx b/src/features/marketplace/views/oldItemPage.jsx index 27c67ec6..96e72668 100644 --- a/src/features/marketplace/views/oldItemPage.jsx +++ b/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 = (() => { diff --git a/src/features/misc/sections/Language.jsx b/src/features/misc/sections/Language.jsx index 9981a128..cd8ab340 100644 --- a/src/features/misc/sections/Language.jsx +++ b/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() {
- +
{variables.getMessage('settings:sections.language.quote')} diff --git a/src/features/quote/Quote.jsx b/src/features/quote/Quote.jsx index 054f7dbf..f10c0248 100644 --- a/src/features/quote/Quote.jsx +++ b/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) { diff --git a/src/features/time/Date.jsx b/src/features/time/Date.jsx index c5119143..31b95308 100644 --- a/src/features/time/Date.jsx +++ b/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' diff --git a/src/features/welcome/components/Sections/ChooseLanguage.jsx b/src/features/welcome/components/Sections/ChooseLanguage.jsx index 91d14c17..9758c975 100644 --- a/src/features/welcome/components/Sections/ChooseLanguage.jsx +++ b/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 ( @@ -31,7 +43,7 @@ function ChooseLanguage() {
- +
); diff --git a/src/features/welcome/components/Sections/Final.jsx b/src/features/welcome/components/Sections/Final.jsx index da7d793c..2a248400 100644 --- a/src/features/welcome/components/Sections/Final.jsx +++ b/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 (
props.switchTab(1)}> {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)}
props.switchTab(3)}> diff --git a/src/i18n/fr/main.yml b/src/i18n/fr/main.yml new file mode 100644 index 00000000..e69de29b diff --git a/src/index.jsx b/src/index.jsx index 6e575a22..bc010bed 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -12,10 +12,14 @@ import './scss/index.scss'; // the toast css is based on default so we need to import it import 'react-toastify/dist/ReactToastify.min.css'; -import { createTranslator } from 'lib/translations'; +import { createTranslator } from 'lib/i18n'; -const locale_id = localStorage.getItem('language')?.replace('_', '-') || defaults.language; -console.log(locale_id) +let locale_id = localStorage.getItem('language'); + +if (locale_id?.indexOf('_')) { + localStorage.setItem('language', locale_id.replace('_', '-')); +} +locale_id ||= defaults.language; const t = await createTranslator(locale_id); variables.locale_id = locale_id; document.documentElement.lang = locale_id; diff --git a/src/lib/translations.js b/src/lib/i18n.js similarity index 81% rename from src/lib/translations.js rename to src/lib/i18n.js index cb20fa81..eeff86a7 100644 --- a/src/lib/translations.js +++ b/src/lib/i18n.js @@ -3,7 +3,14 @@ import { I18nLite } from '@eartharoid/i18n'; const importJSON = (...modules) => ([modules[0].locale_id, [].concat(...modules.map(mod => mod.json))]); -export const languages = Object.keys(import.meta.glob('i18n/**/*.yml')); +export const languages = Object + .keys(import.meta.glob('i18n/**/main.yml')) + .map(path => { + const parts = path.split('/'); + const id = parts[parts.length - 2]; + return id; + }); + /** * Initialise the i18n object. * The i18n object is then returned.