Client - minor refacto

fittrackee_client/src/components/NavBar.vue

@@ -79,7 +79,6 @@
 
 <script setup lang="ts">
   import { ComputedRef, computed, ref, capitalize } from 'vue'
-  import { useI18n } from 'vue-i18n'
 
   import UserPicture from '@/components/User/UserPicture.vue'
   import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
@@ -90,7 +89,6 @@
 
   const emit = defineEmits(['menuInteraction'])
 
-  const { locale } = useI18n()
   const store = useStore()
 
   const authUser: ComputedRef<IAuthUserProfile> = computed(
@@ -113,9 +111,10 @@
     emit('menuInteraction', false)
   }
   function updateLanguage(option: IDropdownOption) {
-    locale.value = option.value.toString()
-    document.querySelector('html')?.setAttribute('lang', locale.value)
-    store.commit(ROOT_STORE.MUTATIONS.UPDATE_LANG, option.value)
+    store.dispatch(
+      ROOT_STORE.ACTIONS.UPDATE_APPLICATION_LANGUAGE,
+      option.value.toString()
+    )
   }
   function logout() {
     store.dispatch(AUTH_USER_STORE.ACTIONS.LOGOUT)

fittrackee_client/src/store/modules/authUser/actions.ts

@@ -2,7 +2,6 @@ import { ActionContext, ActionTree } from 'vuex'
 
 import authApi from '@/api/authApi'
 import api from '@/api/defaultApi'
-import createI18n from '@/i18n'
 import router from '@/router'
 import {
   AUTH_USER_STORE,
@@ -32,8 +31,6 @@ import {
 } from '@/types/user'
 import { handleError } from '@/utils'
 
-const { locale } = createI18n.global
-
 const removeAuthUserData = (
   context: ActionContext<IAuthUserState, IRootState>
 ) => {
@@ -126,11 +123,10 @@ export const actions: ActionTree<IAuthUserState, IRootState> &
             res.data.data
           )
           if (res.data.data.language) {
-            context.commit(
-              ROOT_STORE.MUTATIONS.UPDATE_LANG,
+            context.dispatch(
+              ROOT_STORE.ACTIONS.UPDATE_APPLICATION_LANGUAGE,
               res.data.data.language
             )
-            locale.value = res.data.data.language
           }
           context.dispatch(SPORTS_STORE.ACTIONS.GET_SPORTS)
         } else {
@@ -251,12 +247,12 @@ export const actions: ActionTree<IAuthUserState, IRootState> &
             AUTH_USER_STORE.MUTATIONS.UPDATE_AUTH_USER_PROFILE,
             res.data.data
           )
-          context.commit(
-            ROOT_STORE.MUTATIONS.UPDATE_LANG,
-            res.data.data.language
-          )
-          locale.value = res.data.data.language
-          router.push('/profile/preferences')
+          context
+            .dispatch(
+              ROOT_STORE.ACTIONS.UPDATE_APPLICATION_LANGUAGE,
+              res.data.data.language
+            )
+            .then(() => router.push('/profile/preferences'))
         } else {
           handleError(context, null)
         }

fittrackee_client/src/store/modules/root/actions.ts

@@ -1,12 +1,15 @@
 import { ActionContext, ActionTree } from 'vuex'
 
 import authApi from '@/api/authApi'
+import createI18n from '@/i18n'
 import router from '@/router'
 import { ROOT_STORE } from '@/store/constants'
 import { IRootActions, IRootState } from '@/store/modules/root/types'
 import { TAppConfigForm } from '@/types/application'
 import { handleError } from '@/utils'
 
+const { locale } = createI18n.global
+
 export const actions: ActionTree<IRootState, IRootState> & IRootActions = {
   [ROOT_STORE.ACTIONS.GET_APPLICATION_CONFIG](
     context: ActionContext<IRootState, IRootState>
@@ -68,4 +71,12 @@ export const actions: ActionTree<IRootState, IRootState> & IRootActions = {
       })
       .catch((error) => handleError(context, error))
   },
+  [ROOT_STORE.ACTIONS.UPDATE_APPLICATION_LANGUAGE](
+    context: ActionContext<IRootState, IRootState>,
+    language: string
+  ): void {
+    document.querySelector('html')?.setAttribute('lang', language)
+    context.commit(ROOT_STORE.MUTATIONS.UPDATE_LANG, language)
+    locale.value = language
+  },
 }

fittrackee_client/src/store/modules/root/enums.ts

@@ -2,6 +2,7 @@ export enum RootActions {
   GET_APPLICATION_CONFIG = 'GET_APPLICATION_CONFIG',
   GET_APPLICATION_STATS = 'GET_APPLICATION_STATS',
   UPDATE_APPLICATION_CONFIG = 'UPDATE_APPLICATION_CONFIG',
+  UPDATE_APPLICATION_LANGUAGE = 'UPDATE_APPLICATION_LANGUAGE',
 }
 
 export enum RootGetters {

fittrackee_client/src/store/modules/root/types.ts

@@ -34,6 +34,10 @@ export interface IRootActions {
     context: ActionContext<IRootState, IRootState>,
     payload: TAppConfigForm
   ): void
+  [ROOT_STORE.ACTIONS.UPDATE_APPLICATION_LANGUAGE](
+    context: ActionContext<IRootState, IRootState>,
+    langauge: string
+  ): void
 }
 
 export interface IRootGetters {