#67 delete activities

Author: daros10

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

@@ -10,7 +10,7 @@ <h2 class="mb-0">
               </a>
               <div class="btn-group float-right" role="group">
                 <i class="far fa-edit btn btn-link text-white"></i>
-                <i class="far fa-trash-alt btn btn-link text-white"></i>
+                <i (click)="deleteActivity(activity.id)" class="far fa-trash-alt btn btn-link text-white"></i>
               </div>
             </h2>
           </div>

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

@@ -2,7 +2,7 @@ import { Input, OnInit } from '@angular/core';
 import { Component } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 
-import { LoadActivities } from './../../store/activity-management.actions';
+import { LoadActivities, DeleteActivity } from './../../store/activity-management.actions';
 import { ActivityState } from './../../store/activity-management.reducers';
 import { allActivities } from '../../store';
 import { Activity } from '../../../shared/models';
@@ -27,4 +27,8 @@ export class ActivityListComponent implements OnInit {
       this.activities = response.data;
     });
   }
+
+  deleteActivity(activityId: string) {
+    this.store.dispatch(new DeleteActivity(activityId));
+  }
 }

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

@@ -54,4 +54,14 @@ describe('Activity Service', () => {
     expect(createActivitiesRequest.request.method).toBe('POST');
     createActivitiesRequest.flush(activity);
   });
+
+  it('activities are delete using DELETE from baseUrl', () => {
+    const url = `${service.baseUrl}/1`;
+    service.deleteActivity(activities[0].id).subscribe((activitiesInResponse) => {
+      expect(activitiesInResponse.filter((activity) => activity.id !== activities[0].id)).toEqual([activities[1]]);
+    });
+    const getActivitiesRequest = httpMock.expectOne(url);
+    expect(getActivitiesRequest.request.method).toBe('DELETE');
+    getActivitiesRequest.flush(activities);
+  });
 });

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

@@ -25,4 +25,9 @@ export class ActivityService {
 
     return this.http.post(this.baseUrl, body);
   }
+
+  deleteActivity(acitivityId: string): Observable<any> {
+    const url = `${this.baseUrl}/${acitivityId}`;
+    return this.http.delete(url);
+  }
 }

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

@@ -9,6 +9,8 @@ export enum ActivityManagementActionTypes {
   CREATE_ACTIVITY = '[ActivityManagement] CREATE_ACTIVITY',
   CREATE_ACTIVITY_SUCCESS = '[ActivityManagement] CREATE_ACTIVITY_SUCCESS',
   CREATE_ACTIVITY_FAIL = '[ActivityManagement] CREATE_ACTIVITY_FAIL',
+  DELETE_ACTIVITY = '[ActivityManagement] Delete Activity',
+  DELETE_ACTIVITY_SUCCESS = '[ActivityManagement] Delete Activity Success',
 }
 
 export class LoadActivities implements Action {
@@ -45,10 +47,24 @@ export class CreateActivityFail implements Action {
   constructor(public error: string) {}
 }
 
+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 type ActivityManagementActions =
   | LoadActivities
   | LoadActivitiesSuccess
   | LoadActivitiesFail
   | CreateActivity
   | CreateActivitySuccess
-  | CreateActivityFail;
+  | CreateActivityFail
+  | DeleteActivity
+  | DeleteActivitySuccess;

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

@@ -7,6 +7,7 @@ import { catchError, map, mergeMap } from 'rxjs/operators';
 import * as actions from './activity-management.actions';
 import { Activity } from './../../shared/models/activity.model';
 import { ActivityService } from './../services/activity.service';
+import { ActivityManagementActionTypes, DeleteActivitySuccess } from './activity-management.actions';
 
 @Injectable()
 export class ActivityEffects {
@@ -38,4 +39,17 @@ export class ActivityEffects {
       )
     )
   );
+
+  @Effect()
+  deleteActivity$: Observable<Action> = this.actions$.pipe(
+    ofType(ActivityManagementActionTypes.DELETE_ACTIVITY),
+    map((action: actions.DeleteActivity) => action.activityId),
+    mergeMap((activityId) =>
+      this.activityService.deleteActivity(activityId).pipe(
+        map(() => {
+          return new DeleteActivitySuccess(activityId);
+        })
+      )
+    )
+  );
 }

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

@@ -5,6 +5,7 @@ import {
   CreateActivitySuccess,
   CreateActivityFail,
   CreateActivity,
+  DeleteActivity,
 } from './activity-management.actions';
 import { LoadActivitiesSuccess } from './activity-management.actions';
 import { activityManagementReducer, ActivityState } from './activity-management.reducers';
@@ -63,4 +64,13 @@ describe('activityManagementReducer', () => {
     expect(state.message).toEqual('Something went wrong creating activities!');
     expect(state.isLoading).toEqual(false);
   });
+
+  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

@@ -56,6 +56,21 @@ export function activityManagementReducer(state: ActivityState = initialState, a
         message: 'Something went wrong creating activities!',
       };
     }
+    case ActivityManagementActionTypes.DELETE_ACTIVITY: {
+      return {
+        ...state,
+        message: 'Activity removed successfully!',
+      };
+    }
+
+    case ActivityManagementActionTypes.DELETE_ACTIVITY_SUCCESS: {
+      const activites = state.data.filter((activity) => activity.id !== action.activityId);
+      return {
+        data: activites,
+        isLoading: false,
+        message: 'Activity removed successfully!',
+      };
+    }
     default:
       return state;
   }