refactor: TT-327 Replace recently projects

Author: Andrés Soto

src/app/modules/customer-management/components/projects/components/create-project/create-project.component.spec.ts

@@ -17,6 +17,7 @@ describe('InputProjectComponent', () => {
   const state = {
     projects: [{ id: '', name: '', project_type_id: '' }],
     customerProjects: [{ id: '', name: '', project_type_id: '' }],
+    recentProjects: [],
     isLoading: false,
     message: '',
     projectToEdit: undefined,

src/app/modules/customer-management/components/projects/components/project-list/project-list.component.spec.ts

@@ -23,6 +23,7 @@ describe('ProjectListComponent', () => {
   const state: ProjectState = {
     projects: [project],
     customerProjects: [project],
+    recentProjects: [],
     isLoading: false,
     message: '',
     projectToEdit: undefined,

src/app/modules/customer-management/components/projects/components/services/project.service.spec.ts

@@ -59,6 +59,16 @@ describe('ProjectService', () => {
     getProjectsRequest.flush(projectsList);
   });
 
+  it('recent projects are read using GET from url/recent', () => {
+    const projectsFoundSize = projectsList.length;
+    service.getRecentProjects().subscribe((projectsInResponse) => {
+      expect(projectsInResponse.length).toBe(projectsFoundSize);
+    });
+    const getProjectsRequest = httpMock.expectOne(`${service.url}/recent`);
+    expect(getProjectsRequest.request.method).toBe('GET');
+    getProjectsRequest.flush(projectsList);
+  });
+
   it('create project using POST from url', () => {
     const project: Project[] = [{ id: '1', name: 'ccc', description: 'xxx', project_type_id: '123' }];
     service.url = 'projects';

src/app/modules/customer-management/components/projects/components/services/project.service.ts

@@ -22,6 +22,10 @@ export class ProjectService {
     return this.http.get<Project[]>(this.url);
   }
 
+  getRecentProjects(): Observable<Project[]> {
+    return this.http.get<Project[]>(`${this.url}/recent`);
+  }
+
   createProject(projectData): Observable<any> {
     return this.http.post<Project[]>(this.url, projectData);
   }

src/app/modules/customer-management/components/projects/components/store/project.actions.spec.ts

@@ -27,6 +27,16 @@ describe('Actions for Projects', () => {
     expect(LoadCustomerProjectsFail.type).toEqual(actions.ProjectActionTypes.LOAD_CUSTOMER_PROJECTS_FAIL);
   });
 
+  it('LoadRecentProjectsSuccess type is ProjectActionTypes.LOAD_RECENT_PROJECTS_SUCCESS', () => {
+    const action = new actions.LoadRecentProjectsSuccess([]);
+    expect(action.type).toEqual(actions.ProjectActionTypes.LOAD_RECENT_PROJECTS_SUCCESS);
+  });
+
+  it('LoadRecentProjectsFail type is ProjectActionTypes.LOAD_RECENT_PROJECTS_FAIL', () => {
+    const action = new actions.LoadRecentProjectsFail('error');
+    expect(action.type).toEqual(actions.ProjectActionTypes.LOAD_RECENT_PROJECTS_FAIL);
+  });
+
   it('CreateProjectSuccess type is ProjectActionTypes.CREATE_PROJECT_SUCCESS', () => {
     const createProjectSuccess = new actions.CreateProjectSuccess({
       id: '1',

src/app/modules/customer-management/components/projects/components/store/project.actions.ts

@@ -8,6 +8,9 @@ export enum ProjectActionTypes {
   LOAD_CUSTOMER_PROJECTS = '[Projects] LOAD_CUSTOMER_PROJECTS',
   LOAD_CUSTOMER_PROJECTS_SUCCESS = '[Projects] LOAD_CUSTOMER_PROJECTS_SUCCESS',
   LOAD_CUSTOMER_PROJECTS_FAIL = '[Projects] LOAD_CUSTOMER_PROJECTS_FAIL',
+  LOAD_RECENT_PROJECTS = '[Projects] LOAD_RECENT_PROJECTS',
+  LOAD_RECENT_PROJECTS_SUCCESS = '[Projects] LOAD_RECENT_PROJECTS_SUCCESS',
+  LOAD_RECENT_PROJECTS_FAIL = '[Projects] LOAD_RECENT_PROJECTS_FAIL',
   CREATE_PROJECT = '[Projects] CREATE_PROJECT',
   CREATE_PROJECT_SUCCESS = '[Projects] CREATE_PROJECT_SUCCESS',
   CREATE_PROJECT_FAIL = '[Projects] CREATE_PROJECT_FAIL',
@@ -60,6 +63,21 @@ export class LoadCustomerProjectsFail implements Action {
   constructor(public error: string) {}
 }
 
+export class LoadRecentProjects implements Action {
+  public readonly type = ProjectActionTypes.LOAD_RECENT_PROJECTS;
+  constructor() {}
+}
+
+export class LoadRecentProjectsSuccess implements Action {
+  readonly type = ProjectActionTypes.LOAD_RECENT_PROJECTS_SUCCESS;
+  constructor(readonly payload: Project[]) {}
+}
+
+export class LoadRecentProjectsFail implements Action {
+  public readonly type = ProjectActionTypes.LOAD_RECENT_PROJECTS_FAIL;
+  constructor(public error: string) {}
+}
+
 export class CreateProject implements Action {
   public readonly type = ProjectActionTypes.CREATE_PROJECT;
 
@@ -150,6 +168,9 @@ export type ProjectActions =
   | LoadCustomerProjects
   | LoadCustomerProjectsSuccess
   | LoadCustomerProjectsFail
+  | LoadRecentProjects
+  | LoadRecentProjectsSuccess
+  | LoadRecentProjectsFail
   | CreateProject
   | CreateProjectSuccess
   | CreateProjectFail

src/app/modules/customer-management/components/projects/components/store/project.effects.spec.ts

@@ -55,6 +55,28 @@ describe('ProjectEffects', () => {
     });
   });
 
+  it('action type is LOAD_RECENT_PROJECTS_SUCCESS when service is executed sucessfully', async () => {
+    actions$ = of({ type: ProjectActionTypes.LOAD_RECENT_PROJECTS });
+    const serviceSpy = spyOn(service, 'getRecentProjects');
+    serviceSpy.and.returnValue(of(projects));
+
+    effects.loadRecentProjects$.subscribe((action) => {
+      expect(action.type).toEqual(ProjectActionTypes.LOAD_RECENT_PROJECTS_SUCCESS);
+    });
+  });
+
+  it('action type is LOAD_RECENT_PROJECTS_FAIL when service fail in execution', async () => {
+    actions$ = of({ type: ProjectActionTypes.LOAD_RECENT_PROJECTS });
+    const serviceSpy = spyOn(service, 'getRecentProjects');
+    serviceSpy.and.returnValue(throwError({ error: { message: 'fail!' } }));
+    spyOn(toastrService, 'error');
+
+    effects.loadRecentProjects$.subscribe((action) => {
+      expect(toastrService.error).toHaveBeenCalled();
+      expect(action.type).toEqual(ProjectActionTypes.LOAD_RECENT_PROJECTS_FAIL);
+    });
+  });
+
   it('action type is UPDATE_PROJECT_SUCCESS when service is executed sucessfully', async () => {
     actions$ = of({ type: ProjectActionTypes.UPDATE_PROJECT, project });
     spyOn(toastrService, 'success');

src/app/modules/customer-management/components/projects/components/store/project.effects.ts

@@ -49,6 +49,22 @@ export class ProjectEffects {
     )
   );
 
+  @Effect()
+  loadRecentProjects$: Observable<Action> = this.actions$.pipe(
+    ofType(actions.ProjectActionTypes.LOAD_RECENT_PROJECTS),
+    mergeMap(() =>
+      this.projectService.getRecentProjects().pipe(
+        map((projects) => {
+          return new actions.LoadRecentProjectsSuccess(projects);
+        }),
+        catchError((error) => {
+          this.toastrService.error(error.error.message);
+          return of(new actions.LoadRecentProjectsFail(error));
+        })
+      )
+    )
+  );
+
   @Effect()
   createProject$: Observable<Action> = this.actions$.pipe(
     ofType(actions.ProjectActionTypes.CREATE_PROJECT),

src/app/modules/customer-management/components/projects/components/store/project.reducer.spec.ts

@@ -5,7 +5,9 @@ import { projectReducer, ProjectState } from './project.reducer';
 describe('projectReducer', () => {
   const initialState: ProjectState = {
     projects: [{ id: 'id', name: 'name', project_type_id: '', status: 'inactive' }],
-    customerProjects: [], isLoading: false, message: '', projectToEdit: undefined
+    customerProjects: [],
+    recentProjects: [],
+    isLoading: false, message: '', projectToEdit: undefined
   };
   const archivedProject: Project = { id: '1', name: 'aaa', description: 'bbb', project_type_id: '123', status: 'inactive' };
   const project: Project = { id: '1', name: 'aaa', description: 'bbb', project_type_id: '123', status: 'active' };
@@ -38,6 +40,29 @@ describe('projectReducer', () => {
     expect(state.customerProjects).toEqual([]);
   });
 
+  it('on LoadRecentProjects, isLoading is true', () => {
+    const action = new actions.LoadRecentProjects();
+    const state = projectReducer(initialState, action);
+    expect(state.isLoading).toEqual(true);
+  });
+
+  it('on LoadRecentProjectsSuccess, projectsFound are saved in the store', () => {
+    const projectsFound: Project[] = [{ id: '1', name: 'abc', description: 'xxx', status: 'active' }];
+    const newState = initialState;
+    newState.recentProjects = projectsFound;
+    const action = new actions.LoadRecentProjectsSuccess(projectsFound);
+    const state = projectReducer(initialState, action);
+    expect(state).toEqual(newState);
+  });
+
+  it('on LoadRecentProjectsFail, recentProjects equal []', () => {
+    const newState = initialState;
+    newState.recentProjects = [];
+    const action = new actions.LoadRecentProjectsFail('error');
+    const state = projectReducer(initialState, action);
+    expect(state).toEqual(newState);
+  });
+
   it('on CreateProject, isLoading is true', () => {
     const action = new actions.CreateProject(project);
     const state = projectReducer(initialState, action);
@@ -74,6 +99,7 @@ describe('projectReducer', () => {
     const currentState: ProjectState = {
       projects: [project],
       customerProjects: [project],
+      recentProjects: [project],
       isLoading: false,
       message: '',
       projectToEdit: project,
@@ -124,6 +150,7 @@ describe('projectReducer', () => {
     const currentState: ProjectState = {
       projects: [project],
       customerProjects: [project],
+      recentProjects: [project],
       isLoading: false,
       message: '',
       projectToEdit: undefined,
@@ -158,6 +185,7 @@ describe('projectReducer', () => {
     const currentState: ProjectState = {
       projects: [project],
       customerProjects: [archivedProject],
+      recentProjects: [project],
       isLoading: false,
       message: '',
       projectToEdit: project,

src/app/modules/customer-management/components/projects/components/store/project.reducer.ts

@@ -4,6 +4,7 @@ import { Project } from '../../../../../shared/models';
 export interface ProjectState {
   projects: Project[];
   customerProjects: Project[];
+  recentProjects: Project[];
   isLoading: boolean;
   message: string;
   projectToEdit: Project;
@@ -12,6 +13,7 @@ export interface ProjectState {
 export const initialState = {
   projects: [],
   customerProjects: [],
+  recentProjects: [],
   isLoading: false,
   message: '',
   projectToEdit: undefined,
@@ -65,6 +67,27 @@ export const projectReducer = (state: ProjectState = initialState, action: Proje
       };
     }
 
+    case ProjectActionTypes.LOAD_RECENT_PROJECTS: {
+      return {
+        ...state,
+        isLoading: true,
+      };
+    }
+    case ProjectActionTypes.LOAD_RECENT_PROJECTS_SUCCESS:
+      return {
+        ...state,
+        recentProjects: action.payload,
+        isLoading: false
+      };
+
+    case ProjectActionTypes.LOAD_RECENT_PROJECTS_FAIL: {
+      return {
+        ...state,
+        recentProjects: [],
+        isLoading: false,
+      };
+    }
+
     case ProjectActionTypes.CREATE_PROJECT: {
       return {
         ...state,