From 7df5ea98709d9db9b6a27f31a51370795cc9f170 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Wed, 11 Aug 2021 21:12:20 +0200
Subject: [PATCH] Client - handle error on api calls

---
 .../src/components/User/UserForm.vue          |  9 +++++---
 fittrackee_client/src/locales/en/error.json   |  3 ++-
 fittrackee_client/src/locales/fr/error.json   |  3 ++-
 fittrackee_client/src/store/constants.ts      |  3 ++-
 .../src/store/modules/root/enums.ts           |  6 +++++
 .../src/store/modules/root/getters.ts         |  9 ++++++++
 .../src/store/modules/root/index.ts           |  2 ++
 .../src/store/modules/root/interfaces.ts      |  6 +++++
 .../src/store/modules/root/mutations.ts       |  9 ++++++++
 .../src/store/modules/root/types.ts           |  2 ++
 .../src/store/modules/user/actions.ts         | 23 +++++++++++++------
 .../src/store/modules/user/interfaces.ts      |  2 +-
 fittrackee_client/src/utils.ts                | 23 +++++++++++++++++++
 fittrackee_client/src/views/NotFound.vue      |  2 +-
 14 files changed, 87 insertions(+), 15 deletions(-)
 create mode 100644 fittrackee_client/src/store/modules/root/getters.ts

diff --git a/fittrackee_client/src/components/User/UserForm.vue b/fittrackee_client/src/components/User/UserForm.vue
index 7ba1774f..5844e22a 100644
--- a/fittrackee_client/src/components/User/UserForm.vue
+++ b/fittrackee_client/src/components/User/UserForm.vue
@@ -43,11 +43,12 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, ref } from 'vue'
+  import { computed, defineComponent, reactive } from 'vue'
   import { useI18n } from 'vue-i18n'
   import { useStore } from 'vuex'
+
   import { IFormData } from '@/interfaces.ts'
