Client - init users store

fittrackee_client/src/store/constants.ts

@@ -18,6 +18,11 @@ import {
   UserGetters,
   UserMutations,
 } from '@/store/modules/user/enums'
+import {
+  UsersActions,
+  UsersGetters,
+  UsersMutations,
+} from '@/store/modules/users/enums'
 import {
   WorkoutsActions,
   WorkoutsGetters,
@@ -48,6 +53,12 @@ export const USER_STORE = {
   MUTATIONS: UserMutations,
 }
 
+export const USERS_STORE = {
+  ACTIONS: UsersActions,
+  GETTERS: UsersGetters,
+  MUTATIONS: UsersMutations,
+}
+
 export const WORKOUTS_STORE = {
   ACTIONS: WorkoutsActions,
   GETTERS: WorkoutsGetters,

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

@@ -8,12 +8,14 @@ import { IRootState } from '@/store/modules/root/types'
 import sportsModule from '@/store/modules/sports'
 import statsModule from '@/store/modules/statistics'
 import userModule from '@/store/modules/user'
+import usersModule from '@/store/modules/users'
 import workoutsModule from '@/store/modules/workouts'
 
 const modules: ModuleTree<IRootState> = {
   sportsModule,
   statsModule,
   userModule,
+  usersModule,
   workoutsModule,
 }
 

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

@@ -0,0 +1,38 @@
+import { ActionContext, ActionTree } from 'vuex'
+
+import authApi from '@/api/authApi'
+import { ROOT_STORE, USERS_STORE } from '@/store/constants'
+import { IRootState } from '@/store/modules/root/types'
+import { IUsersActions, IUsersState } from '@/store/modules/users/types'
+import { IPaginationPayload } from '@/types/api'
+import { handleError } from '@/utils'
+
+export const actions: ActionTree<IUsersState, IRootState> & IUsersActions = {
+  [USERS_STORE.ACTIONS.GET_USERS](
+    context: ActionContext<IUsersState, IRootState>,
+    payload: IPaginationPayload
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(USERS_STORE.MUTATIONS.UPDATE_USERS_LOADING, true)
+    authApi
+      .get('users', { params: payload })
+      .then((res) => {
+        if (res.data.status === 'success') {
+          context.commit(
+            USERS_STORE.MUTATIONS.UPDATE_USERS,
+            res.data.data.users
+          )
+          context.commit(
+            USERS_STORE.MUTATIONS.UPDATE_USERS_PAGINATION,
+            res.data.data.pagination
+          )
+        } else {
+          handleError(context, null)
+        }
+      })
+      .catch((error) => handleError(context, error))
+      .finally(() =>
+        context.commit(USERS_STORE.MUTATIONS.UPDATE_USERS_LOADING, false)
+      )
+  },
+}

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

@@ -0,0 +1,15 @@
+export enum UsersActions {
+  GET_USERS = 'GET_USERS',
+}
+
+export enum UsersGetters {
+  USERS = 'USERS',
+  USERS_LOADING = 'USERS_LOADING',
+  USERS_PAGINATION = 'USERS_PAGINATION',
+}
+
+export enum UsersMutations {
+  UPDATE_USERS = 'UPDATE_USERS',
+  UPDATE_USERS_LOADING = 'UPDATE_USERS_LOADING',
+  UPDATE_USERS_PAGINATION = 'UPDATE_USERS_PAGINATION',
+}

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

@@ -0,0 +1,17 @@
+import { GetterTree } from 'vuex'
+
+import { USERS_STORE } from '@/store/constants'
+import { IRootState } from '@/store/modules/root/types'
+import { IUsersGetters, IUsersState } from '@/store/modules/users/types'
+
+export const getters: GetterTree<IUsersState, IRootState> & IUsersGetters = {
+  [USERS_STORE.GETTERS.USERS]: (state: IUsersState) => {
+    return state.users
+  },
+  [USERS_STORE.GETTERS.USERS_LOADING]: (state: IUsersState) => {
+    return state.loading
+  },
+  [USERS_STORE.GETTERS.USERS_PAGINATION]: (state: IUsersState) => {
+    return state.pagination
+  },
+}

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

@@ -0,0 +1,17 @@
+import { Module } from 'vuex'
+
+import { IRootState } from '@/store/modules/root/types'
+import { actions } from '@/store/modules/users/actions'
+import { getters } from '@/store/modules/users/getters'
+import { mutations } from '@/store/modules/users/mutations'
+import { usersState } from '@/store/modules/users/state'
+import { IUsersState } from '@/store/modules/users/types'
+
+const users: Module<IUsersState, IRootState> = {
+  state: usersState,
+  actions,
+  getters,
+  mutations,
+}
+
+export default users

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

@@ -0,0 +1,27 @@
+import { MutationTree } from 'vuex'
+
+import { USERS_STORE } from '@/store/constants'
+import { IUsersState, TUsersMutations } from '@/store/modules/users/types'
+import { IPagination } from '@/types/api'
+import { IUserProfile } from '@/types/user'
+
+export const mutations: MutationTree<IUsersState> & TUsersMutations = {
+  [USERS_STORE.MUTATIONS.UPDATE_USERS](
+    state: IUsersState,
+    users: IUserProfile[]
+  ) {
+    state.users = users
+  },
+  [USERS_STORE.MUTATIONS.UPDATE_USERS_LOADING](
+    state: IUsersState,
+    loading: boolean
+  ) {
+    state.loading = loading
+  },
+  [USERS_STORE.MUTATIONS.UPDATE_USERS_PAGINATION](
+    state: IUsersState,
+    pagination: IPagination
+  ) {
+    state.pagination = pagination
+  },
+}

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

@@ -0,0 +1,8 @@
+import { IUsersState } from '@/store/modules/users/types'
+import { IPagination } from '@/types/api'
+
+export const usersState: IUsersState = {
+  users: [],
+  loading: false,
+  pagination: <IPagination>{},
+}

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

@@ -0,0 +1,63 @@
+import {
+  ActionContext,
+  CommitOptions,
+  DispatchOptions,
+  Store as VuexStore,
+} from 'vuex'
+
+import { USERS_STORE } from '@/store/constants'
+import { IRootState } from '@/store/modules/root/types'
+import { IPagination, IPaginationPayload } from '@/types/api'
+import { IUserProfile } from '@/types/user'
+
+export interface IUsersState {
+  users: IUserProfile[]
+  loading: boolean
+  pagination: IPagination
+}
+
+export interface IUsersActions {
+  [USERS_STORE.ACTIONS.GET_USERS](
+    context: ActionContext<IUsersState, IRootState>,
+    payload: IPaginationPayload
+  ): void
+}
+
+export interface IUsersGetters {
+  [USERS_STORE.GETTERS.USERS](state: IUsersState): IUserProfile[]
+  [USERS_STORE.GETTERS.USERS_LOADING](state: IUsersState): boolean
+  [USERS_STORE.GETTERS.USERS_PAGINATION](state: IUsersState): IPagination
+}
+
+export type TUsersMutations<S = IUsersState> = {
+  [USERS_STORE.MUTATIONS.UPDATE_USERS](state: S, users: IUserProfile[]): void
+  [USERS_STORE.MUTATIONS.UPDATE_USERS_LOADING](state: S, loading: boolean): void
+  [USERS_STORE.MUTATIONS.UPDATE_USERS_PAGINATION](
+    state: S,
+    pagination: IPagination
+  ): void
+}
+
+export type TUsersStoreModule<S = IUsersState> = Omit<
+  VuexStore<S>,
+  'commit' | 'getters' | 'dispatch'
+> & {
+  dispatch<K extends keyof IUsersActions>(
+    key: K,
+    payload?: Parameters<IUsersActions[K]>[1],
+    options?: DispatchOptions
+  ): ReturnType<IUsersActions[K]>
+} & {
+  getters: {
+    [K in keyof IUsersGetters]: ReturnType<IUsersGetters[K]>
+  }
+} & {
+  commit<
+    K extends keyof TUsersMutations,
+    P extends Parameters<TUsersMutations[K]>[1]
+  >(
+    key: K,
+    payload?: P,
+    options?: CommitOptions
+  ): ReturnType<TUsersMutations[K]>
+}

fittrackee_client/src/store/types.ts

@@ -2,6 +2,7 @@ import { TRootStoreModule } from '@/store/modules/root/types'
 import { TSportsStoreModule } from '@/store/modules/sports/types'
 import { TStatisticsStoreModule } from '@/store/modules/statistics/types'
 import { TUserStoreModule } from '@/store/modules/user/types'
+import { TUsersStoreModule } from '@/store/modules/users/types'
 import { TWorkoutsStoreModule } from '@/store/modules/workouts/types'
 
 type StoreModules = {
@@ -9,6 +10,7 @@ type StoreModules = {
   sportsModule: TSportsStoreModule
   statsModule: TStatisticsStoreModule
   userModule: TUserStoreModule
+  usersModule: TUsersStoreModule
   workoutsModule: TWorkoutsStoreModule
 }
 
@@ -16,4 +18,5 @@ export type Store = TUserStoreModule<Pick<StoreModules, 'userModule'>> &
   TSportsStoreModule<Pick<StoreModules, 'sportsModule'>> &
   TStatisticsStoreModule<Pick<StoreModules, 'statsModule'>> &
   TWorkoutsStoreModule<Pick<StoreModules, 'workoutsModule'>> &
+  TUsersStoreModule<Pick<StoreModules, 'usersModule'>> &
   TRootStoreModule<Pick<StoreModules, 'rootModule'>>

fittrackee_client/src/types/api.ts

@@ -0,0 +1,14 @@
+export interface IPagination {
+  has_next: boolean
+  has_prev: boolean
+  page: number
+  pages: number
+  total: number
+}
+
+export interface IPaginationPayload {
+  order: string
+  order_by: string
+  per_page: number
+  page: number
+}

fittrackee_client/src/utils/index.ts

@@ -6,6 +6,7 @@ import { IRootState } from '@/store/modules/root/types'
 import { ISportsState } from '@/store/modules/sports/types'
 import { IStatisticsState } from '@/store/modules/statistics/types'
 import { IUserState } from '@/store/modules/user/types'
+import { IUsersState } from '@/store/modules/users/types'
 import { IWorkoutsState } from '@/store/modules/workouts/types'
 
 export const getApiUrl = (): string => {
@@ -25,6 +26,7 @@ export const handleError = (
     | ActionContext<IUserState, IRootState>
     | ActionContext<IStatisticsState, IRootState>
     | ActionContext<ISportsState, IRootState>
+    | ActionContext<IUsersState, IRootState>
     | ActionContext<IWorkoutsState, IRootState>,
   error: AxiosError | null,
   msg = 'UNKNOWN'