fix(i10n): language dropdown and locale load at mount (#419)

Co-authored-by: dq18 <>
openfoodfacts · Mar 8, 2024 · 6244e22 · 6244e22
1 parent df1fbf4
commit 6244e22
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/main.js b/src/main.js
@@ -7,7 +7,7 @@ import App from './App.vue'
 import router from './router.js'
 import { vuetify } from './plugins/vuetify.js'
 import i18n from './i18n'
-
+import localeManager from './i18n/localeManager.js'
 const app = createApp(App)
 
 const pinia = createPinia()
@@ -21,7 +21,8 @@ app.use(VueMatomo, {
   host: 'https://analytics.openfoodfacts.org',
   siteId: 13,
 })
-
+const locale = localeManager.guessDefaultLocale()
+localeManager.changeLanguage(locale)
 app.mount('#app')
 
 // Matomo

diff --git a/src/views/UserSettings.vue b/src/views/UserSettings.vue
@@ -100,16 +100,17 @@ export default {
         // Update the language list to show the previously selected language first then the selected country languages and the rest of the languages
         let newLanguageList = this.languageList.slice()
         if (selectedCountry) {
+          const currentLanguage = this.languageList.find(lang => lang.code === this.userSettingsForm.selectedLanguage)
           // get the languages of the selected country minus the selected language (if it exists in the country languages list)
           const countryLanguagesList = selectedCountry.languages.map(code => {
             const language = languageData.find(lang => lang.code === code || lang.code === `${code}_${selectedCountry.code}`)
             return language ? language : null
-          }).filter(language => language !== null && language.code !== this.userSettingsForm.selectedLanguage.code)
+          }).filter(language => language !== null && language.code !== currentLanguage.code)
           // Update the language list to show the current selected language first then the selected country languages and the rest of the languages
           newLanguageList = [
-            ...[this.userSettingsForm.selectedLanguage],
+            ...[currentLanguage],
             ...countryLanguagesList,
-            ...newLanguageList.filter(language => !selectedCountry.languages.includes(language.code) && language.code !== this.userSettingsForm.selectedLanguage.code &&
+            ...newLanguageList.filter(language => !selectedCountry.languages.includes(language.code) && language.code !== currentLanguage.code &&
               !countryLanguagesList.includes(language))
           ].filter(Boolean); // Remove any null or undefined values 
           this.languageList = newLanguageList
@@ -139,7 +140,7 @@ export default {
     initUserSettingsForm() {
       this.userSettingsForm.currency = this.appStore.user.last_currency_used
       this.userSettingsForm.selectedLanguage = this.languageList.find(lang => lang.code === localeManager.guessDefaultLocale()).code
-      this.userSettingsForm.selectedCountry = countryData.find(country => country.code === this.appStore.user.country).code  
+      this.userSettingsForm.selectedCountry = countryData.find(country => country.code === this.appStore.user.country).code
     },
     async updateSettings() {
       await localeManager.changeLanguage(this.userSettingsForm.selectedLanguage)