fix : error handling in components using vuex store services

mrellipse · Jul 13, 2017 · 70bef23 · 70bef23
1 parent 3c761fb
commit 70bef23
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 62 deletions.
diff --git a/src/ui/app/components/login/login.ts b/src/ui/app/components/login/login.ts
@@ -110,6 +110,7 @@ export class Login extends Vue {
             .then((value) => this.$store.dispatch(StoreTypes.updateUser, value))
             .then(() => this.$store.dispatch(StoreTypes.updateStatusBar, null))
             .then(() => this.$router.push(returnUrl))
+            .catch(() => { });
     }
 
     loginExternal(providerId: string): void {
@@ -119,7 +120,7 @@ export class Login extends Vue {
         if (!client) {
 
             let msg: IPayloadMessage = {
-                text:  'Unknown authentication provider \'' + providerId +'\'',
+                text: 'Unknown authentication provider \'' + providerId + '\'',
                 messageTypeId: PayloadMessageTypes.warning
             }
 

diff --git a/src/ui/app/components/verify/verify.html b/src/ui/app/components/verify/verify.html
@@ -3,7 +3,7 @@ <h3 class="mb-2">{{$t('verify.title')}}</h3>
 
     <div class="form-group" v-show="!verifyCodeIssued">
         <p>{{$t('verify.sendCode')}}</p>
-        <button class="btn btn-primary" @click.prevent="issueVerificationCode()"><i class="fa fa-lg fa-lock" aria-hidden="true"></button>
+        <button class="btn btn-primary" @click.prevent="issueVerificationCode()"><i class="fa fa-lg fa-lock" aria-hidden="true"></i></button>
     </div>
 
     <div class="form-group" v-show="verifyCodeIssued">
@@ -13,7 +13,7 @@ <h3 class="mb-2">{{$t('verify.title')}}</h3>
                 <span class="alert-danger" v-if="!$v.verifyCode.required">{{$t('validation.required')}}</span>
             </span>
         </p>
-        <button class="btn btn-primary" @click.prevent="redeemVerificationCode()"><i class="fa fa-lg fa-unlock" aria-hidden="true"></button>
+        <button class="btn btn-primary" @click.prevent="redeemVerificationCode()"><i class="fa fa-lg fa-unlock" aria-hidden="true"></i></button>
     </div>
 
 </main>
diff --git a/src/ui/app/components/verify/verify.ts b/src/ui/app/components/verify/verify.ts
@@ -30,6 +30,7 @@ export class Verify extends Vue {
   issueVerificationCode() {
 
     let onSuccess = (code: string) => {
+
       console.info(`${code}`);
       this.verifyCodeIssued = true;
 
@@ -42,7 +43,8 @@ export class Verify extends Vue {
     };
 
     this.auth.verify()
-      .then(onSuccess);
+      .then(onSuccess)
+      .catch(() => { });
   }
 
   redeemVerificationCode() {
@@ -71,7 +73,8 @@ export class Verify extends Vue {
 
     this.auth.redeemVerificationCode(this.verifyCode)
       .then(onSuccess)
-      .then(onStoreDispatch);
+      .then(onStoreDispatch)
+      .catch(() => { });
   }
 
   verifyCodeIssued: boolean = false;

diff --git a/src/ui/app/model/payload/payload-mapper.ts b/src/ui/app/model/payload/payload-mapper.ts
@@ -50,21 +50,20 @@ export class PayloadMapper {
                     text: null
                 }
             };
-
         return value;
     }
 
     public fromObject<T>(o: any): IPayload<T> {
 
-        if (isAxiosResponse(o))
-            return this.fromAxiosResponse<T>(o);
-
         if (isAxiosError(o))
             return this.fromAxiosError<T>(o);
 
         if (o instanceof Error)
             return this.fromError<T>(o);
 
+        if (isAxiosResponse(o))
+            return this.fromAxiosResponse<T>(o);
+
         return null;
     }
 }

diff --git a/src/ui/app/services/authentication/authentication-service.ts b/src/ui/app/services/authentication/authentication-service.ts
@@ -53,21 +53,18 @@ export class AuthenticationService extends StoreService implements IClaimsHelper
 
     login(credentials: ICredential) {
 
-        let onSuccess = (payload: IPayload<IAccessToken>) => {
+        let onSuccess = (token: IAccessToken) => {
+
+            if (token) {
 
-            if (payload.message.messageTypeId === PayloadMessageTypes.success) {
-
-                let token = payload.data.access_token;
+                TokenHelper.setAccessToken(token.access_token);
 
-                TokenHelper.setAccessToken(token);
-
-                return TokenHelper.parseUserToken(token);
-            } else {
-                throw new Error(payload.message.text);
+                return TokenHelper.parseUserToken(token.access_token);
             }
         }
 
         return this.exec(Axios.post(LOGIN_URL, credentials))
+            .then(value => this.processPayload(value))
             .then(onSuccess);
     }
 
@@ -94,18 +91,14 @@ export class AuthenticationService extends StoreService implements IClaimsHelper
 
     redeemAccessToken(provider: ILoginProvider) {
 
-        let onSuccess = (payload: IPayload<IAccessToken>) => {
-
-            if (payload.message.messageTypeId === PayloadMessageTypes.success) {
+        let onSuccess = (token: IAccessToken) => {
 
-                let token = payload.data.access_token;
+            if (token) {
 
-                TokenHelper.setAccessToken(token);
+                TokenHelper.setAccessToken(token.access_token);
                 TokenHelper.removeProvider();
 
-                return TokenHelper.parseUserToken(token);
-            } else {
-                throw new Error(payload.message.text);
+                return TokenHelper.parseUserToken(token.access_token);
             }
         };
 
@@ -116,23 +109,19 @@ export class AuthenticationService extends StoreService implements IClaimsHelper
         }
 
         return this.exec(Axios.post(REDEEM_ACCESS_TOKEN, data))
+            .then(value => this.processPayload(value))
             .then(onSuccess);
     }
 
     redeemVerificationCode(code: string) {
 
-        let onSuccess = (payload: IPayload<IAccessToken>) => {
-
-            if (payload.message.messageTypeId === PayloadMessageTypes.success) {
-
-                let token = payload.data.access_token;
+        let onSuccess = (token: IAccessToken) => {
 
-                TokenHelper.setAccessToken(token);
+            if (token) {
 
-                return TokenHelper.parseUserToken(token);
+                TokenHelper.setAccessToken(token.access_token);
 
-            } else {
-                throw new Error(payload.message.text);
+                return TokenHelper.parseUserToken(token.access_token);
             }
         };
 
@@ -141,42 +130,29 @@ export class AuthenticationService extends StoreService implements IClaimsHelper
         };
 
         return this.exec(Axios.put(REDEEM_VERIFICATION_CODE, null, config))
+            .then(value => this.processPayload(value))
             .then(onSuccess);
     }
 
     signup(signup: ISignupOptions) {
 
-        let onSuccess = (payload: IPayload<IAccessToken>) => {
+        let onSuccess = (token: IAccessToken) => {
 
-            if (payload.message.messageTypeId === PayloadMessageTypes.success) {
+            if (token) {
 
-                let token = payload.data.access_token;
+                TokenHelper.setAccessToken(token.access_token);
 
-                TokenHelper.setAccessToken(token);
-
-                return TokenHelper.parseUserToken(token);
-            } else {
-                throw new Error(payload.message.text);
+                return TokenHelper.parseUserToken(token.access_token);
             }
         }
 
         return this.exec(Axios.post(SIGNUP_URL, signup))
+            .then(value => this.processPayload(value))
             .then(onSuccess);
     }
 
     verify() {
-        let onSuccess = (res: AxiosResponse) => {
-
-            let payload: IPayload<string> = res.data;
-
-            if (payload.message.messageTypeId === PayloadMessageTypes.success) {
-                return payload.data;
-            } else {
-                throw new Error(payload.message.text);
-            }
-        }
-
-        return Axios.get(VERIFICATION_CODE_URL)
-            .then(onSuccess);
+        return this.exec(Axios.get(VERIFICATION_CODE_URL))
+            .then(value => this.processPayload<string>(<any>value))
     }
 }
diff --git a/src/ui/app/store/store-service.ts b/src/ui/app/store/store-service.ts
@@ -13,7 +13,8 @@ export interface IStoreService {
 
 interface IProcessPayloadOptions<T> {
     timeout?: number,
-    uri?: string
+    uri?: string,
+    messageTypeIds?: string[]
 }
 
 export abstract class StoreService implements IStoreService {
@@ -22,10 +23,10 @@ export abstract class StoreService implements IStoreService {
 
     }
 
-    handleFulfilled<T>(value: T) {
+    handleFulfilled<T>(reason: T) {
 
         return this.store.dispatch(StoreTypes.loadingState, false)
-            .then(() => new PayloadMapper().fromObject(value));
+            .then(() => new PayloadMapper().fromObject(reason));
     }
 
     handleRejection<T>(reason: any) {
@@ -39,8 +40,11 @@ export abstract class StoreService implements IStoreService {
 
         let message = payload.message;
         options = options || {};
+        let messageTypeIds = options.messageTypeIds || [PayloadMessageTypes.error, PayloadMessageTypes.failure];
+
+        let messageTypeId = messageTypeIds.find(o => o === message.messageTypeId);
 
-        if (message.messageTypeId === PayloadMessageTypes.error) {
+        if (messageTypeId) {
 
             options.timeout = options.timeout || 1500;
 
@@ -53,8 +57,8 @@ export abstract class StoreService implements IStoreService {
             };
 
             return this.store.dispatch(StoreTypes.updateStatusBar, statusBarData)
-                .then(() => Promise.resolve(null));
-                
+                .then(() => Promise.reject(null));
+
         } else {
             return Promise.resolve(payload.data);
         }