#67 functionality to delete added

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.spec.ts

@@ -4,27 +4,27 @@ import { allActivities } from './../../store/activity-management.selectors';
 import { ActivityState } from './../../store/activity-management.reducers';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivityListComponent } from './activity-list.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('ActivityListComponent', () => {
   let component: ActivityListComponent;
   let fixture: ComponentFixture<ActivityListComponent>;
   let mockActivitiesSelector;
-  const activityToDelete = { id: '1', name: 'X', description: 'ABC'};
+  const activityToDelete = { id: '1', name: 'X', description: 'ABC' };
 
-  const state = { data: [{id: 'id', name: 'name', description: 'description'}], isLoading: false, message: '' };
+  const state = { data: [{ id: 'id', name: 'name', description: 'description' }], isLoading: false, message: '' };
 
   let store: MockStore<ActivityState>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ActivityListComponent ],
-      providers: [ provideMockStore({ initialState: state }) ]
-    })
-    .compileComponents();
+      declarations: [ActivityListComponent],
+      providers: [provideMockStore({ initialState: state })],
+    }).compileComponents();
 
     store = TestBed.inject(MockStore);
 
-    mockActivitiesSelector = store.overrideSelector( allActivities, state );
+    mockActivitiesSelector = store.overrideSelector(allActivities, state);
   }));
 
   beforeEach(() => {
@@ -37,35 +37,16 @@ describe('ActivityListComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('showModal is true onSelectActivityToDelete', () => {
-    component.onSelectActivityToDelete(activityToDelete);
+  it('deleteActivity is dispatched in onClick event', () => {
+    const activityId = 'abcd';
 
-    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();
+    component.deleteActivity(activityId);
 
     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');
 
@@ -80,6 +61,7 @@ describe('ActivityListComponent', () => {
     expect(component.activities).toBe(state.data);
   });
 
-  afterEach(() => { fixture.destroy(); });
-
+  afterEach(() => {
+    fixture.destroy();
+  });
 });

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

@@ -3,38 +3,35 @@ import { Component } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 
 import { allActivities } from '../../store';
-import { LoadActivities, DeleteActivity } from './../../store/activity-management.actions';
+import { LoadActivities, DeleteActivity, DeleteActivitySuccess } from './../../store/activity-management.actions';
 import { ActivityState } from './../../store/activity-management.reducers';
 import { Activity } from '../../../shared/models';
+import { ActivityService } from '../../services/activity.service';
 
-@Component({selector: 'app-activity-list', templateUrl: './activity-list.component.html', styleUrls: ['./activity-list.component.scss']})
+@Component({
+  selector: 'app-activity-list',
+  templateUrl: './activity-list.component.html',
+  styleUrls: ['./activity-list.component.scss'],
+})
 export class ActivityListComponent implements OnInit {
-
-  @Input()activities: Activity[] = [];
+  @Input() activities: Activity[] = [];
   public isLoading: boolean;
 
   showModal: boolean;
   selectedActivity: Activity;
 
-  constructor(private store: Store<ActivityState>) { }
+  constructor(private store: Store<ActivityState>, private service: ActivityService) {}
 
   ngOnInit() {
     this.store.dispatch(new LoadActivities());
     const activities$ = this.store.pipe(select(allActivities));
-    activities$.subscribe(response => {
+    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;
+  deleteActivity(activityId: string) {
+    this.store.dispatch(new DeleteActivity(activityId));
   }
 }

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

@@ -6,10 +6,9 @@ import { environment } from './../../../../environments/environment';
 import { Activity } from '../../shared/models';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ActivityService {
-
   baseUrl = `${environment.timeTrackerApiUrl}/activities`;
 
   constructor(private http: HttpClient) {}
@@ -18,7 +17,8 @@ export class ActivityService {
     return this.http.get<Activity[]>(this.baseUrl);
   }
 
-  deleteActivity(acitivityId) {
-    throw new Error('Method not implemented.');
+  deleteActivity(acitivityId: string) {
+    const url = `${this.baseUrl}/${acitivityId}`;
+    return this.http.delete<void>(url);
   }
 }

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

@@ -3,41 +3,44 @@ import { Action } from '@ngrx/store';
 import { Activity } from './../../shared/models/activity.model';
 
 export enum ActivityManagementActionTypes {
-    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',
+  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;
+  public readonly type = ActivityManagementActionTypes.DELETE_ACTIVITY;
 
-    constructor(public activityId: string) { }
+  constructor(public activityId: string) {}
 }
 
 export class DeleteActivitySuccess implements Action {
-    public readonly type = ActivityManagementActionTypes.DELETE_ACTIVITY_SUCCESS;
+  public readonly type = ActivityManagementActionTypes.DELETE_ACTIVITY_SUCCESS;
 
-    constructor(public activityId: string) { }
+  constructor(public activityId: string) {}
 }
 
 export class LoadActivities implements Action {
-    public readonly type = ActivityManagementActionTypes.LOAD_ACTIVITIES;
+  public readonly type = ActivityManagementActionTypes.LOAD_ACTIVITIES;
 }
 
 export class LoadActivitiesSuccess implements Action {
-    public readonly type = ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS;
+  public readonly type = ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS;
 
-    constructor(public payload: Activity[]) { }
+  constructor(public payload: Activity[]) {}
 }
 
 export class LoadActivitiesFail implements Action {
-    public readonly type = ActivityManagementActionTypes.LOAD_ACTIVITIES_FAIL;
+  public readonly type = ActivityManagementActionTypes.LOAD_ACTIVITIES_FAIL;
 
-    constructor(public error) { }
+  constructor(public error) {}
 }
 
-export type ActivityManagementActions
-= DeleteActivitySuccess | DeleteActivity |
-LoadActivities | LoadActivitiesSuccess | LoadActivitiesFail;
+export type ActivityManagementActions =
+  | DeleteActivitySuccess
+  | DeleteActivity
+  | LoadActivities
+  | LoadActivitiesSuccess
+  | LoadActivitiesFail;

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

@@ -1,32 +1,47 @@
-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,
+  DeleteActivitySuccess,
+} 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) {}
+  parameterFieldName = 'activityId';
 
-    @Effect()
-    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))))));
+  @Effect()
+  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))))));
+  @Effect()
+  deleteActivity$: Observable<Action> = this.actions$.pipe(
+    ofType(ActivityManagementActionTypes.DELETE_ACTIVITY),
+    map((action) => action[this.parameterFieldName]),
+    mergeMap((activityId) =>
+      this.activityService.deleteActivity(activityId).pipe(
+        map(() => {
+          return new DeleteActivitySuccess(activityId);
+        })
+      )
+    )
+  );
 }

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

