#67 adding required ngrx interactions to remove an activity

Author: enriquezrene

src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts

@@ -9,6 +9,7 @@ describe('ActivityListComponent', () => {
   let component: ActivityListComponent;
   let fixture: ComponentFixture<ActivityListComponent>;
   let mockActivitiesSelector;
+  const activityToDelete = { id: '1', name: 'X', description: 'ABC'};
 
   const state = { data: [{id: 'id', name: 'name', description: 'description'}], isLoading: false, message: '' };
 
@@ -36,6 +37,35 @@ describe('ActivityListComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('showModal is true onSelectActivityToDelete', () => {
+    component.onSelectActivityToDelete(activityToDelete);
+
+    expect(component.showModal).toBeTruthy();
+  });
+
+  it('selectedActivity is propulated onSelectActivityToDelete', () => {
+    component.onSelectActivityToDelete(activityToDelete);
+
+    expect(component.selectedActivity).toEqual(activityToDelete);
+  });
+
+  it('deleteActivity is dispatched onConfirmDeleteActivity', () => {
+    spyOn(store, 'dispatch');
+    component.selectedActivity = activityToDelete;
+
+    component.onConfirmDeleteActivity();
+
+    expect(store.dispatch).toHaveBeenCalled();
+  });
+
+  it('showModal is false and selectedProject is null onConfirmDeleteActivity', () => {
+    component.selectedActivity = activityToDelete;
+    component.onConfirmDeleteActivity();
+
+    expect(component.showModal).toBeFalsy();
+    expect(component.selectedActivity).toBe(null);
+  });
+
   it('onInit, LoadActivities action is dispatched', () => {
     spyOn(store, 'dispatch');
 

src/app/modules/activities-management/components/activity-list/activity-list.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 
 import { allActivities } from '../../store';
-import { LoadActivities } from './../../store/activity-management.actions';
+import { LoadActivities, DeleteActivity } from './../../store/activity-management.actions';
 import { ActivityState } from './../../store/activity-management.reducers';
 import { Activity } from '../../../shared/models';
 
@@ -13,16 +13,28 @@ export class ActivityListComponent implements OnInit {
   @Input()activities: Activity[] = [];
   public isLoading: boolean;
 
+  showModal: boolean;
+  selectedActivity: Activity;
+
   constructor(private store: Store<ActivityState>) { }
 
   ngOnInit() {
     this.store.dispatch(new LoadActivities());
     const activities$ = this.store.pipe(select(allActivities));
-
     activities$.subscribe(response => {
       this.isLoading = response.isLoading;
       this.activities = response.data;
     });
   }
 
+  onSelectActivityToDelete(activityToDelete: Activity) {
+    this.showModal = true;
+    this.selectedActivity = activityToDelete;
+  }
+
+  onConfirmDeleteActivity() {
+    this.showModal = false;
+    this.store.dispatch(new DeleteActivity(this.selectedActivity.id));
+    this.selectedActivity = null;
+  }
 }

src/app/modules/activities-management/services/activity.service.ts

@@ -17,4 +17,8 @@ export class ActivityService {
   getActivities(): Observable<Activity[]> {
     return this.http.get<Activity[]>(this.baseUrl);
   }
+
+  deleteActivity(acitivityId) {
+    throw new Error('Method not implemented.');
+  }
 }

src/app/modules/activities-management/store/activity-management.actions.spec.ts

@@ -1,16 +1,21 @@
-import { LoadActivitiesFail } from './activity-management.actions';
+import { LoadActivitiesFail, DeleteActivity } from './activity-management.actions';
 import { LoadActivitiesSuccess, ActivityManagementActionTypes } from './activity-management.actions';
 
 describe('LoadActivitiesSuccess', () => {
 
-  it('LoadActivitiesSuccess type is ActivityManagementActionTypes.LoadActivitiesSuccess', () => {
+  it('LoadActivitiesSuccess type is LOAD_ACTIVITIES_SUCCESS', () => {
     const loadActivitiesSuccess = new LoadActivitiesSuccess([]);
-    expect(loadActivitiesSuccess.type).toEqual(ActivityManagementActionTypes.LoadActivitiesSuccess);
+    expect(loadActivitiesSuccess.type).toEqual(ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS);
   });
 
-  it('LoadActivitiesFail type is ActivityManagementActionTypes.LoadActivitiesFail', () => {
+  it('LoadActivitiesFail type is LOAD_ACTIVITIES_FAIL', () => {
     const loadActivitiesFail = new LoadActivitiesFail('error');
-    expect(loadActivitiesFail.type).toEqual(ActivityManagementActionTypes.LoadActivitiesFail);
+    expect(loadActivitiesFail.type).toEqual(ActivityManagementActionTypes.LOAD_ACTIVITIES_FAIL);
+  });
+
+  it('action DeleteActivity type is DELETE_ACTIVITY', () => {
+    const action = new DeleteActivity('1');
+    expect(action.type).toEqual(ActivityManagementActionTypes.DELETE_ACTIVITY);
   });
 
 });

src/app/modules/activities-management/store/activity-management.actions.ts

@@ -3,26 +3,41 @@ import { Action } from '@ngrx/store';
 import { Activity } from './../../shared/models/activity.model';
 
 export enum ActivityManagementActionTypes {
-    LoadActivities = '[ActivityManagement] Load Activities',
-    LoadActivitiesSuccess = '[ActivityManagement] Load Activities Successs',
-    LoadActivitiesFail = '[ActivityManagement] Load Activities Fail',
+    LOAD_ACTIVITIES = '[ActivityManagement] Load Activities',
+    LOAD_ACTIVITIES_SUCCESS = '[ActivityManagement] Load Activities Successs',
+    LOAD_ACTIVITIES_FAIL = '[ActivityManagement] Load Activities Fail',
+    DELETE_ACTIVITY = '[ActivityManagement] Delete Activity',
+    DELETE_ACTIVITY_SUCCESS = '[ActivityManagement] Delete Activity Success',
 }
 
+export class DeleteActivity implements Action {
+    public readonly type = ActivityManagementActionTypes.DELETE_ACTIVITY;
+
+    constructor(public activityId: string) { }
+}
+
+export class DeleteActivitySuccess implements Action {
+    public readonly type = ActivityManagementActionTypes.DELETE_ACTIVITY_SUCCESS;
+
+    constructor(public activityId: string) { }
+}
 
 export class LoadActivities implements Action {
-    public readonly type = ActivityManagementActionTypes.LoadActivities;
+    public readonly type = ActivityManagementActionTypes.LOAD_ACTIVITIES;
 }
 
 export class LoadActivitiesSuccess implements Action {
-    public readonly type = ActivityManagementActionTypes.LoadActivitiesSuccess;
+    public readonly type = ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS;
 
     constructor(public payload: Activity[]) { }
 }
 
 export class LoadActivitiesFail implements Action {
-    public readonly type = ActivityManagementActionTypes.LoadActivitiesFail;
+    public readonly type = ActivityManagementActionTypes.LOAD_ACTIVITIES_FAIL;
 
     constructor(public error) { }
 }
 
-export type ActivityManagementActions = LoadActivities | LoadActivitiesSuccess | LoadActivitiesFail;
+export type ActivityManagementActions
+= DeleteActivitySuccess | DeleteActivity |
+LoadActivities | LoadActivitiesSuccess | LoadActivitiesFail;

src/app/modules/activities-management/store/activity-management.effects.ts

@@ -1,28 +1,32 @@
-import { Injectable } from '@angular/core';
-import { Actions, Effect, ofType } from '@ngrx/effects';
-import { Action } from '@ngrx/store';
-import { Observable, of } from 'rxjs';
-import { catchError, map, mergeMap } from 'rxjs/operators';
+import {Injectable} from '@angular/core';
+import {Actions, Effect, ofType} from '@ngrx/effects';
+import {Action} from '@ngrx/store';
+import {Observable, of} from 'rxjs';
+import {catchError, map, mergeMap} from 'rxjs/operators';
 
-import { ActivityManagementActionTypes, LoadActivitiesSuccess, LoadActivitiesFail } from './activity-management.actions';
-import { Activity } from './../../shared/models/activity.model';
-import { ActivityService } from './../services/activity.service';
+import {ActivityManagementActionTypes, LoadActivitiesSuccess, LoadActivitiesFail} from './activity-management.actions';
+import {Activity} from './../../shared/models/activity.model';
+import {ActivityService} from './../services/activity.service';
 
 @Injectable()
 export class ActivityEffects {
 
-    constructor(private actions$: Actions, private activityService: ActivityService) { }
+    constructor(private actions$: Actions, private activityService: ActivityService) {}
 
     @Effect()
-    getActivities$: Observable<Action> = this.actions$.pipe(
-        ofType(ActivityManagementActionTypes.LoadActivities),
-        mergeMap(() =>
-            this.activityService.getActivities().pipe(
-                map((activities: Activity[]) => {
-                    return new LoadActivitiesSuccess(activities);
-                }),
-                catchError((error) =>
-                    of(new LoadActivitiesFail(error)))
-            )
-        ));
+    getActivities$: Observable < Action > = this
+        .actions$
+        .pipe(ofType(ActivityManagementActionTypes.LOAD_ACTIVITIES),
+        mergeMap(() => this.activityService.getActivities().pipe(map((activities: Activity[]) => {
+            return new LoadActivitiesSuccess(activities);
+        }), catchError((error) => of(new LoadActivitiesFail(error))))));
+
+    // TODO: implement the proper code to delete an activity
+        // @Effect()
+    // deleteActivity$: Observable < Action > = this
+    //     .actions$
+    //     .pipe(ofType(ActivityManagementActionTypes.DELETE_ACTIVITY),
+    //     mergeMap(() => this.activityService.deleteActivity().pipe(map((activities: Activity[]) => {
+    //         return new LoadActivitiesSuccess(activities);
+    //     }), catchError((error) => of(new LoadActivitiesFail(error))))));
 }

src/app/modules/activities-management/store/activity-management.reducers.spec.ts

@@ -1,5 +1,6 @@
+import { NavbarComponent } from './../../shared/components/navbar/navbar.component';
 import { Activity } from './../../shared/models/activity.model';
-import { LoadActivitiesFail, LoadActivities } from './activity-management.actions';
+import { LoadActivitiesFail, LoadActivities, DeleteActivity } from './activity-management.actions';
 import { LoadActivitiesSuccess } from './activity-management.actions';
 import { activityManagementReducer, ActivityState } from './activity-management.reducers';
 
@@ -31,4 +32,13 @@ describe('activityManagementReducer', () => {
     expect(state.message).toEqual('Something went wrong fetching activities!');
   });
 
+  it('on DeleteActivity, message equal to Activity removed successfully!', () => {
+    const activityToDeleteId = '1';
+    const action = new DeleteActivity(activityToDeleteId);
+
+    const state = activityManagementReducer(initialState, action);
+
+    expect(state.message).toEqual('Activity removed successfully!');
+  });
+
 });

src/app/modules/activities-management/store/activity-management.reducers.ts

@@ -13,25 +13,41 @@ const initialState: ActivityState = {
   message: ''
 };
 
-export function activityManagementReducer(state = initialState, action: ActivityManagementActions): ActivityState {
+export function activityManagementReducer(state: ActivityState = initialState, action: ActivityManagementActions): ActivityState {
 
   switch (action.type) {
-    case(ActivityManagementActionTypes.LoadActivities): {
+    case(ActivityManagementActionTypes.DELETE_ACTIVITY): {
+      return {
+        ...state,
+        message: 'Activity removed successfully!'
+      };
+    }
+
+    case(ActivityManagementActionTypes.DELETE_ACTIVITY_SUCCESS): {
+      const stateWithDeletedActivity = initialState;
+      stateWithDeletedActivity.data = state.data.filter(activity => activity.id !== action.activityId);
+      return {
+        ...stateWithDeletedActivity,
+        message: 'Activity removed successfully!'
+      };
+    }
+
+    case(ActivityManagementActionTypes.LOAD_ACTIVITIES): {
         return {
           ...state,
           isLoading: true
         };
       }
 
-    case ActivityManagementActionTypes.LoadActivitiesSuccess: {
+    case ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS: {
         return {
           ...state,
           data: action.payload,
           isLoading: false,
           message: 'Data fetch successfully!'
         };
       }
-    case ActivityManagementActionTypes.LoadActivitiesFail: {
+    case ActivityManagementActionTypes.LOAD_ACTIVITIES_FAIL: {
         return { data: [], isLoading: false, message: 'Something went wrong fetching activities!' };
       }
   }