Chore/factor out more duplicate code (#20)

Also:

* turn on onPush change detection.
* update CLI to rc1
* update circle-ci to fail faster
* update circle-ci to use a newer chrome required by protractor.

Author: SethDavenport

circle.yml

@@ -1,9 +1,12 @@
 machine:
   node:
     version: 6.9.5
+  post:
+    - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
+    - sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
+    - sudo apt-get update
+    - sudo apt-get install google-chrome-stable
 
 test:
   override:
-    - ng lint
-    - ng test --single-run
-    - ng e2e
+    - ng lint && ng test --single-run && ng e2e

package.json

@@ -34,7 +34,7 @@
     "zone.js": "^0.7.6"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-rc.0",
+    "@angular/cli": "1.0.0-rc.1",
     "@angular/compiler-cli": "^2.4.0",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",

src/app/core/animal-list/animal-list.component.css renamed to src/app/animals/animal-list/animal-list.component.css

@@ -0,0 +1,25 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { By } from '@angular/platform-browser';
+import { AnimalListComponent } from './animal-list.component';
+import { CoreModule } from '../../core/core.module';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AnimalListComponent],
+      imports: [CoreModule],
+    }).compileComponents();
+  }));
+
+  it(`should have as title 'Welcome to the Zoo'`, async(() => {
+    const fixture = TestBed.createComponent(AnimalListComponent);
+    const app = fixture.debugElement.componentInstance;
+
+    app.animalsName = 'Wallabies';
+    fixture.detectChanges();
+
+    const titleElement = fixture.debugElement.query(By.css('h2'));
+    expect(titleElement.nativeElement.textContent).toContain('We have Wallabies');
+  }));
+});

src/app/core/animal-list/animal-list.component.html renamed to src/app/animals/animal-list/animal-list.component.html

@@ -1,10 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'zoo-animal-list',
   templateUrl: './animal-list.component.html',
-  styleUrls: ['./animal-list.component.css']
+  styleUrls: ['./animal-list.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AnimalListComponent {
   @Input() animalsName: string;

src/app/animals/animal-list/animal-list.component.spec.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Action } from 'redux';
+
+@Injectable()
+export class AnimalActions {
+  static readonly LOAD_STARTED = 'LOAD_STARTED';
+  static readonly LOAD_SUCCEEDED = 'LOAD_SUCCEEDED';
+  static readonly LOAD_FAILED = 'LOAD_FAILED';
+
+  loadAnimals(animalType) {
+    return {
+      type: AnimalActions.LOAD_STARTED,
+      meta: { animalType },
+    };
+  }
+
+  loadSucceeded(animalType, payload) {
+    return {
+      type: AnimalActions.LOAD_SUCCEEDED,
+      meta: { animalType },
+      payload,
+    };
+  }
+
+  loadFailed(animalType, error) {
+    return {
+      type: AnimalActions.LOAD_FAILED,
+      meta: { animalType },
+      error,
+    };
+  }
+}

src/app/core/animal-list/animal-list.component.ts renamed to src/app/animals/animal-list/animal-list.component.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { Epic, createEpicMiddleware } from 'redux-observable';
+import { Action, Store } from 'redux';
+import { of } from 'rxjs/observable/of';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/map';
+
+import { AnimalType, ANIMAL_TYPES } from '../animals/animal.types';
+import { AnimalActions } from '../animals/animal.actions';
+import { AnimalService } from './animal.service';
+
+@Injectable()
+export class AnimalEpics {
+  constructor(
+    private service: AnimalService,
+    private actions: AnimalActions,
+  ) {}
+
+  public createEpic(animalType: AnimalType) {
+    return createEpicMiddleware(this.createLoadAnimalEpic(animalType));
+  }
+
+  private createLoadAnimalEpic(animalType) {
+    return action$ => action$
+      .ofType(AnimalActions.LOAD_STARTED)
+      .filter(({ meta }) => meta.animalType === animalType)
+      .switchMap(a => this.service.getAll(animalType)
+        .map(data => this.actions.loadSucceeded(animalType, data))
+        .catch(response => of(this.actions.loadFailed(animalType, {
+          status: '' + response.status,
+        }))));
+  }
+}

src/app/animals/animal.actions.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CoreModule } from '../core/core.module';
+import { AnimalListComponent } from './animal-list/animal-list.component';
+import { AnimalActions } from './animal.actions';
+import { AnimalEpics } from './animal.epics';
+import { AnimalService } from './animal.service';
+import { StoreModule } from '../store/store.module';
+
+@NgModule({
+  declarations: [AnimalListComponent],
+  exports: [AnimalListComponent],
+  imports: [CoreModule, StoreModule, CommonModule],
+  providers: [AnimalActions, AnimalEpics, AnimalService],
+})
+export class AnimalModule {}

src/app/animals/animal.epics.ts

@@ -0,0 +1,43 @@
+import { AnimalActions } from './animal.actions';
+import { IPayloadAction } from '../core/utils/payload-action.types';
+import { IAnimalList, IAnimal, AnimalType } from './animal.types';
+
+const INITIAL_STATE: IAnimalList = {
+  items: [],
+  loading: false,
+  error: null,
+};
+
+// A higher-order reducer: accepts an animal type and returns a reducer
+// that only responds to actions for that particular animal type.
+export function createAnimalReducer(animalType: AnimalType) {
+  return function animalReducer(state: IAnimalList = INITIAL_STATE,
+    action: IPayloadAction<IAnimal[], any>): IAnimalList {
+    if (!action.meta || action.meta.animalType !== animalType) {
+      return state;
+    }
+
+    switch (action.type) {
+      case AnimalActions.LOAD_STARTED:
+        return {
+          items: [],
+          loading: true,
+          error: null,
+        };
+      case AnimalActions.LOAD_SUCCEEDED:
+        return {
+          items: action.payload,
+          loading: false,
+          error: null
+        };
+      case AnimalActions.LOAD_FAILED:
+        return {
+          items: [],
+          loading: false,
+          error: action.error
+        };
+    }
+
+    return state;
+  };
+}