Client - refactor store

fittrackee_client/src/components/NavBar.vue

@@ -83,7 +83,7 @@
       }
       function updateLanguage(option: IDropdownOption) {
         locale.value = option.value.toString()
-        store.commit('setLanguage', option.value)
+        store.commit('UPDATE_LANG', option.value)
       }
 
       return {

fittrackee_client/src/store/constants.ts

@@ -0,0 +1,10 @@
+import { RootMutations } from '@/store/modules/root/enums'
+import { UserGetters } from '@/store/modules/user/enums'
+
+export const ROOT_STORE = {
+  MUTATIONS: RootMutations,
+}
+
+export const USER_STORE = {
+  GETTERS: UserGetters,
+}

fittrackee_client/src/store/index.ts

@@ -1,18 +1,7 @@
 import { createStore } from 'vuex'
-import { DefaultStateTypes } from '@/types/state'
-import user from './modules/user'
+import { IRootState } from '@/store/modules/root/interfaces'
+import root from '@/store/modules/root'
 
-export default createStore({
-  state: {
-    language: 'en',
-  },
-  mutations: {
-    setLanguage(state: DefaultStateTypes, language: string) {
-      state.language = language
-    },
-  },
-  actions: {},
-  modules: {
-    user,
-  },
-})
+const store = createStore<IRootState>(root)
+
+export default store

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

@@ -0,0 +1,3 @@
+export enum RootMutations {
+  UPDATE_LANG = 'UPDATE_LANG',
+}

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

@@ -0,0 +1,17 @@
+import { Module, ModuleTree } from 'vuex'
+import { IRootState } from '@/store/modules/root/interfaces'
+import { mutations } from '@/store/modules/root/mutations'
+import { state } from '@/store/modules/root/state.ts'
+import userModule from '@/store/modules/user'
+
+const modules: ModuleTree<IRootState> = {
+  userModule,
+}
+
+const root: Module<IRootState, IRootState> = {
+  state,
+  mutations,
+  modules,
+}
+
+export default root

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

@@ -0,0 +1,5 @@
+export interface IRootState {
+  root: boolean
+  language: string
+  errorMessage: string | null
+}

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

@@ -0,0 +1,10 @@
+import { MutationTree } from 'vuex'
+import { ROOT_STORE } from '@/store/constants'
+import { IRootState } from '@/store/modules/root/interfaces'
+import { TRootMutations } from '@/store/modules/root/types'
+
+export const mutations: MutationTree<IRootState> & TRootMutations = {
+  [ROOT_STORE.MUTATIONS.UPDATE_LANG](state: IRootState, language: string) {
+    state.language = language
+  },
+}

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

@@ -0,0 +1,7 @@
+import { IRootState } from '@/store/modules/root/interfaces'
+
+export const state: IRootState = {
+  root: true,
+  language: 'en',
+  errorMessage: null,
+}

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

@@ -0,0 +1,6 @@
+import { ROOT_STORE } from '@/store/constants'
+import { IRootState } from '@/store/modules/root/interfaces'
+
+export type TRootMutations<S = IRootState> = {
+  [ROOT_STORE.MUTATIONS.UPDATE_LANG](state: S, language: string): void
+}

fittrackee_client/src/store/modules/user.ts

@@ -1,20 +0,0 @@
-import { UserStateTypes } from '@/types/state'
-
-const userState = {
-  authToken: null,
-}
-
-export type Getters = {
-  isAuthenticated(state: UserStateTypes): boolean
-}
-
-const getters: Getters = {
-  isAuthenticated(state: UserStateTypes) {
-    return state.authToken !== null
-  },
-}
-
-export default {
-  state: userState,
-  getters,
-}

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

@@ -0,0 +1,3 @@
+export enum UserGetters {
+  IS_AUTHENTICATED = 'IS_AUTHENTICATED',
+}

fittrackee_client/src/store/modules/user/getters.ts

@@ -0,0 +1,10 @@
+import { GetterTree } from 'vuex'
+import { USER_STORE } from '@/store/constants'
+import { IRootState } from '@/store/modules/root/interfaces'
+import { IUserGetters, IUserState } from '@/store/modules/user/interfaces'
+
+export const getters: GetterTree<IUserState, IRootState> & IUserGetters = {
+  [USER_STORE.GETTERS.IS_AUTHENTICATED]: (state: IUserState) => {
+    return state.authToken !== null
+  },
+}

fittrackee_client/src/store/modules/user/index.ts

@@ -0,0 +1,12 @@
+import { Module } from 'vuex'
+import { IRootState } from '@/store/modules/root/interfaces'
+import { getters } from '@/store/modules/user/getters'
+import { IUserState } from '@/store/modules/user/interfaces'
+import { userState } from '@/store/modules/user/state.ts'
+
+const user: Module<IUserState, IRootState> = {
+  state: userState,
+  getters,
+}
+
+export default user

fittrackee_client/src/store/modules/user/interfaces.ts

@@ -0,0 +1,9 @@
+import { USER_STORE } from '@/store/constants'
+
+export interface IUserState {
+  authToken: string | null
+}
+
+export interface IUserGetters {
+  [USER_STORE.GETTERS.IS_AUTHENTICATED](state: IUserState): boolean
+}

fittrackee_client/src/store/modules/user/state.ts

@@ -0,0 +1,5 @@
+import { IUserState } from '@/store/modules/user/interfaces'
+
+export const userState: IUserState = {
+  authToken: null,
+}

fittrackee_client/src/types/state.ts

@@ -1,7 +1,3 @@
-export interface DefaultStateTypes {
+export interface IDefaultState {
   language: string
 }
-
-export interface UserStateTypes {
-  authToken: string
-}