reading activities from API and introducing ngrx #63

Author: enriquezrene

package-lock.json

@@ -20,6 +20,9 @@
     "@angular/platform-browser": "~9.0.3",
     "@angular/platform-browser-dynamic": "~9.0.3",
     "@angular/router": "~9.0.3",
+    "@ngrx/effects": "^9.0.0",
+    "@ngrx/store": "^9.0.0",
+    "@ngrx/store-devtools": "^9.0.0",
     "bootstrap": "^4.4.1",
     "jquery": "^3.4.1",
     "minimist": "^1.2.5",

package.json

@@ -29,6 +29,13 @@ import { SearchProjectComponent } from './modules/shared/components/search-proje
 import { HomeComponent } from './modules/home/home.component';
 import { LoginComponent } from './modules/login/login.component';
 
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+
+import { ActivityEffects } from './modules/activities-management/store/activity-management.effects';
+import { activityManagementReducer } from './modules/activities-management/store';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -56,7 +63,19 @@ import { LoginComponent } from './modules/login/login.component';
     FilterProjectPipe,
     SearchProjectComponent,
   ],
-  imports: [CommonModule, BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, HttpClientModule],
+  imports: [
+    CommonModule,
+    BrowserModule,
+    AppRoutingModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    StoreModule.forRoot({ activities: activityManagementReducer }),
+    EffectsModule.forRoot([ActivityEffects]),
+    StoreDevtoolsModule.instrument({
+      maxAge: 15, // Retains last 15 states
+    }),
+  ],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/app.module.ts

@@ -1,16 +1,31 @@
+import { allActivities } from './../../store/activity-management.selectors';
+import { Activity } from './../../../shared/models/activity.model';
+import { ActivityState } from './../../store/activity-management.reducers';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { ActivityListComponent } from './activity-list.component';
+import { MemoizedSelector, State } from '@ngrx/store';
 
 describe('ActivityListComponent', () => {
   let component: ActivityListComponent;
   let fixture: ComponentFixture<ActivityListComponent>;
+  let mockActivitiesSelector;
+
+  const state = { data: [{id: 'id', name: 'name', description: 'description'}], isLoading: false, message: '' };
+
+  let store: MockStore<ActivityState>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ActivityListComponent ]
+      declarations: [ ActivityListComponent ],
+      providers: [ provideMockStore({ initialState: state }) ]
     })
     .compileComponents();
+
+    store = TestBed.inject(MockStore);
+
+    mockActivitiesSelector = store.overrideSelector( allActivities, state );
   }));
 
   beforeEach(() => {
@@ -22,4 +37,21 @@ describe('ActivityListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('onInit, LoadActivities action is dispatched', () => {
+    spyOn(store, 'dispatch');
+
+    component.ngOnInit();
+
+    expect(store.dispatch).toHaveBeenCalled();
+  });
+
+  it('onInit, activities field is populated with data from store', () => {
+    component.ngOnInit();
+
+    expect(component.activities).toBe(state.data);
+  });
+
+  afterEach(() => { fixture.destroy(); });
+
 });

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

@@ -1,16 +1,27 @@
-import { Input } from '@angular/core';
-import { Component } from '@angular/core';
-import { Activity } from '../../../shared/models';
+import { LoadActivities } from './../../store/activity-management.actions';
+import { ActivityState } from './../../store/activity-management.reducers';
+import {Input, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
+import {Activity} from '../../../shared/models';
+import { Store, select } from '@ngrx/store';
+import { allActivities } from '../../store';
 
-@Component({
-  selector: 'app-activity-list',
-  templateUrl: './activity-list.component.html',
-  styleUrls: ['./activity-list.component.scss']
-})
-export class ActivityListComponent {
+@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;
 
-  constructor() { }
+  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;
+    });
+  }
 
 }

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

@@ -28,14 +28,15 @@ describe('Activity Service', () => {
     expect(httpClient).toBeTruthy();
   }));
 
-  it('activities are read using GET from assets/activities.json URL', () => {
+  it('activities are read using GET from baseUrl', () => {
     const activitiesFoundSize = activities.length;
+    service.baseUrl = 'foo';
     service
       .getActivities()
       .subscribe(activitiesInResponse => {
         expect(activitiesInResponse.length).toBe(activitiesFoundSize);
       });
-    const getActivitiesRequest = httpMock.expectOne('assets/activities.json');
+    const getActivitiesRequest = httpMock.expectOne(service.baseUrl);
     expect(getActivitiesRequest.request.method).toBe('GET');
     getActivitiesRequest.flush(activities);
   });

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

@@ -1,3 +1,4 @@
+import { environment } from './../../../../environments/environment';
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
@@ -8,11 +9,11 @@ import { Activity } from '../../shared/models';
 })
 export class ActivityService {
 
-  url = 'assets/activities.json';
+  baseUrl = `${environment.timeTrackerApiUrl}/activities`;
 
   constructor(private http: HttpClient) {}
 
   getActivities(): Observable<Activity[]> {
-    return this.http.get<Activity[]>(this.url);
+    return this.http.get<Activity[]>(this.baseUrl);
   }
 }

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

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

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

@@ -0,0 +1,27 @@
+import { Activity } from './../../shared/models/activity.model';
+import { Action } from '@ngrx/store';
+
+export enum ActivityManagementActionTypes {
+    LoadActivities = '[ActivityManagement] Load Activities',
+    LoadActivitiesSuccess = '[ActivityManagement] Load Activities Successs',
+    LoadActivitiesFail = '[ActivityManagement] Load Activities Fail',
+}
+
+
+export class LoadActivities implements Action {
+    public readonly type = ActivityManagementActionTypes.LoadActivities;
+}
+
+export class LoadActivitiesSuccess implements Action {
+    public readonly type = ActivityManagementActionTypes.LoadActivitiesSuccess;
+
+    constructor(public payload: Activity[]) { }
+}
+
+export class LoadActivitiesFail implements Action {
+    public readonly type = ActivityManagementActionTypes.LoadActivitiesFail;
+
+    constructor(public error) { }
+}
+
+export type ActivityManagementActions = LoadActivities | LoadActivitiesSuccess | LoadActivitiesFail;

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

@@ -0,0 +1,27 @@
+import { ActivityManagementActionTypes, LoadActivitiesSuccess, LoadActivitiesFail } from './activity-management.actions';
+import { Activity } from './../../shared/models/activity.model';
+import { ActivityService } from './../services/activity.service';
+import { Injectable } from '@angular/core';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { Observable, of } from 'rxjs';
+import { Action } from '@ngrx/store';
+import { catchError, map, mergeMap } from 'rxjs/operators';
+
+@Injectable()
+export class ActivityEffects {
+
+    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)))
+            )
+        ));
+}