add person component, more episode rendering

Author: jschwarty

src/app/app.component.html

@@ -15,12 +15,21 @@
 <section id="title" class="center">
   <h1>AngularAir</h1>
   <h2>
-    A <strong>live</strong> video podcast all about Angular
+    A <strong>live</strong> weekly video podcast covering the Angular JavaScript platform.
   </h2>
   <p>
     Brought to you with support from <a href="http://angularclass.com">AngularClass</a>
   </p>
 </section>
+<section>
+  <h2>Host</h2>
+  <app-person-card *ngFor="let person of (model | async)?.hosts" [person]="person"></app-person-card>
+</section>
+<section>
+  <h2>Panelists</h2>
+  <p>AngularAir is fortunate to have a panel of awesome Angular developers from the community!</p>
+  <app-person-card *ngFor="let person of (model | async)?.panelists" [person]="person"></app-person-card>
+</section>
 <hr />
 <section id="podcast-links" class="center">
   <app-subscribe-icon icon="apple" network="iTunes" link="https://itunes.apple.com/us/podcast/angular-air/id940806858?mt=2"></app-subscribe-icon>

src/app/app.component.ts

@@ -15,25 +15,39 @@ export class AppComponent {
 
   constructor(store: Store<AppState>, dateService: DateService) {
     let featuredDateRange = dateService.getWeekStartAndEndDateTimeUtc();
-    console.log(featuredDateRange);
     this.model = Observable.combineLatest(
-      store.select((state: AppState) => {
-        return state.episodes
-      }),
-      (episodes) => {
+      store.select(state => state),
+      ({episodes, people, currentHostsIds, currentPanelistsIds}) => {
+        let currentDateUtc = Date.now();
+        let mapEpisode = (episode: Episode) => {
+          return Object.assign(episode, {
+            guests: episode.guestIds.map(id => people[id]),
+            isFeatured: episode.dateTimeUtc > featuredDateRange.start && episode.dateTimeUtc < featuredDateRange.end,
+            isUpcoming: episode.dateTimeUtc > featuredDateRange.end,
+            isPast: episode.dateTimeUtc < featuredDateRange.start,
+            published: episode.dateTimeUtc < currentDateUtc
+          });
+        };
         return {
+          hosts: currentHostsIds.map(id => people[id]),
+          panelists: currentPanelistsIds.map(id => people[id]),
           featuredEpisode: episodes
-            .find((episode: Episode) => episode.dateTimeUtc > featuredDateRange.start && episode.dateTimeUtc < featuredDateRange.end),
+            .map(mapEpisode)
+            .find(episode => episode.isFeatured),
           upcomingEpisodes: episodes
-            .filter((episode: Episode) => episode.dateTimeUtc > featuredDateRange.end)
+            .map(mapEpisode)
+            .filter(episode => episode.isUpcoming)
             .sort((episode1: Episode, episode2: Episode) => {
               return episode1.dateTimeUtc - episode2.dateTimeUtc;
-            }),
+            })
+            .map(mapEpisode),
           pastEpisodes: episodes
-            .filter((episode: Episode) => episode.dateTimeUtc < featuredDateRange.start)
+            .map(mapEpisode)
+            .filter(episode => episode.isPast)
             .sort((episode1: Episode, episode2: Episode) => {
               return episode2.dateTimeUtc - episode1.dateTimeUtc;
             })
+
         }
       });
   }

src/app/app.module.ts

@@ -8,17 +8,19 @@ import { LinkIconComponent } from './shared/link-icon/link-icon.component';
 import { SubscribeIconComponent } from './shared/subscribe-icon/subscribe-icon.component';
 import { DateService } from "./shared/date.service";
 import { StoreModule } from "@ngrx/store";
-import { rootReducer } from "./shared/state/root.reducer";
+import { rootReducer } from "./shared/state/reducers/root.reducer";
 
 import appState from './data.json';
 import { EpisodeCardComponent } from './shared/episode-card/episode-card.component';
+import { PersonCardComponent } from './shared/person-card/person-card.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LinkIconComponent,
     SubscribeIconComponent,
-    EpisodeCardComponent
+    EpisodeCardComponent,
+    PersonCardComponent
   ],
   imports: [
     BrowserModule,

src/app/data.json

@@ -6,74 +6,85 @@
       {
         "id": 96,
         "title": "Discovering Angular Content",
-        "dateTimeUtc": 1484046000000,
-        "url": "http://ngair.io/content-2017"
+        "dateTimeUtc": 1484074800000,
+        "url": "http://ngair.io/content-2017",
+        "guestIds": []
       },
       {
         "id": 95,
         "title": "TIL #2",
-        "dateTimeUtc": 1483441200000,
-        "url": "http://ngair.io/til2-2017"
+        "dateTimeUtc": 1483470000000,
+        "url": "http://ngair.io/til2-2017",
+        "guestIds": []
       },
       {
         "id": 94,
         "title": "Life On and Beyond the Angular Core Team",
-        "dateTimeUtc": 1482836400000,
-        "url": "http://ngair.io/nrwl-2016"
+        "dateTimeUtc": 1482865200000,
+        "url": "http://ngair.io/nrwl-2016",
+        "guestIds": [10,11]
       },
       {
         "id": 93,
         "title": "Techniques for Testing",
-        "dateTimeUtc": 1482231600000,
-        "url": "http://ngair.io/testing-2016"
+        "dateTimeUtc": 1482260400000,
+        "url": "http://ngair.io/testing-2016",
+        "guestIds": [12,13]
       }
     ],
