Chore/factor out list component (#19)

* wip

* [#16] Factor list component out

Elephants-list and Lions-list were duplicate code. Factored them out into an animals-lsit component in Core.

Author: SethDavenport

src/app/app.routes.ts

@@ -1,10 +1,10 @@
-import { ElephantListComponent } from './elephants/elephant-list/elephant-list.component';
-import { LionListComponent } from './lions/lion-list/lion-list.component';
+import { ElephantsPageComponent } from './elephants/elephants-page.container';
+import { LionsPageComponent } from './lions/lions-page.container';
 import { FeedbackFormComponent } from './feedback/feedback-form/feedback-form.component';
 
 export const appRoutes = [
   { path: '', redirectTo: '/elephants', pathMatch: 'full' },
-  { path: 'elephants', component: ElephantListComponent },
-  { path: 'lions', component: LionListComponent },
+  { path: 'elephants', component: ElephantsPageComponent },
+  { path: 'lions', component: LionsPageComponent },
   { path: 'feedback', component: FeedbackFormComponent },
 ];

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

@@ -0,0 +1,13 @@
+<h2>We have {{ animalsName }}!</h2>
+
+<zoo-spinner *ngIf="loading | async">
+</zoo-spinner>
+
+<ul>
+  <li *ngFor="let animal of animals | async; trackBy:getAnimalName">
+    {{ animal.name }}
+  </li>
+</ul>
+
+<zoo-error-well *ngIf="error | async">
+</zoo-error-well>

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

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+  selector: 'zoo-animal-list',
+  templateUrl: './animal-list.component.html',
+  styleUrls: ['./animal-list.component.css']
+})
+export class AnimalListComponent {
+  @Input() animalsName: string;
+  @Input() animals: Observable<any[]>;
+  @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;
+  }
+}

src/app/core/animal-list/animal-list.component.ts

@@ -3,17 +3,20 @@ import { CommonModule } from '@angular/common';
 
 import { SpinnerComponent } from './spinner/spinner.component';
 import { ErrorWellComponent } from './error-well/error-well.component';
+import { AnimalListComponent } from './animal-list/animal-list.component';
 
 @NgModule({
   declarations: [
     SpinnerComponent,
     ErrorWellComponent,
+    AnimalListComponent,
   ],
   providers: [],
   imports: [ CommonModule ],
   exports: [
     SpinnerComponent,
     ErrorWellComponent,
+    AnimalListComponent,
   ],
 })
 export class CoreModule {}

src/app/core/core.module.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { select } from '@angular-redux/store';
+import { Observable } from 'rxjs/Observable';
+
+/**
+ * In Redux terminology, a 'container' is a component that knows about the store.
+ * It selects data, and marshals it into a set of 'presentational' (or non-redux-connected)
+ * components for display.
+ *
+ * The 'page-level' components that get attached to the router are usually containers;
+ * but not all containers need to be page-level components.
+ */
+@Component({
+  template: `
+    <zoo-animal-list
+      animalsName="Elephants"
+      [animals]="animals$"
+      [loading]="loading$"
+      [error]="error$">
+    </zoo-animal-list>
+  `
+})
+export class ElephantsPageComponent {
+  // Shorthand for
+  // constructor(ngRedux: NgRedux {
+  //  this.animals$ = ngRedux.select(['elephants', 'items']);
+  // })
+  @select(['elephants', 'items']) readonly animals$: Observable<any[]>;
+  @select(['elephants', 'loading']) readonly loading$: Observable<boolean>;
+  @select(['elephants', 'error']) readonly error$: Observable<any>;
+}

src/app/elephants/elephant-list/elephant-list.component.html

@@ -1,14 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { ElephantListComponent } from './elephant-list/elephant-list.component';
+import { ElephantsPageComponent } from './elephants-page.container';
 import { ElephantsEpics } from './elephants.epics';
 import { ElephantsService } from './elephants.service';
 import { ElephantsActions } from './elephants.actions';
 import { CoreModule } from '../core/core.module';
 
 @NgModule({
-  declarations: [ ElephantListComponent ],
+  declarations: [ElephantsPageComponent],
+  exports: [ElephantsPageComponent],
   providers: [
     ElephantsEpics,
     ElephantsService,
@@ -18,6 +19,5 @@ import { CoreModule } from '../core/core.module';
     CommonModule,
     CoreModule,
   ],
-  exports: [ ElephantListComponent ],
 })
 export class ElephantsModule {}