App+Settings: Make locale changes reactive between windows

This commit moves the locale relevant code to the settings' store module
and incorporates it with its current architecture.

I should clarify that this makes the value present in the `localStorage`
nonmeaningful, as that value is no longer being used in any way.

src/renderer/App.js

@@ -88,7 +88,6 @@ export default Vue.extend({
         this.grabHistory()
         this.grabAllPlaylists()
         this.checkThemeSettings()
-        await this.checkLocale()
 
         if (this.usingElectron) {
           console.log('User is using Electron')
@@ -110,35 +109,6 @@ export default Vue.extend({
     })
   },
   methods: {
-    checkLocale: async function () {
-      const locale = localStorage.getItem('locale')
-
-      if (locale === null || locale === 'system') {
-        const systemLocale = await this.getLocale()
-
-        const findLocale = Object.keys(this.$i18n.messages).find((locale) => {
-          const localeName = locale.replace('-', '_')
-          return localeName.includes(systemLocale.replace('-', '_'))
-        })
-
-        if (typeof findLocale !== 'undefined') {
-          this.$i18n.locale = findLocale
-          localStorage.setItem('locale', 'system')
-        } else {
-          this.$i18n.locale = 'en-US'
-          localStorage.setItem('locale', 'en-US')
-        }
-      } else {
-        this.$i18n.locale = locale
-      }
-      const payload = {
-        isDev: this.isDev,
-        locale: this.$i18n.locale
-      }
-
-      this.getRegionData(payload)
-    },
-
     checkThemeSettings: function () {
       let baseTheme = localStorage.getItem('baseTheme')
       let mainColor = localStorage.getItem('mainColor')
@@ -415,9 +385,7 @@ export default Vue.extend({
       'grabAllProfiles',
       'grabHistory',
       'grabAllPlaylists',
-      'getRegionData',
       'getYoutubeUrlInfo',
-      'getLocale',
       'getExternalPlayerCmdArgumentsData',
       'setUpListenerToSyncSettings'
     ])

src/renderer/components/general-settings/general-settings.js

@@ -23,7 +23,6 @@ export default Vue.extend({
       showInvidiousInstances: false,
       instanceNames: [],
       instanceValues: [],
-      currentLocale: '',
       backendValues: [
         'invidious',
         'local'
@@ -93,6 +92,9 @@ export default Vue.extend({
     thumbnailPreference: function () {
       return this.$store.getters.getThumbnailPreference
     },
+    currentLocale: function () {
+      return this.$store.getters.getCurrentLocale
+    },
     regionNames: function () {
       return this.$store.getters.getRegionNames
     },
@@ -173,8 +175,6 @@ export default Vue.extend({
     })
 
     this.updateInvidiousInstanceBounce = debounce(this.updateInvidiousInstance, 500)
-
-    this.currentLocale = localStorage.getItem('locale')
   },
   beforeDestroy: function () {
     if (this.invidiousInstance === '') {
@@ -196,41 +196,6 @@ export default Vue.extend({
       }
     },
 
-    updateLocale: async function (locale) {
-      if (locale === 'system') {
-        const systemLocale = await this.getLocale()
-
-        const findLocale = Object.keys(this.$i18n.messages).find((locale) => {
-          const localeName = locale.replace('-', '_')
-          return localeName.includes(systemLocale.replace('-', '_'))
-        })
-
-        if (typeof findLocale !== 'undefined') {
-          this.$i18n.locale = findLocale
-          this.currentLocale = 'system'
-          localStorage.setItem('locale', 'system')
-        } else {
-          // Translating this string isn't needed because the user will always see it in English
-          this.showToast({
-            message: 'Locale not found, defaulting to English (US)'
-          })
-          this.$i18n.locale = 'en-US'
-          this.currentLocale = 'en-US'
-          localStorage.setItem('locale', 'en-US')
-        }
-      } else {
-        this.$i18n.locale = locale
-        this.currentLocale = locale
-        localStorage.setItem('locale', locale)
-      }
-
-      const payload = {
-        isDev: this.isDev,
-        locale: this.currentLocale
-      }
-      this.getRegionData(payload)
-    },
-
     ...mapActions([
       'showToast',
       'updateEnableSearchSuggestions',
@@ -245,8 +210,7 @@ export default Vue.extend({
       'updateThumbnailPreference',
       'updateInvidiousInstance',
       'updateForceLocalBackendForLegacy',
-      'getRegionData',
-      'getLocale'
+      'updateCurrentLocale'
     ])
   }
 })

src/renderer/components/general-settings/general-settings.vue

@@ -75,7 +75,7 @@
         :value="currentLocale"
         :select-names="localeNames"
         :select-values="localeOptions"
-        @change="updateLocale"
+        @change="updateCurrentLocale"
       />
       <ft-select
         :placeholder="$t('Settings.General Settings.Region for Trending')"

src/renderer/store/modules/settings.js

@@ -1,4 +1,5 @@
 import { settingsDb } from '../datastores'
+import i18n from '../../i18n/index'
 
 /*
  * Due to the complexity of the settings module in FreeTube, a more
@@ -215,6 +216,40 @@ const state = {
 }
 
 const stateWithSideEffects = {
+  currentLocale: {
+    defaultValue: 'en-US',
+    sideEffectsHandler: async function ({ dispatch }, value) {
+      const defaultLocale = 'en-US'
+
+      let targetLocale = value
+      if (value === 'system') {
+        const systemLocale = await dispatch('getSystemLocale')
+
+        targetLocale = Object.keys(i18n.messages).find((locale) => {
+          const localeName = locale.replace('-', '_')
+          return localeName.includes(systemLocale.replace('-', '_'))
+        })
+
+        // Go back to default value if locale is unavailable
+        if (!targetLocale) {
+          targetLocale = defaultLocale
+          // Translating this string isn't necessary
+          // because the user will always see it in the default locale
+          // (in this case, English (US))
+          dispatch('showToast',
+            { message: `Locale not found, defaulting to ${defaultLocale}` }
+          )
+        }
+      }
+
+      i18n.locale = targetLocale
+      dispatch('getRegionData', {
+        isDev: process.env.NODE_ENV === 'development',
+        locale: targetLocale
+      })
+    }
+  },
+
   defaultVolume: {
     defaultValue: 1,
     sideEffectsHandler: (_, value) => {