From 72db7afe44e830d5697c7f82f4a01581a8b2fed4 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Wed, 11 Aug 2021 22:12:02 +0200
Subject: [PATCH] Client - extend store typing in components

---
 fittrackee_client/src/components/NavBar.vue   | 28 +++++++++-------
 .../src/components/User/UserForm.vue          |  2 +-
 fittrackee_client/src/interfaces.ts           |  2 +-
 .../src/store/modules/root/enums.ts           |  1 +
 .../src/store/modules/root/getters.ts         |  3 ++
 .../src/store/modules/root/interfaces.ts      |  1 +
 .../src/store/modules/root/types.ts           | 22 ++++++++++++-
 .../src/store/modules/user/types.ts           | 32 ++++++++++++++++++-
 fittrackee_client/src/store/types.ts          | 10 ++++++
 fittrackee_client/src/use/useStore.ts         |  7 ++++
 10 files changed, 93 insertions(+), 15 deletions(-)
 create mode 100644 fittrackee_client/src/store/types.ts
 create mode 100644 fittrackee_client/src/use/useStore.ts

diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue
index 8b68f62f..6ba1c171 100644
--- a/fittrackee_client/src/components/NavBar.vue
+++ b/fittrackee_client/src/components/NavBar.vue
@@ -56,12 +56,13 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, ref } from 'vue'
+  import { ComputedRef, computed, defineComponent, ref } from 'vue'
   import { useI18n } from 'vue-i18n'
-  import { useStore } from 'vuex'
 
   import { IDropdownOption } from '@/interfaces'
