add error handling to metadata API call

src/app/dars/dars-view/dars-view.component.html

@@ -32,14 +32,16 @@
             </div>
         </div>
 
-        <div *ngIf="(metadataStatus$ | async) == 'Loaded'; then loadedMetadata else loadingMetadata"></div>
-
-        <ng-template #loadedMetadata>
-            <cse-dars-metadata-table></cse-dars-metadata-table>
-        </ng-template>
-
-        <ng-template #loadingMetadata>
-            <h2>loading metadata</h2>
-        </ng-template>
+        <ng-container [ngSwitch]="metadataStatus$ | async">
+            <ng-container *ngSwitchCase="'Error'">
+                <h2 style="color:red">error loading metadata</h2>
+            </ng-container>
+            <ng-container *ngSwitchCase="'Loading'">
+                <h2>loading metadata</h2>
+            </ng-container>
+            <ng-container *ngSwitchCase="'Loaded'">
+                <cse-dars-metadata-table></cse-dars-metadata-table>
+            </ng-container>
+        </ng-container>
     </div>
 </mat-sidenav-container>

src/app/dars/store/actions.ts

@@ -3,17 +3,29 @@ import { AuditMetadata } from '../models/audit-metadata';
 import { Audit } from '../models/audit';
 
 export enum DarsActionTypes {
+  ErrorLoadingMetadata = '[DARS] Error Loading Metadata',
   StartLoadingMetadata = '[DARS] Start Loading Metadata',
+  ErrorLoadingAudit = '[DARS] Error Loading Audit',
   AddAuditMetadata = '[DARS] Add Audit Metadata',
   StartLoadingAudit = '[DARS] Start Loading Audit',
   DoneLoadingAudit = '[DARS] Done Loading Audit',
   CloseAudit = '[DARS] Close Audit',
 }
 
+export class ErrorLoadingMetadata implements Action {
+  public readonly type = DarsActionTypes.ErrorLoadingMetadata;
+  constructor(public payload: { message: string }) {}
+}
+
 export class StartLoadingMetadata implements Action {
   public readonly type = DarsActionTypes.StartLoadingMetadata;
 }
 
+export class ErrorLoadingAudit implements Action {
+  public readonly type = DarsActionTypes.ErrorLoadingAudit;
+  constructor(public payload: { message: string }) {}
+}
+
 export class AddAuditMetadata implements Action {
   public readonly type = DarsActionTypes.AddAuditMetadata;
   constructor(public payload: { metadata: AuditMetadata[] }) {}

src/app/dars/store/effects.ts

 import { Injectable } from '@angular/core';
 import { Actions, Effect, ofType } from '@ngrx/effects';
-import { DarsActionTypes, AddAuditMetadata } from '@app/dars/store/actions';
-import { flatMap, map } from 'rxjs/operators';
+import { DarsActionTypes } from '@app/dars/store/actions';
+import * as darsActions from '@app/dars/store/actions';
+import { flatMap, map, catchError } from 'rxjs/operators';
 import { DarsApiService } from '../services/api.service';
+import { of } from 'rxjs';
 
 @Injectable()
 export class DARSEffects {
@@ -12,6 +14,13 @@ export class DARSEffects {
   load$ = this.actions$.pipe(
     ofType(DarsActionTypes.StartLoadingMetadata),
     flatMap(() => this.api.getAudits()),
-    map(metadata => new AddAuditMetadata({ metadata })),
+    map(metadata => new darsActions.AddAuditMetadata({ metadata })),
+    catchError(() => {
+      return of(
+        new darsActions.ErrorLoadingMetadata({
+          message: 'Unable to load audit metadata. Please try again',
+        }),
+      );
+    }),
   );
 }

src/app/dars/store/reducer.ts

@@ -3,6 +3,7 @@ import { DarsActionTypes } from './actions';
 import * as darsActions from './actions';
 
 type SupportedActions =
+  | darsActions.ErrorLoadingMetadata
   | darsActions.AddAuditMetadata
   | darsActions.StartLoadingAudit
   | darsActions.DoneLoadingAudit
@@ -13,6 +14,15 @@ export function darsReducer(
   action: SupportedActions,
 ): DARSState {
   switch (action.type) {
+    case DarsActionTypes.ErrorLoadingMetadata: {
+      return {
+        ...state,
+        metadata: {
+          status: 'Error',
+          message: action.payload.message,
+        },
+      };
+    }
     case DarsActionTypes.AddAuditMetadata: {
       if (state.metadata.status === 'Loaded') {
         return {

src/app/dars/store/state.ts

@@ -3,9 +3,11 @@ import { Audit } from '../models/audit';
 
 export interface DARSState {
   metadata:
+    | { status: 'Error'; message: string }
     | { status: 'Loading' }
     | { status: 'Loaded'; metadata: AuditMetadata[] };
   visibleAudit:
+    | { status: 'Error'; message: string }
     | { status: 'NotLoaded' }
     | { status: 'Loading'; metadata: AuditMetadata }
     | { status: 'Loaded'; metadata: AuditMetadata; audit: Audit };