-  import { USER_STORE } from '@/store/constants'
+  import { ROOT_STORE, USER_STORE } from '@/store/constants'
 
   export default defineComponent({
     name: 'UserForm',
@@ -75,7 +76,9 @@
       }
 
       return {
-        errorMessage: ref(null),
+        errorMessage: computed(
+          () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGE]
+        ),
         t,
         formData,
         onSubmit,
diff --git a/fittrackee_client/src/locales/en/error.json b/fittrackee_client/src/locales/en/error.json
index 7bc278eb..15ffce1a 100644
--- a/fittrackee_client/src/locales/en/error.json
+++ b/fittrackee_client/src/locales/en/error.json
@@ -1,5 +1,6 @@
 {
-  "not-found": {
+  "UNKNOWN": "Error. Please try again or contact the administrator.",
+  "NOT_FOUND": {
     "PAGE": "Page not found"
   }
 }
\ No newline at end of file
diff --git a/fittrackee_client/src/locales/fr/error.json b/fittrackee_client/src/locales/fr/error.json
index c9e1e60a..9f84102f 100644
--- a/fittrackee_client/src/locales/fr/error.json
+++ b/fittrackee_client/src/locales/fr/error.json
@@ -1,5 +1,6 @@
 {
-  "not-found": {
+  "UNKNOWN": "Erreur. Veuillez réessayer ou contacter l'administrateur.",
+  "NOT_FOUND": {
     "PAGE": "Page introuvable"
   }
 }
\ No newline at end of file
diff --git a/fittrackee_client/src/store/constants.ts b/fittrackee_client/src/store/constants.ts
index ef0a8113..ffb17684 100644
--- a/fittrackee_client/src/store/constants.ts
+++ b/fittrackee_client/src/store/constants.ts
@@ -1,4 +1,4 @@
-import { RootMutations } from '@/store/modules/root/enums'
+import { RootGetters, RootMutations } from '@/store/modules/root/enums'
 import {
   UserActions,
   UserGetters,
@@ -6,6 +6,7 @@ import {
 } from '@/store/modules/user/enums'
 
 export const ROOT_STORE = {
+  GETTERS: RootGetters,
   MUTATIONS: RootMutations,
 }
 
diff --git a/fittrackee_client/src/store/modules/root/enums.ts b/fittrackee_client/src/store/modules/root/enums.ts
index 3f344444..addfe2b0 100644
--- a/fittrackee_client/src/store/modules/root/enums.ts
+++ b/fittrackee_client/src/store/modules/root/enums.ts
@@ -1,3 +1,9 @@
+export enum RootGetters {
+  ERROR_MESSAGE = 'ERROR_MESSAGE',
+}
+
 export enum RootMutations {
+  EMPTY_ERROR_MESSAGE = 'EMPTY_ERROR_MESSAGE',
+  SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE',
   UPDATE_LANG = 'UPDATE_LANG',
 }
diff --git a/fittrackee_client/src/store/modules/root/getters.ts b/fittrackee_client/src/store/modules/root/getters.ts
new file mode 100644
index 00000000..b4ada461
--- /dev/null
+++ b/fittrackee_client/src/store/modules/root/getters.ts
@@ -0,0 +1,9 @@
+import { GetterTree } from 'vuex'
+import { ROOT_STORE } from '@/store/constants'
+import { IRootState, IRootGetters } from '@/store/modules/root/interfaces'
+
+export const getters: GetterTree<IRootState, IRootState> & IRootGetters = {
+  [ROOT_STORE.GETTERS.ERROR_MESSAGE]: (state: IRootState) => {
+    return state.errorMessage
+  },
+}
diff --git a/fittrackee_client/src/store/modules/root/index.ts b/fittrackee_client/src/store/modules/root/index.ts
index acb8d2e4..5e63fad1 100644
--- a/fittrackee_client/src/store/modules/root/index.ts
+++ b/fittrackee_client/src/store/modules/root/index.ts
@@ -1,4 +1,5 @@
 import { Module, ModuleTree } from 'vuex'
+import { getters } from '@/store/modules/root/getters'
 import { IRootState } from '@/store/modules/root/interfaces'
 import { mutations } from '@/store/modules/root/mutations'
 import { state } from '@/store/modules/root/state.ts'
@@ -10,6 +11,7 @@ const modules: ModuleTree<IRootState> = {
 
 const root: Module<IRootState, IRootState> = {
   state,
+  getters,
   mutations,
   modules,
 }
diff --git a/fittrackee_client/src/store/modules/root/interfaces.ts b/fittrackee_client/src/store/modules/root/interfaces.ts
index 088bcdfa..0b52c134 100644
--- a/fittrackee_client/src/store/modules/root/interfaces.ts
+++ b/fittrackee_client/src/store/modules/root/interfaces.ts
@@ -1,5 +1,11 @@
+import { ROOT_STORE } from '@/store/constants'
+
 export interface IRootState {
   root: boolean
   language: string
   errorMessage: string | null
 }
+
+export interface IRootGetters {
+  [ROOT_STORE.GETTERS.ERROR_MESSAGE](state: IRootState): string | null
+}
diff --git a/fittrackee_client/src/store/modules/root/mutations.ts b/fittrackee_client/src/store/modules/root/mutations.ts
index 735b08f3..40ccc214 100644
--- a/fittrackee_client/src/store/modules/root/mutations.ts
+++ b/fittrackee_client/src/store/modules/root/mutations.ts
@@ -4,6 +4,15 @@ import { IRootState } from '@/store/modules/root/interfaces'
 import { TRootMutations } from '@/store/modules/root/types'
 
 export const mutations: MutationTree<IRootState> & TRootMutations = {
+  [ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGE](state: IRootState) {
+    state.errorMessage = null
+  },
+  [ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGE](
+    state: IRootState,
+    errorMessage: string
+  ) {
+    state.errorMessage = errorMessage
+  },
   [ROOT_STORE.MUTATIONS.UPDATE_LANG](state: IRootState, language: string) {
     state.language = language
   },
diff --git a/fittrackee_client/src/store/modules/root/types.ts b/fittrackee_client/src/store/modules/root/types.ts
index 52f9476f..ac1b9ed4 100644
--- a/fittrackee_client/src/store/modules/root/types.ts
+++ b/fittrackee_client/src/store/modules/root/types.ts
@@ -2,5 +2,7 @@ import { ROOT_STORE } from '@/store/constants'
 import { 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
 }
diff --git a/fittrackee_client/src/store/modules/user/actions.ts b/fittrackee_client/src/store/modules/user/actions.ts
index d9c91df4..ab0cf055 100644
--- a/fittrackee_client/src/store/modules/user/actions.ts
+++ b/fittrackee_client/src/store/modules/user/actions.ts
@@ -1,9 +1,12 @@
 import { ActionContext, ActionTree } from 'vuex'
-import { USER_STORE } from '@/store/constants'
-import { IUserActions } from '@/store/modules/user/interfaces'
-import { IUserState } from '@/store/modules/user/interfaces'
+import { ROOT_STORE, USER_STORE } from '@/store/constants'
+import {
+  ILoginOrRegisterData,
+  IUserActions,
+  IUserState,
+} from '@/store/modules/user/interfaces'
 import { IRootState } from '@/store/modules/root/interfaces'
-import { ILoginOrRegisterData } from '@/store/modules/user/interfaces'
+import { handleError } from '@/utils'
 import api from '@/api/defaultApi'
 import authApi from '@/api/authApi'
 import router from '@/router'
@@ -12,6 +15,7 @@ export const actions: ActionTree<IUserState, IRootState> & IUserActions = {
   [USER_STORE.ACTIONS.GET_USER_PROFILE](
     context: ActionContext<IUserState, IRootState>
   ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGE)
     authApi
       .get('auth/profile')
       .then((res) => {
@@ -20,26 +24,31 @@ export const actions: ActionTree<IUserState, IRootState> & IUserActions = {
             USER_STORE.MUTATIONS.UPDATE_AUTH_USER_PROFILE,
             res.data.data
           )
+        } else {
+          handleError(context, null)
         }
       })
-      .catch((err) => console.log(err))
+      .catch((error) => handleError(context, error))
   },
   [USER_STORE.ACTIONS.LOGIN_OR_REGISTER](
     context: ActionContext<IUserState, IRootState>,
     data: ILoginOrRegisterData
   ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGE)
     api
       .post(`/auth/${data.actionType}`, data.formData)
       .then((res) => {
-        if (res.status == 200 && res.data.status === 'success') {
+        if (res.data.status === 'success') {
           const token = res.data.auth_token
           window.localStorage.setItem('authToken', token)
           context.commit(USER_STORE.MUTATIONS.UPDATE_AUTH_TOKEN, token)
           context
             .dispatch(USER_STORE.ACTIONS.GET_USER_PROFILE)
             .then(() => router.push('/'))
+        } else {
+          handleError(context, null)
         }
       })
-      .catch((err) => console.log(err))
+      .catch((error) => handleError(context, error))
   },
 }
diff --git a/fittrackee_client/src/store/modules/user/interfaces.ts b/fittrackee_client/src/store/modules/user/interfaces.ts
index aa3e27d5..d522bcd5 100644
--- a/fittrackee_client/src/store/modules/user/interfaces.ts
+++ b/fittrackee_client/src/store/modules/user/interfaces.ts
@@ -37,7 +37,7 @@ export interface IUserState {
 }
 
 export interface IUserGetters {
-  [USER_STORE.GETTERS.AUTH_TOKEN](state: IUserState): string
+  [USER_STORE.GETTERS.AUTH_TOKEN](state: IUserState): string | null
   [USER_STORE.GETTERS.IS_AUTHENTICATED](state: IUserState): boolean
 }
 
diff --git a/fittrackee_client/src/utils.ts b/fittrackee_client/src/utils.ts
index ec76a230..142b9fdd 100644
--- a/fittrackee_client/src/utils.ts
+++ b/fittrackee_client/src/utils.ts
@@ -1,5 +1,28 @@
+import { AxiosError } from 'axios'
+import { ActionContext } from 'vuex'
+import { ROOT_STORE } from '@/store/constants'
+import { IUserState } from '@/store/modules/user/interfaces'
+import { IRootState } from '@/store/modules/root/interfaces'
+
 export const getApiUrl = (): string => {
   return process.env.NODE_ENV === 'production'
     ? '/api'
     : 'http://localhost:5000/api'
 }
+
+export const handleError = (
+  context: ActionContext<IUserState, IRootState>,
+  error: AxiosError | null,
+  msg = 'error.UNKNOWN'
+): void => {
+  const errorMessage = !error
+    ? msg
+    : error.response
+    ? error.response.data.message
+      ? error.response.data.message
+      : msg
+    : error.message
+    ? error.message
+    : msg
+  context.commit(ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGE, errorMessage)
+}
diff --git a/fittrackee_client/src/views/NotFound.vue b/fittrackee_client/src/views/NotFound.vue
index 31dfa76a..0d39d797 100644
--- a/fittrackee_client/src/views/NotFound.vue
+++ b/fittrackee_client/src/views/NotFound.vue
@@ -2,7 +2,7 @@
   <div class="not-found">
     <Error
       title="404"
-      :message="t('error.not-found.PAGE')"
+      :message="t('error.NOT_FOUND.PAGE')"
       :button-text="t('common.HOME')"
     />
   </div>