-  import { USER_STORE } from '@/store/constants'
+  import { ROOT_STORE, USER_STORE } from '@/store/constants'
+  import { useStore } from '@/use/useStore'
+  import { IAuthUserProfile } from '@/store/modules/user/interfaces'
   import Dropdown from '@/components/Common/Dropdown.vue'
 
   export default defineComponent({
@@ -75,6 +76,15 @@
       const availableLanguages = availableLocales.map((l) => {
         return { label: l.toUpperCase(), value: l }
       })
+      const authUser: ComputedRef<IAuthUserProfile> = computed(
+        () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
+      )
+      const isAuthenticated: ComputedRef<boolean> = computed(
+        () => store.getters[USER_STORE.GETTERS.IS_AUTHENTICATED]
+      )
+      const language: ComputedRef<string> = computed(
+        () => store.getters[ROOT_STORE.GETTERS.LANGUAGE]
+      )
       let isMenuOpen = ref(false)
       function openMenu() {
         isMenuOpen.value = true
@@ -84,19 +94,15 @@
       }
       function updateLanguage(option: IDropdownOption) {
         locale.value = option.value.toString()
-        store.commit('UPDATE_LANG', option.value)
+        store.commit(ROOT_STORE.MUTATIONS.UPDATE_LANG, option.value)
       }
 
       return {
         availableLanguages,
-        authUser: computed(
-          () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
-        ),
-        isAuthenticated: computed(
-          () => store.getters[USER_STORE.GETTERS.IS_AUTHENTICATED]
-        ),
+        authUser,
+        isAuthenticated,
         isMenuOpen,
-        language: computed(() => store.state.language),
+        language,
         t,
         openMenu,
         closeMenu,
diff --git a/fittrackee_client/src/components/User/UserForm.vue b/fittrackee_client/src/components/User/UserForm.vue
index 5844e22a..ff633dca 100644
--- a/fittrackee_client/src/components/User/UserForm.vue
+++ b/fittrackee_client/src/components/User/UserForm.vue
@@ -45,10 +45,10 @@
 <script lang="ts">
   import { computed, defineComponent, reactive } from 'vue'
   import { useI18n } from 'vue-i18n'
-  import { useStore } from 'vuex'
 
   import { IFormData } from '@/interfaces.ts'
   import { ROOT_STORE, USER_STORE } from '@/store/constants'
+  import { useStore } from '@/use/useStore'
 
   export default defineComponent({
     name: 'UserForm',
diff --git a/fittrackee_client/src/interfaces.ts b/fittrackee_client/src/interfaces.ts
index 73e18537..bf826f98 100644
--- a/fittrackee_client/src/interfaces.ts
+++ b/fittrackee_client/src/interfaces.ts
@@ -1,5 +1,5 @@
 export interface IDropdownOption {
-  value: string | number
+  value: string
   label: string
 }
 
diff --git a/fittrackee_client/src/store/modules/root/enums.ts b/fittrackee_client/src/store/modules/root/enums.ts
index addfe2b0..557bcedf 100644
--- a/fittrackee_client/src/store/modules/root/enums.ts
+++ b/fittrackee_client/src/store/modules/root/enums.ts
@@ -1,5 +1,6 @@
 export enum RootGetters {
   ERROR_MESSAGE = 'ERROR_MESSAGE',
+  LANGUAGE = 'LANGUAGE',
 }
 
 export enum RootMutations {
diff --git a/fittrackee_client/src/store/modules/root/getters.ts b/fittrackee_client/src/store/modules/root/getters.ts
index b4ada461..b0a6ce0f 100644
--- a/fittrackee_client/src/store/modules/root/getters.ts
+++ b/fittrackee_client/src/store/modules/root/getters.ts
@@ -6,4 +6,7 @@ export const getters: GetterTree<IRootState, IRootState> & IRootGetters = {
   [ROOT_STORE.GETTERS.ERROR_MESSAGE]: (state: IRootState) => {
     return state.errorMessage
   },
+  [ROOT_STORE.GETTERS.LANGUAGE]: (state: IRootState) => {
+    return state.language
+  },
 }
diff --git a/fittrackee_client/src/store/modules/root/interfaces.ts b/fittrackee_client/src/store/modules/root/interfaces.ts
index 0b52c134..82dab734 100644
--- a/fittrackee_client/src/store/modules/root/interfaces.ts
+++ b/fittrackee_client/src/store/modules/root/interfaces.ts
@@ -8,4 +8,5 @@ export interface IRootState {
 
 export interface IRootGetters {
   [ROOT_STORE.GETTERS.ERROR_MESSAGE](state: IRootState): string | null
+  [ROOT_STORE.GETTERS.LANGUAGE](state: IRootState): string
 }
diff --git a/fittrackee_client/src/store/modules/root/types.ts b/fittrackee_client/src/store/modules/root/types.ts
index ac1b9ed4..cdc7e4c1 100644
--- a/fittrackee_client/src/store/modules/root/types.ts
+++ b/fittrackee_client/src/store/modules/root/types.ts
@@ -1,8 +1,28 @@
+import { Store as VuexStore, CommitOptions } from 'vuex'
+
 import { ROOT_STORE } from '@/store/constants'
-import { IRootState } from '@/store/modules/root/interfaces'
+import { IRootGetters, IRootState } from '@/store/modules/root/interfaces'
 
 export type TRootMutations<S = IRootState> = {
   [ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGE](state: S): void
   [ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGE](state: S, errorMessage: string): void
   [ROOT_STORE.MUTATIONS.UPDATE_LANG](state: S, language: string): void
 }
+
+export type TRootStoreModule<S = IRootState> = Omit<
+  VuexStore<S>,
+  'commit' | 'getters' | 'dispatch'
+> & {
+  getters: {
+    [K in keyof IRootGetters]: ReturnType<IRootGetters[K]>
+  }
+} & {
+  commit<
+    K extends keyof TRootMutations,
+    P extends Parameters<TRootMutations[K]>[1]
+  >(
+    key: K,
+    payload?: P,
+    options?: CommitOptions
+  ): ReturnType<TRootMutations[K]>
+}
diff --git a/fittrackee_client/src/store/modules/user/types.ts b/fittrackee_client/src/store/modules/user/types.ts
index 919e1cdc..9c58d531 100644
--- a/fittrackee_client/src/store/modules/user/types.ts
+++ b/fittrackee_client/src/store/modules/user/types.ts
@@ -1,6 +1,36 @@
+import { Store as VuexStore, CommitOptions, DispatchOptions } from 'vuex'
+
 import { USER_STORE } from '@/store/constants'
-import { IUserState } from '@/store/modules/user/interfaces'
+import {
+  IUserActions,
+  IUserGetters,
+  IUserState,
+} from '@/store/modules/user/interfaces'
 
 export type TUserMutations<S = IUserState> = {
   [USER_STORE.MUTATIONS.UPDATE_AUTH_TOKEN](state: S, authToken: string): void
 }
+
+export type TUserStoreModule<S = IUserState> = Omit<
+  VuexStore<S>,
+  'commit' | 'getters' | 'dispatch'
+> & {
+  dispatch<K extends keyof IUserActions>(
+    key: K,
+    payload?: Parameters<IUserActions[K]>[1],
+    options?: DispatchOptions
+  ): ReturnType<IUserActions[K]>
+} & {
+  getters: {
+    [K in keyof IUserGetters]: ReturnType<IUserGetters[K]>
+  }
+} & {
+  commit<
+    K extends keyof TUserMutations,
+    P extends Parameters<TUserMutations[K]>[1]
+  >(
+    key: K,
+    payload?: P,
+    options?: CommitOptions
+  ): ReturnType<TUserMutations[K]>
+}
diff --git a/fittrackee_client/src/store/types.ts b/fittrackee_client/src/store/types.ts
new file mode 100644
index 00000000..8d4b02ca
--- /dev/null
+++ b/fittrackee_client/src/store/types.ts
@@ -0,0 +1,10 @@
+import { TRootStoreModule } from '@/store/modules/root/types'
+import { TUserStoreModule } from '@/store/modules/user/types'
+
+type StoreModules = {
+  rootModule: TRootStoreModule
+  userModule: TUserStoreModule
+}
+
+export type Store = TUserStoreModule<Pick<StoreModules, 'userModule'>> &
+  TRootStoreModule<Pick<StoreModules, 'rootModule'>>
diff --git a/fittrackee_client/src/use/useStore.ts b/fittrackee_client/src/use/useStore.ts
new file mode 100644
index 00000000..f7af6b4a
--- /dev/null
+++ b/fittrackee_client/src/use/useStore.ts
@@ -0,0 +1,7 @@
+import { useStore as VuexStore } from 'vuex'
+
+import { Store } from '@/store/types'
+
+export function useStore(): Store {
+  return VuexStore() as Store
+}