[WIP] App improvements (#31)

* App improvements

* Epics: don;t refetch HTTP data if we already have it
* Animal Lists: add a fractal counter component to each row.
* Import Fluz-Standard-Action for stronger action typings

* More refactoring

* remove redundancy in folder/file names.
* better normalize store data.

* better fractal stuff

* Basic implementation of fractal stuff.

TODO:
* move utils/fractal.ts into NgRedux proper
* move form/composeReducers into NgRedux proper
* clean up subselect implementation
* move fractalReducer stuff into NgRedux proper.
* unit test the demo
* RFC e-schultz, nk, ke, as with intent to publish in 6.4.
* consider decorator implementation.

* update to 6.4 alpha

* use yarn

* Remove obsolete e2e tests, fix yarn on CI

* animal component unit tests

* update to 6.4.0

Author: SethDavenport

circle.yml

@@ -1,12 +1,15 @@
 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
+
+dependencies:
+  # Circle CI's preinstalled yarn doesn't work with @angular/cli. Never versions
+  # of yarn do.
+  pre:
+    - curl -o- -L https://yarnpkg.com/install.sh | bash
+  override:
+    - yarn
 
 test:
   override:
-    - ng lint --type-check && ng test --single-run && ng e2e
+    - yarn test

e2e/app.e2e-spec.ts

@@ -6,9 +6,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint --type-check",
-    "e2e": "ng e2e"
+    "test": "ng lint --type-check && ng test --single-run"
   },
   "engines": {
     "node": ">=6.9.5"
@@ -17,7 +15,7 @@
   "dependencies": {
     "@angular-redux/form": "^6.3.0",
     "@angular-redux/router": "^6.3.0",
-    "@angular-redux/store": "^6.3.0",
+    "@angular-redux/store": "^6.4.0",
     "@angular/common": "^4.1.0",
     "@angular/compiler": "^4.1.0",
     "@angular/core": "^4.1.0",
@@ -27,6 +25,8 @@
     "@angular/platform-browser-dynamic": "^4.1.0",
     "@angular/router": "^4.1.0",
     "core-js": "^2.4.1",
+    "flux-standard-action": "^1.2.0",
+    "ramda": "^0.23.0",
     "redux": "^3.6.0",
     "redux-logger": "^3.0.1",
     "redux-observable": "^0.14.1",

e2e/app.po.ts

@@ -0,0 +1,2 @@
+.header { display: flex; }
+.header-cell { flex-basis: 25%; font-weight: bold; }

e2e/tsconfig.e2e.json

@@ -0,0 +1,19 @@
+<h2>We have {{ animalsName }}!</h2>
+
+<zoo-spinner *ngIf="loading | async">
+</zoo-spinner>
+
+<section class="header">
+  <div class="header-cell">Name</div>
+  <div class="header-cell">Ticket Price</div>
+  <div class="header-cell">Tickets</div>
+  <div class="header-cell">Subtotal</div>
+</section>
+<zoo-animal
+  *ngFor="let animal of animals | async; trackBy:getKey"
+  [animalType]=animalType
+  [key]=getKey(null,animal)>
+</zoo-animal>
+
+<zoo-error-well *ngIf="error | async">
+</zoo-error-well>

package.json

@@ -1,22 +1,31 @@
+import { Component, Input } from '@angular/core';
 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';
+import { AnimalListComponent } from './component';
+import { CoreModule } from '../../core/module';
+import { AnimalType } from '../model';
 
-describe('AppComponent', () => {
+@Component({ selector: 'zoo-animal', template: '' })
+class MockAnimalComponent {
+  @Input() key: string
+  @Input() animalType: AnimalType
+}
+
+describe('AnimalListComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [AnimalListComponent],
+      declarations: [AnimalListComponent, MockAnimalComponent],
       imports: [CoreModule],
     }).compileComponents();
   }));
 
   it(`should have as title 'Welcome to the Zoo'`, async(() => {
     const fixture = TestBed.createComponent(AnimalListComponent);
-    const app = fixture.debugElement.componentInstance;
+    const animalList = fixture.debugElement.componentInstance;
 
-    app.animalsName = 'Wallabies';
+    animalList.animalsName = 'Wallabies';
+    animalList.animalType = 'WALLABIES';
     fixture.detectChanges();
 
     const titleElement = fixture.debugElement.query(By.css('h2'));

src/app/animals/animal-list/animal-list.component.css

@@ -1,22 +1,24 @@
 import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
+import { IAnimal } from '../model';
 
 @Component({
   selector: 'zoo-animal-list',
-  templateUrl: './animal-list.component.html',
-  styleUrls: ['./animal-list.component.css'],
+  templateUrl: './component.html',
+  styleUrls: ['./component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AnimalListComponent {
   @Input() animalsName: string;
-  @Input() animals: Observable<any[]>;
+  @Input() animalType: string;
+  @Input() animals: Observable<IAnimal[]>;
   @Input() loading: Observable<boolean>;
   @Input() error: Observable<any>;
 
   // Since we're observing an array of items, we need to set up a 'trackBy'
   // parameter so Angular doesn't tear down and rebuild the list's DOM every
   // time there's an update.
-  getAnimalName(_, animal) {
-    return animal.name;
+  getKey(_, animal: IAnimal) {
+    return animal.id;
   }
 }

src/app/animals/animal-list/animal-list.component.html

@@ -0,0 +1,2 @@
+:host { display: flex; }
+div { flex-basis: 25%; }

src/app/animals/animal-list/component.css

@@ -0,0 +1,10 @@
+<div>{{ name$ | async }}</div>
+<div>{{ ticketPrice$ | async }}</div>
+<div>
+  <zoo-counter
+    [count]="numTickets$ | async"
+    (increment)=addTicket()
+    (decrement)=removeTicket()>
+  </zoo-counter>
+</div>
+<div>${{ subTotal$ | async }}