-    "people": [
-      {
-        "id": 1,
-        "fullName": "Kent C. Dodds",
-        "twitterHandle": "kentcdodds"
+    "people": {
+      "13": {
+        "fullName": "Adam Stephensen",
+        "twitterHandle": "adamstephensen"
       },
-      {
-        "id": 2,
-        "fullName": "Todd Motto",
-        "twitterHandle": "toddmotto"
+      "12": {
+        "fullName": "Duncan Hunter",
+        "twitterHandle": "dunchunter"
       },
-      {
-        "id": 3,
-        "fullName": "Jeff Whelpley",
-        "twitterHandle": "jeffwhelpley"
+      "11": {
+        "fullName": "Jeff Cross",
+        "twitterHandle": "jeffbcross"
       },
-      {
-        "id": 4,
-        "fullName": "Justin Schwartzenberger",
-        "twitterHandle": "schwarty"
+      "10": {
+        "fullName": "Victor Savkin",
+        "twitterHandle": "victorsavkin"
       },
-      {
-        "id": 5,
-        "fullName": "Patrick Stapleton",
-        "twitterHandle": "gdi2290"
+      "9": {
+        "fullName": "Alyssa Nicoll",
+        "twitterHandle": "AlyssaNicoll"
       },
-      {
-        "id": 6,
-        "fullName": "Olivier Combe",
-        "twitterHandle": "ocombe"
+      "8": {
+        "fullName": "Austin McDaniel",
+        "twitterHandle": "amcdnl"
       },
-      {
-        "id": 7,
+      "7": {
         "fullName": "Mike Brocchi",
         "twitterHandle": "brocco"
       },
-      {
-        "id": 8,
-        "fullName": "Austin McDaniel",
-        "twitterHandle": "amcdnl"
+      "6": {
+        "fullName": "Olivier Combe",
+        "twitterHandle": "ocombe"
       },
-      {
-        "id": 9,
-        "fullName": "Alyssa Nicoll",
-        "twitterHandle": "AlyssaNicoll"
+      "5": {
+        "fullName": "Patrick Stapleton",
+        "twitterHandle": "gdi2290"
+      },
+      "4": {
+        "fullName": "Justin Schwartzenberger",
+        "twitterHandle": "schwarty"
+      },
+      "3": {
+        "fullName": "Jeff Whelpley",
+        "twitterHandle": "jeffwhelpley"
+      },
+      "2": {
+        "fullName": "Todd Motto",
+        "twitterHandle": "toddmotto"
+      },
+      "1": {
+        "fullName": "Kent C. Dodds",
+        "twitterHandle": "kentcdodds"
       }
-    ]
+    }
   }
 }

src/app/shared/episode-card/episode-card.component.html

@@ -1,2 +1,11 @@
 <a href="{{episode.url}}">ngAir {{episode.id}} - {{episode.title}}</a>
-<div>{{episode.dateTimeUtc | date:'medium'}}</div>
+<div>
+  {{episode.published ? 'Aired On' : 'Live on'}}:
+  {{episode.dateTimeUtc | date:'fullDate'}} at {{episode.dateTimeUtc | date:'h:mm a (Z)'}}
+</div>
+<div *ngIf="episode.guests?.length > 0">
+  Guests:
+  <span *ngFor="let person of episode.guests">
+    {{person.fullName}} <a href="https://twitter.com/{{person.twitterHandle}}">@{{person.twitterHandle}}</a>
+  </span>
+</div>

src/app/shared/person-card/person-card.component.html

@@ -0,0 +1,2 @@
+{{person.fullName}}
+<a href="https://twitter.com/{{person.twitterHandle}}">@{{person.twitterHandle}}</a>

src/app/shared/person-card/person-card.component.scss

@@ -0,0 +1,12 @@
+import {Component, ChangeDetectionStrategy, Input} from '@angular/core';
+import {Person} from "../state/app-state";
+
+@Component({
+  selector: 'app-person-card',
+  templateUrl: './person-card.component.html',
+  styleUrls: ['./person-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PersonCardComponent {
+  @Input() person : Person;
+}

src/app/shared/person-card/person-card.component.ts

@@ -16,7 +16,6 @@ export interface Episode {
 }
 
 export interface Person {
-  id: number,
   fullName: string,
   twitterHandle: string
 }

src/app/shared/state/app-state.ts

@@ -0,0 +1,6 @@
+export const currentHostsIdsReducer = (state, action) => {
+  switch(action.type) {
+    default:
+      return state;
+  }
+};

src/app/shared/state/reducers/current-hosts-ids.reducer.ts

@@ -0,0 +1,6 @@
+export const currentPanelistsIdsReducer = (state, action) => {
+  switch(action.type) {
+    default:
+      return state;
+  }
+};

src/app/shared/state/reducers/current-panelists-ids.reducer.ts

@@ -2,10 +2,14 @@ import {compose} from "@ngrx/core";
 import {combineReducers} from "@ngrx/store";
 import {episodesReducer} from "./episodes.reducer";
 import {peopleReducer} from "./people.reducer";
+import {currentHostsIdsReducer} from "./current-hosts-ids.reducer";
+import {currentPanelistsIdsReducer} from "./current-panelists-ids.reducer";
 
 export const reducers = {
   episodes: episodesReducer,
-  people: peopleReducer
+  people: peopleReducer,
+  currentHostsIds: currentHostsIdsReducer,
+  currentPanelistsIds: currentPanelistsIdsReducer
 };
 
 export function rootReducer(state, action) {