@@ -1,5 +1,5 @@
-import {ActivityManagementActions, ActivityManagementActionTypes} from './activity-management.actions';
-import {Activity} from './../../shared/models/activity.model';
+import { ActivityManagementActions, ActivityManagementActionTypes } from './activity-management.actions';
+import { Activity } from './../../shared/models/activity.model';
 
 export interface ActivityState {
   data: Activity[];
@@ -10,45 +10,48 @@ export interface ActivityState {
 const initialState: ActivityState = {
   data: [],
   isLoading: false,
-  message: ''
+  message: '',
 };
 
-export function activityManagementReducer(state: ActivityState = initialState, action: ActivityManagementActions): ActivityState {
-
+export function activityManagementReducer(
+  state: ActivityState = initialState,
+  action: ActivityManagementActions
+): ActivityState {
   switch (action.type) {
-    case(ActivityManagementActionTypes.DELETE_ACTIVITY): {
+    case ActivityManagementActionTypes.DELETE_ACTIVITY: {
       return {
         ...state,
-        message: 'Activity removed successfully!'
+        message: 'Activity removed successfully!',
       };
     }
 
-    case(ActivityManagementActionTypes.DELETE_ACTIVITY_SUCCESS): {
+    case ActivityManagementActionTypes.DELETE_ACTIVITY_SUCCESS: {
       const stateWithDeletedActivity = initialState;
-      stateWithDeletedActivity.data = state.data.filter(activity => activity.id !== action.activityId);
+      stateWithDeletedActivity.data = state.data.filter((activity) => activity.id !== action.activityId);
+      console.log();
       return {
         ...stateWithDeletedActivity,
-        message: 'Activity removed successfully!'
+        message: 'Activity removed successfully!',
       };
     }
 
-    case(ActivityManagementActionTypes.LOAD_ACTIVITIES): {
-        return {
-          ...state,
-          isLoading: true
-        };
-      }
+    case ActivityManagementActionTypes.LOAD_ACTIVITIES: {
+      return {
+        ...state,
+        isLoading: true,
+      };
+    }
 
     case ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS: {
-        return {
-          ...state,
-          data: action.payload,
-          isLoading: false,
-          message: 'Data fetch successfully!'
-        };
-      }
+      return {
+        ...state,
+        data: action.payload,
+        isLoading: false,
+        message: 'Data fetch successfully!',
+      };
+    }
     case ActivityManagementActionTypes.LOAD_ACTIVITIES_FAIL: {
-        return { data: [], isLoading: false, message: 'Something went wrong fetching activities!' };
-      }
+      return { data: [], isLoading: false, message: 'Something went wrong fetching activities!' };
+    }
   }
 }