Merge branch 'fix/lang-switch' into 'develop'

fix warning + fix lang switcher

See merge request geovisio/website!141

src/App.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import Header from '@/components/Header.vue'
-import Footer from '@/components/Footer.vue'
 import { RouterView } from 'vue-router'
 import { authConfig, isAuth } from './composables/auth'
 const { authConf } = authConfig()
 const { isLogged } = isAuth()
+import Header from '@/components/Header.vue'
+import Footer from '@/components/Footer.vue'
 
 let focusMap = ref<string>('focus-map')
-
 function setFocusMap(value: string) {
   focusMap.value = value
 }

src/components/WebsiteViewer.vue

@@ -4,8 +4,9 @@
 
 <script setup lang="ts">
 import axios from 'axios'
-import { onMounted, onUnmounted, ref, watch, computed } from 'vue'
+import { onMounted, onUnmounted, ref, computed } from 'vue'
 import { useSequenceStore } from '@/store/sequence'
+import { useCookies } from 'vue3-cookies'
 import { Viewer, StandaloneMap, Editor } from 'geovisio'
 import { createUrlLink, manageSlashUrl, getEnv } from '@/utils'
 import { isAuth } from '../composables/auth'
@@ -24,8 +25,9 @@ import type {
   ParamsEditorStandaloneInterface
 } from '@/views/interfaces/common'
 const sequenceStore = useSequenceStore()
-const { t, locale } = useI18n()
 const { isLogged } = isAuth()
+const { t, locale } = useI18n()
+const { cookies } = useCookies()
 let mapIsLoaded = ref<boolean>(false)
 let viewer = ref()
 const props = defineProps({
@@ -90,11 +92,6 @@ function createViewerButton(link: HTMLDivElement): void {
     }
   )
 }
-watch(locale, () => {
-  const viewerEl = document.getElementById('viewer')
-  if (viewerEl) viewerEl.innerHTML = ''
-  initViewer()
-})
 function setupViewer(params: ParamsViewerInterface): void {
   const maxZoom = getEnv('VITE_MAX_ZOOM')
   const zoom = getEnv('VITE_ZOOM')

src/components/header/LangSwitcher.vue

@@ -19,21 +19,31 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { img } from '../../utils/image'
+import { useCookies } from 'vue3-cookies'
+import i18n from '../../i18n'
 const { locale, messages } = useI18n()
+const { cookies } = useCookies()
 const displayed = ref<boolean>(true)
-const allLocales = computed(() => {
-  let locales: string[] = []
+const allLocales = ref<string[]>([])
+onMounted(() => {
   Object.keys(messages.value).forEach(function (key) {
-    if (locale.value !== key) locales = [...locales, key]
+    if (locale.value !== key) allLocales.value = [...allLocales.value, key]
   })
-  return locales
 })
 function changeLocale(lang: string): void {
-  locale.value = lang
+  const index = allLocales.value.findIndex((el) => el === lang)
+  allLocales.value[index] = locale.value
+  cookies.set('lang', lang)
+  locale.value = cookies.get('lang')
+  const html = document.querySelector('html')
+  if (html) html.setAttribute('lang', locale.value)
+  localStorage.setItem('user-locale', locale.value)
+  i18n.global.locale.value = locale.value
   displayed.value = false
+  location.reload()
 }
 function formatLangListUrl(lang: string): string {
   return img(`${lang}.svg`)

src/i18n/index.js

@@ -0,0 +1,26 @@
+import { createI18n } from 'vue-i18n'
+import { useCookies } from 'vue3-cookies'
+import fr from '../locales/fr.json'
+import en from '../locales/en.json'
+import hu from '../locales/hu.json'
+import pt from '../locales/pt.json'
+const { cookies } = useCookies()
+
+const locale = cookies.get('lang')
+  ? cookies.get('lang')
+  : navigator.language.split('-')[0]
+
+const i18n = createI18n({
+  locale,
+  fallbackLocale: 'fr',
+  warnHtmlMessage: false,
+  globalInjection: true,
+  legacy: false,
+  messages: {
+    fr,
+    en,
+    hu,
+    pt
+  }
+})
+export default i18n

src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import { createI18n } from 'vue-i18n'
+import i18n from './i18n'
 import VueMatomo from 'vue-matomo'
 import App from './App.vue'
 import router from './router'
@@ -9,10 +9,6 @@ import { VueDraggableResizable } from 'vue-draggable-resizable-vue3'
 import VCalendar from 'v-calendar'
 import 'v-calendar/style.css'
 import { pinia } from './store'
-import fr from './locales/fr.json'
-import en from './locales/en.json'
-import hu from './locales/hu.json'
-import pt from './locales/pt.json'
 import './assets/main.scss'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-icons/font/bootstrap-icons.css'
@@ -31,20 +27,6 @@ const matomoHost = getEnv('VITE_MATOMO_HOST')
 const matomoSiteId = getEnv('VITE_MATOMO_SITE_ID')
 const matomoExist = matomoHost && matomoSiteId
 
-const i18n = createI18n({
-  locale: navigator.language.split('-')[0],
-  fallbackLocale: 'fr',
-  warnHtmlMessage: false,
-  globalInjection: true,
-  legacy: false,
-  messages: {
-    fr,
-    en,
-    hu,
-    pt
-  }
-})
-
 const app = createApp(App)
 app.use(pinia)
 app.use(i18n)

src/views/MySequenceView.vue

@@ -229,7 +229,7 @@ import type {
   ResponseUserSequenceInterface
 } from './interfaces/MySequenceView'
 const { cookies } = useCookies()
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const route = useRoute()
 const router = useRouter()
 const sequenceStore = useSequenceStore()

vite.config.js

@@ -50,6 +50,10 @@ export default ({ mode }) => {
         'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
       }
     },
+    define: {
+      // Define the feature flag for better tree-shaking
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
+    },
     build: {
       minify: 'terser',
       terserOptions: {