reading activities from API and introducing ngrx #63

package.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",

src/app/app.module.ts

@@ -3,6 +3,9 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -28,6 +31,8 @@ import { FilterProjectPipe } from './modules/shared/pipes/filter-project/filter-
 import { SearchProjectComponent } from './modules/shared/components/search-project/search-project.component';
 import { HomeComponent } from './modules/home/home.component';
 import { LoginComponent } from './modules/login/login.component';
+import { ActivityEffects } from './modules/activities-management/store/activity-management.effects';
+import { activityManagementReducer } from './modules/activities-management/store';
 
 @NgModule({
   declarations: [
@@ -56,7 +61,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/modules/activities-management/components/activity-list/activity-list.component.spec.ts

@@ -1,16 +1,29 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
 
+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';
 
 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 +35,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.ts

@@ -1,16 +1,28 @@
-import { Input } from '@angular/core';
+import { Input, OnInit } from '@angular/core';
 import { Component } from '@angular/core';
+import { Store, select } from '@ngrx/store';
+
+import { allActivities } from '../../store';
+import { LoadActivities } from './../../store/activity-management.actions';
+import { ActivityState } from './../../store/activity-management.reducers';
 import { Activity } from '../../../shared/models';
 
-@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[] = [];
+  public isLoading: boolean;
+
+  constructor(private store: Store<ActivityState>) { }
 
-  @Input() activities: Activity[] = [];
+  ngOnInit() {
+    this.store.dispatch(new LoadActivities());
+    const activities$ = this.store.pipe(select(allActivities));
 
-  constructor() { }
+    activities$.subscribe(response => {
+      this.isLoading = response.isLoading;
+      this.activities = response.data;
+    });
+  }
 
 }

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

@@ -1,5 +1,6 @@
 import { TestBed, inject } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
 import { Activity } from '../../shared/models';
 import { ActivityService } from './activity.service';
 
@@ -28,14 +29,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.ts

@@ -1,18 +1,20 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
+
+import { environment } from './../../../../environments/environment';
 import { Activity } from '../../shared/models';
 
 @Injectable({
   providedIn: 'root'
 })
 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/store/activity-management.actions.spec.ts

@@ -0,0 +1,16 @@
+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.ts

@@ -0,0 +1,28 @@
+import { Action } from '@ngrx/store';
+
+import { Activity } from './../../shared/models/activity.model';
+
+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.effects.ts

@@ -0,0 +1,28 @@
+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';
+
+@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)))
+            )
+        ));
+}

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

@@ -0,0 +1,34 @@
+import { Activity } from './../../shared/models/activity.model';
+import { LoadActivitiesFail, LoadActivities } from './activity-management.actions';
+import { LoadActivitiesSuccess } from './activity-management.actions';
+import { activityManagementReducer, ActivityState } from './activity-management.reducers';
+
+describe('activityManagementReducer', () => {
+  const initialState: ActivityState = { data: [], isLoading: false, message: '' };
+
+  it('on LoadActivities, isLoading is true', () => {
+    const action = new LoadActivities();
+
+    const state = activityManagementReducer(initialState, action);
+
+    expect(state.isLoading).toEqual(true);
+  });
+
+  it('on LoadActivitiesSuccess, activitiesFound are saved in the store', () => {
+    const activitiesFound: Activity[] = [{id: '', name: '', description: ''}];
+    const action = new LoadActivitiesSuccess(activitiesFound);
+
+    const state = activityManagementReducer(initialState, action);
+
+    expect(state.data).toEqual(activitiesFound);
+  });
+
+  it('on LoadActivitiesFail, message equal to Something went wrong fetching activities!', () => {
+    const action = new LoadActivitiesFail('error');
+
+    const state = activityManagementReducer(initialState, action);
+
+    expect(state.message).toEqual('Something went wrong fetching activities!');
+  });
+
+});

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

@@ -0,0 +1,38 @@
+import {ActivityManagementActions, ActivityManagementActionTypes} from './activity-management.actions';
+import {Activity} from './../../shared/models/activity.model';
+
+export interface ActivityState {
+  data: Activity[];
+  isLoading: boolean;
+  message: string;
+}
+
+const initialState: ActivityState = {
+  data: [],
+  isLoading: false,
+  message: ''
+};
+
+export function activityManagementReducer(state = initialState, action: ActivityManagementActions): ActivityState {
+
+  switch (action.type) {
+    case(ActivityManagementActionTypes.LoadActivities): {
+        return {
+          ...state,
+          isLoading: true
+        };
+      }
+
+    case ActivityManagementActionTypes.LoadActivitiesSuccess: {
+        return {
+          ...state,
+          data: action.payload,
+          isLoading: false,
+          message: 'Data fetch successfully!'
+        };
+      }
+    case ActivityManagementActionTypes.LoadActivitiesFail: {
+        return { data: [], isLoading: false, message: 'Something went wrong fetching activities!' };
+      }
+  }
+}

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

@@ -0,0 +1,9 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+
+import { ActivityState } from './activity-management.reducers';
+
+const getActivityState = createFeatureSelector<ActivityState>('activities');
+
+export const allActivities = createSelector(getActivityState, (state: ActivityState) => {
+    return state;
+});

src/app/modules/activities-management/store/index.ts

@@ -0,0 +1,3 @@
+export * from './activity-management.actions';
+export * from './activity-management.reducers';
+export * from './activity-management.selectors';