feat: TT-208 connect switch btn with ngrx flux

Author: thegreatyamori

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

@@ -6,14 +6,14 @@ import { ActivityState } from './../../store/activity-management.reducers';
 import { DeleteActivity, SetActivityToEdit } from './../../store/activity-management.actions';
 import { ActivityListComponent } from './activity-list.component';
 
-describe('ActivityListComponent', () => {
+fdescribe('ActivityListComponent', () => {
   let component: ActivityListComponent;
   let fixture: ComponentFixture<ActivityListComponent>;
   let store: MockStore<ActivityState>;
   let mockActivitiesSelector;
 
   const state = {
-    data: [{ id: 'id', name: 'name', description: 'description' }],
+    data: [{ id: 'id', name: 'name', description: 'description', status: 'inactive' }],
     isLoading: false,
     message: '',
     activityIdToEdit: '',

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

@@ -5,7 +5,7 @@ import { delay } from 'rxjs/operators';
 import { getIsLoading } from 'src/app/modules/activities-management/store/activity-management.selectors';
 import { Activity } from '../../../shared/models';
 import { allActivities } from '../../store';
-import { DeleteActivity, LoadActivities, SetActivityToEdit } from './../../store/activity-management.actions';
+import { DeleteActivity, LoadActivities, SetActivityToEdit, UnarchiveActivity } from './../../store/activity-management.actions';
 import { ActivityState } from './../../store/activity-management.reducers';
 
 @Component({
@@ -34,8 +34,7 @@ export class ActivityListComponent implements OnInit {
   }
 
   deleteActivity() {
-    // this.store.dispatch(new DeleteActivity(this.idToDelete));
-    console.log('despachado el evento');
+    this.store.dispatch(new DeleteActivity(this.idToDelete));
     this.showModal = false;
   }
 
@@ -47,7 +46,6 @@ export class ActivityListComponent implements OnInit {
     this.idToDelete = item.id;
     this.message = `Are you sure you want to archive activity ${item.name}?`;
     this.showModal = true;
-    console.log(`Despliegue del modal para id: ${item.id}`);
   }
 
   switchStatus(evt: boolean, item: Activity): void {
@@ -57,8 +55,7 @@ export class ActivityListComponent implements OnInit {
       this.openModal(item);
     } else {
       this.showModal = false;
-      // TODO: dispatch para actualizar la operacion
-      // this.store.dispatch(new SetToTrueActivity());
+      this.store.dispatch(new UnarchiveActivity(item.id));
     }
   }
 

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

@@ -39,6 +39,24 @@ describe('LoadActivitiesSuccess', () => {
     expect(updateActivityFail.type).toEqual(actions.ActivityManagementActionTypes.UPDATE_ACTIVITY_FAIL);
   });
 
+  fit('UnarchiveActivity type is ActivityManagementActionTypes.UNARCHIVE_ACTIVITY', () => {
+    const unarchiveActivity = new actions.UnarchiveActivity('id_test');
+    expect(unarchiveActivity.type).toEqual(actions.ActivityManagementActionTypes.UNARCHIVE_ACTIVITY);
+  });
+
+  fit('UnarchiveActivitySuccess type is ActivityManagementActionTypes.UNARCHIVE_ACTIVITY_SUCCESS', () => {
+    const unarchiveActivitySuccess = new actions.UnarchiveActivitySuccess({
+      id: 'id_test',
+      status: 'active'
+    });
+    expect(unarchiveActivitySuccess.type).toEqual(actions.ActivityManagementActionTypes.UNARCHIVE_ACTIVITY_SUCCESS);
+  });
+
+  fit('UnarchiveActivityFail type is ActivityManagementActionTypes.UNARCHIVE_ACTIVITY_FAIL', () => {
+    const unarchiveActivityFail = new actions.UnarchiveActivityFail('error');
+    expect(unarchiveActivityFail.type).toEqual(actions.ActivityManagementActionTypes.UNARCHIVE_ACTIVITY_FAIL);
+  });
+
   it('SetActivityToEdit type is ActivityManagementActionTypes.SET_ACTIVITY_ID_TO_EDIT', () => {
     const setActivityToEdit = new actions.SetActivityToEdit('123');
     expect(setActivityToEdit.type).toEqual(actions.ActivityManagementActionTypes.SET_ACTIVITY_ID_TO_EDIT);

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

@@ -1,6 +1,6 @@
 import { Action } from '@ngrx/store';
 
-import { Activity } from './../../shared/models/activity.model';
+import { Activity, Status } from './../../shared/models/activity.model';
 
 export enum ActivityManagementActionTypes {
   LOAD_ACTIVITIES = '[ActivityManagement] LOAD_ACTIVITIES',
@@ -15,6 +15,9 @@ export enum ActivityManagementActionTypes {
   UPDATE_ACTIVITY = '[ActivityManagement] UPDATE_ACTIVITY',
   UPDATE_ACTIVITY_SUCCESS = '[ActivityManagement] UPDATE_ACTIVITY_SUCCESS',
   UPDATE_ACTIVITY_FAIL = '[ActivityManagement] UPDATE_ACTIVITY_FAIL',
+  UNARCHIVE_ACTIVITY = '[ActivityManagement] UNARCHIVE_ACTIVITY',
+  UNARCHIVE_ACTIVITY_SUCCESS = '[ActivityManagement] UNARCHIVE_ACTIVITY_SUCCESS',
+  UNARCHIVE_ACTIVITY_FAIL = '[ActivityManagement] UNARCHIVE_ACTIVITY_FAIL',
   SET_ACTIVITY_ID_TO_EDIT = '[ActivityManagement] SET_ACTIVITY_ID_TO_EDIT',
   RESET_ACTIVITY_ID_TO_EDIT = '[ActivityManagement] RESET_ACTIVITY_ID_TO_EDIT',
 }
@@ -26,72 +29,88 @@ export class LoadActivities implements Action {
 export class LoadActivitiesSuccess implements Action {
   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;
 
-  constructor(public error: string) {}
+  constructor(public error: string) { }
 }
 
 export class CreateActivity implements Action {
   public readonly type = ActivityManagementActionTypes.CREATE_ACTIVITY;
 
-  constructor(public payload: Activity) {}
+  constructor(public payload: Activity) { }
 }
 
 export class CreateActivitySuccess implements Action {
   public readonly type = ActivityManagementActionTypes.CREATE_ACTIVITY_SUCCESS;
 
-  constructor(public payload: Activity) {}
+  constructor(public payload: Activity) { }
 }
 
 export class CreateActivityFail implements Action {
   public readonly type = ActivityManagementActionTypes.CREATE_ACTIVITY_FAIL;
 
-  constructor(public error: string) {}
+  constructor(public error: string) { }
 }
 
 export class DeleteActivity implements Action {
   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;
 
-  constructor(public activityId: string) {}
+  constructor(public activityId: string) { }
 }
 
 export class DeleteActivityFail implements Action {
   public readonly type = ActivityManagementActionTypes.DELETE_ACTIVITY_FAIL;
 
-  constructor(public error: string) {}
+  constructor(public error: string) { }
 }
 export class UpdateActivity implements Action {
   public readonly type = ActivityManagementActionTypes.UPDATE_ACTIVITY;
 
-  constructor(public payload: Activity) {}
+  constructor(public payload: Activity) { }
 }
 
 export class UpdateActivitySuccess implements Action {
   public readonly type = ActivityManagementActionTypes.UPDATE_ACTIVITY_SUCCESS;
 
-  constructor(public payload: Activity) {}
+  constructor(public payload: Activity) { }
 }
 
 export class UpdateActivityFail implements Action {
   public readonly type = ActivityManagementActionTypes.UPDATE_ACTIVITY_FAIL;
 
-  constructor(public error: string) {}
+  constructor(public error: string) { }
+}
+
+export class UnarchiveActivity implements Action {
+  public readonly type = ActivityManagementActionTypes.UNARCHIVE_ACTIVITY;
+
+  constructor(public payload: string) { }
+}
+export class UnarchiveActivitySuccess implements Action {
+  public readonly type = ActivityManagementActionTypes.UNARCHIVE_ACTIVITY_SUCCESS;
+
+  constructor(public payload: Status) { }
+}
+export class UnarchiveActivityFail implements Action {
+  public readonly type = ActivityManagementActionTypes.UNARCHIVE_ACTIVITY_FAIL;
+
+  constructor(public error: string) { }
 }
 
 export class SetActivityToEdit implements Action {
   public readonly type = ActivityManagementActionTypes.SET_ACTIVITY_ID_TO_EDIT;
 
-  constructor(public payload: string) {}
+  constructor(public payload: string) { }
 }
 
 export class ResetActivityToEdit implements Action {
@@ -111,5 +130,8 @@ export type ActivityManagementActions =
   | UpdateActivity
   | UpdateActivitySuccess
   | UpdateActivityFail
+  | UnarchiveActivity
+  | UnarchiveActivitySuccess
+  | UnarchiveActivityFail
   | SetActivityToEdit
   | ResetActivityToEdit;

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

@@ -15,7 +15,7 @@ describe('ActivityEffects', () => {
   let effects: ActivityEffects;
   let service: ActivityService;
   let toastrService;
-  const activity: Activity = { id: 'id', name: 'name', description: 'description', tenant_id: 'tenantId' };
+  const activity: Activity = { id: 'id', name: 'name', description: 'description', tenant_id: 'tenantId', status: 'inactive' };
   const activityList: Activity[] = [];
 
   beforeEach(() => {
@@ -77,6 +77,28 @@ describe('ActivityEffects', () => {
     });
   });
 
+  fit('action type is UNARCHIVE_ACTIVITY_SUCCESS when service is executed sucessfully', async () => {
+    actions$ = of({ type: ActivityManagementActionTypes.UNARCHIVE_ACTIVITY, activity });
+    spyOn(service, 'updateActivity').and.returnValue(of(activity));
+    spyOn(toastrService, 'success');
+
+    effects.unarchiveActivity$.subscribe((action) => {
+      expect(toastrService.success).toHaveBeenCalledWith(INFO_SAVED_SUCCESSFULLY);
+      expect(action.type).toEqual(ActivityManagementActionTypes.UNARCHIVE_ACTIVITY_SUCCESS);
+    });
+  });
+
+  fit('action type is UNARCHIVE_ACTIVITY_FAIL when service fail in execution', async () => {
+    actions$ = of({ type: ActivityManagementActionTypes.UNARCHIVE_ACTIVITY, activity });
+    spyOn(service, 'updateActivity').and.returnValue(throwError({ error: { message: 'fail!' } }));
+    spyOn(toastrService, 'error');
+
+    effects.updateActivity$.subscribe((action) => {
+      expect(toastrService.error).toHaveBeenCalled();
+      expect(action.type).toEqual(ActivityManagementActionTypes.UNARCHIVE_ACTIVITY_FAIL);
+    });
+  });
+
   it('action type is CREATE_ACTIVITY_SUCCESS when service is executed sucessfully', async () => {
     actions$ = of({ type: ActivityManagementActionTypes.CREATE_ACTIVITY, activity });
     spyOn(service, 'createActivity').and.returnValue(of(activity));

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

@@ -7,7 +7,7 @@ import { catchError, map, mergeMap } from 'rxjs/operators';
 import { ToastrService } from 'ngx-toastr';
 
 import * as actions from './activity-management.actions';
-import { Activity } from './../../shared/models/activity.model';
+import { Activity, Status } from './../../shared/models/activity.model';
 import { ActivityService } from './../services/activity.service';
 
 @Injectable()
@@ -87,4 +87,26 @@ export class ActivityEffects {
       )
     )
   );
+
+  @Effect()
+  unarchiveActivity$: Observable<Action> = this.actions$.pipe(
+    ofType(actions.ActivityManagementActionTypes.UNARCHIVE_ACTIVITY),
+    map((action: actions.UnarchiveActivity) => ({
+      id: action.payload,
+      status: 'active'
+    })
+    ),
+    mergeMap((activity: Status) =>
+      this.activityService.updateActivity(activity).pipe(
+        map((activityData) => {
+          this.toastrService.success(INFO_SAVED_SUCCESSFULLY);
+          return new actions.UnarchiveActivitySuccess(activityData);
+        }),
+        catchError((error) => {
+          this.toastrService.error(error.error.message);
+          return of(new actions.UnarchiveActivityFail(error));
+        })
+      )
+    )
+  );
 }

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

@@ -1,10 +1,10 @@
-import { Activity } from './../../shared/models/activity.model';
+import { Activity, Status } from './../../shared/models/activity.model';
 import * as actions from './activity-management.actions';
 import { activityManagementReducer, ActivityState } from './activity-management.reducers';
 
 describe('activityManagementReducer', () => {
   const initialState: ActivityState = { data: [], isLoading: false, message: '', activityIdToEdit: '' };
-  const activity: Activity = { id: '1', name: 'Training', description: 'It is good for learning' };
+  const activity: Activity = { id: '1', name: 'Training', description: 'It is good for learning', status: 'inactive' };
 
   it('on LoadActivities, isLoading is true', () => {
     const action = new actions.LoadActivities();
@@ -112,6 +112,38 @@ describe('activityManagementReducer', () => {
     expect(state.isLoading).toEqual(false);
   });
 
+
+  fit('on UnarchiveActivity, isLoading is true', () => {
+    const action = new actions.UnarchiveActivity('id_test');
+
+    const state = activityManagementReducer(initialState, action);
+
+    expect(state.isLoading).toBeTrue();
+  });
+
+  fit('on UnarchiveActivitySuccess, status activity is change to \"active\" in the store', () => {
+    const currentState: ActivityState = { data: [activity], isLoading: false, message: '', activityIdToEdit: '1' };
+    const activityEdited: Status = { id: '1', status: 'active' };
+    const expectedActivity: Activity = { id: '1', name: 'Training', description: 'It is good for learning', status: 'active' };
+
+    const action = new actions.UnarchiveActivitySuccess(activityEdited);
+
+    const state = activityManagementReducer(currentState, action);
+    console.log(state.data);
+
+    expect(state.data).toEqual([expectedActivity]);
+    expect(state.isLoading).toBeFalse();
+  });
+
+  fit('on UnarchiveActivityFail, message equal to \"Something went wrong unarchiving activities!\"', () => {
+    const action = new actions.UnarchiveActivityFail('error');
+
+    const state = activityManagementReducer(initialState, action);
+
+    expect(state.message).toEqual('Something went wrong unarchiving activities!');
+    expect(state.isLoading).toBeFalse();
+  });
+
   it('on SetActivityToEdit, should save the activityId to edit', () => {
     const action = new actions.SetActivityToEdit(activity.id);
 

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

@@ -118,6 +118,37 @@ export function activityManagementReducer(state: ActivityState = initialState, a
       };
     }
 
+    case ActivityManagementActionTypes.UNARCHIVE_ACTIVITY: {
+      return {
+        ...state,
+        isLoading: true,
+        message: 'Set activityIdToUnarchive property',
+        activityIdToEdit: action.payload,
+      };
+    }
+
+    case ActivityManagementActionTypes.UNARCHIVE_ACTIVITY_SUCCESS: {
+      const index = activityList.findIndex((activity) => activity.id === action.payload.id);
+      activityList[index] = { ...activityList[index], ...action.payload };
+
+      return {
+        ...state,
+        data: activityList,
+        isLoading: false,
+        message: 'Unarchive activity successfully!',
+        activityIdToEdit: '',
+      };
+    }
+
+    case ActivityManagementActionTypes.UNARCHIVE_ACTIVITY_FAIL: {
+      return {
+        ...state,
+        isLoading: false,
+        message: 'Something went wrong unarchiving activities!',
+        activityIdToEdit: '',
+      };
+    }
+
     case ActivityManagementActionTypes.SET_ACTIVITY_ID_TO_EDIT: {
       return {
         ...state,

src/app/modules/shared/models/activity.model.ts

@@ -5,3 +5,8 @@ export interface Activity {
   tenant_id?: string;
   status?: string;
 }
+
+export interface Status {
+  id: string;
+  status: string;
+}