add data, ngrx state stuff, episode list stuff

Author: jschwarty

package.json

@@ -20,27 +20,29 @@
     "@angular/platform-browser": "2.2.3",
     "@angular/platform-browser-dynamic": "2.2.3",
     "@angular/router": "3.2.3",
-    "core-js": "^2.4.1",
+    "@ngrx/core": "1.2.0",
+    "@ngrx/store": "2.2.1",
+    "core-js": "2.4.1",
     "rxjs": "5.0.0-beta.12",
-    "ts-helpers": "^1.1.1",
-    "zone.js": "^0.6.23"
+    "ts-helpers": "1.1.1",
+    "zone.js": "0.6.23"
   },
   "devDependencies": {
     "@angular/compiler-cli": "2.2.3",
     "@types/jasmine": "2.5.38",
-    "@types/node": "^6.0.42",
+    "@types/node": "6.0.42",
     "angular-cli": "1.0.0-beta.22-1",
     "codelyzer": "~2.0.0-beta.1",
     "jasmine-core": "2.5.2",
     "jasmine-spec-reporter": "2.5.0",
     "karma": "1.2.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-cli": "^1.0.1",
-    "karma-jasmine": "^1.0.2",
-    "karma-remap-istanbul": "^0.2.1",
+    "karma-chrome-launcher": "2.0.0",
+    "karma-cli": "1.0.1",
+    "karma-jasmine": "1.0.2",
+    "karma-remap-istanbul": "0.2.1",
     "protractor": "4.0.9",
     "ts-node": "1.2.1",
-    "tslint": "^4.0.2",
+    "tslint": "4.0.2",
     "typescript": "~2.0.3",
     "webdriver-manager": "10.2.5"
   }

src/app/app.component.html

@@ -1,16 +1,24 @@
 <div id="logo" class="center">
   <img src="assets/logo.png" />
 </div>
-
+<section class="center">
+  <app-link-icon icon="twitter" link="https://twitter.com/angularair" title="Angular Air on Twitter">
+    <div class="app-link-icon"><a href="https://twitter.com/angularair" title="Angular Air on Twitter"><i
+      class="fa fa-twitter"></i></a></div>
+  </app-link-icon>
+  <app-link-icon icon="google-plus" link="https://plus.google.com/u/0/+AngularAirPodcast/posts"
+                 title="Angular Air on Google+">
+    <div class="app-link-icon"><a href="https://plus.google.com/u/0/+AngularAirPodcast/posts"
+                                  title="Angular Air on Google+"><i class="fa fa-google-plus"></i></a></div>
+  </app-link-icon>
+</section>
 <section id="title" class="center">
   <h1>AngularAir</h1>
   <h2>
     A <strong>live</strong> video podcast all about Angular
   </h2>
   <p>
-    Brought to you by
-    <a href="https://auth0.com/learn/angular-authentication/?utm_source=angular_air&utm_medium=sponsored_link&utm_campaign=target_angular">Auth0</a>,
-    <a href="http://angularclass.com">AngularClass</a> and <a href="#sponsors">others</a>
+    Brought to you with support from <a href="http://angularclass.com">AngularClass</a>
   </p>
 </section>
 <hr />
@@ -19,4 +27,16 @@ <h2>
   <app-subscribe-icon icon="youtube" network="YouTube" link="https://www.youtube.com/c/AngularAirPodcast"></app-subscribe-icon>
   <app-subscribe-icon icon="rss" network="RSS" link="http://angularair.podbean.com/feed/"></app-subscribe-icon>
 </section>
-<hr/>
+<hr/>
+<section>
+  <h2>Featured Episode</h2>
+  <app-episode-card [episode]="(model | async)?.featuredEpisode"></app-episode-card>
+</section>
+<section>
+  <h2>Upcoming Episodes</h2>
+  <app-episode-card *ngFor="let episode of (model | async)?.upcomingEpisodes" [episode]="episode"></app-episode-card>
+</section>
+<section>
+  <h2>Past Episodes</h2>
+  <app-episode-card *ngFor="let episode of (model | async)?.pastEpisodes" [episode]="episode"></app-episode-card>
+</section>

src/app/app.component.ts

@@ -1,9 +1,40 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {Component, ChangeDetectionStrategy} from '@angular/core';
+import {AppState, Episode} from "./shared/state/app-state";
+import {Store} from "@ngrx/store";
+import {Observable} from "rxjs";
+import {DateService} from "./shared/date.service";
 
 @Component({
   selector: 'app-root',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent { }
+export class AppComponent {
+  model;
+
+  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) => {
+        return {
+          featuredEpisode: episodes
+            .find((episode: Episode) => episode.dateTimeUtc > featuredDateRange.start && episode.dateTimeUtc < featuredDateRange.end),
+          upcomingEpisodes: episodes
+            .filter((episode: Episode) => episode.dateTimeUtc > featuredDateRange.end)
+            .sort((episode1: Episode, episode2: Episode) => {
+              return episode1.dateTimeUtc - episode2.dateTimeUtc;
+            }),
+          pastEpisodes: episodes
+            .filter((episode: Episode) => episode.dateTimeUtc < featuredDateRange.start)
+            .sort((episode1: Episode, episode2: Episode) => {
+              return episode2.dateTimeUtc - episode1.dateTimeUtc;
+            })
+        }
+      });
+  }
+}

src/app/app.module.ts

@@ -6,19 +6,29 @@ import { HttpModule } from '@angular/http';
 import { AppComponent } from './app.component';
 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 appState from './data.json';
+import { EpisodeCardComponent } from './shared/episode-card/episode-card.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LinkIconComponent,
-    SubscribeIconComponent
+    SubscribeIconComponent,
+    EpisodeCardComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    StoreModule.provideStore(rootReducer, appState.data)
+  ],
+  providers: [
+    DateService
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/data.json

@@ -0,0 +1,79 @@
+{
+  "data": {
+    "currentHostsIds": [4],
+    "currentPanelistsIds": [6,7,8,9],
+    "episodes": [
+      {
+        "id": 96,
+        "title": "Discovering Angular Content",
+        "dateTimeUtc": 1484046000000,
+        "url": "http://ngair.io/content-2017"
+      },
+      {
+        "id": 95,
+        "title": "TIL #2",
+        "dateTimeUtc": 1483441200000,
+        "url": "http://ngair.io/til2-2017"
+      },
+      {
+        "id": 94,
+        "title": "Life On and Beyond the Angular Core Team",
+        "dateTimeUtc": 1482836400000,
+        "url": "http://ngair.io/nrwl-2016"
+      },
+      {
+        "id": 93,
+        "title": "Techniques for Testing",
+        "dateTimeUtc": 1482231600000,
+        "url": "http://ngair.io/testing-2016"
+      }
+    ],
+    "people": [
+      {
+        "id": 1,
+        "fullName": "Kent C. Dodds",
+        "twitterHandle": "kentcdodds"
+      },
+      {
+        "id": 2,
+        "fullName": "Todd Motto",
+        "twitterHandle": "toddmotto"
+      },
+      {
+        "id": 3,
+        "fullName": "Jeff Whelpley",
+        "twitterHandle": "jeffwhelpley"
+      },
+      {
+        "id": 4,
+        "fullName": "Justin Schwartzenberger",
+        "twitterHandle": "schwarty"
+      },
+      {
+        "id": 5,
+        "fullName": "Patrick Stapleton",
+        "twitterHandle": "gdi2290"
+      },
+      {
+        "id": 6,
+        "fullName": "Olivier Combe",
+        "twitterHandle": "ocombe"
+      },
+      {
+        "id": 7,
+        "fullName": "Mike Brocchi",
+        "twitterHandle": "brocco"
+      },
+      {
+        "id": 8,
+        "fullName": "Austin McDaniel",
+        "twitterHandle": "amcdnl"
+      },
+      {
+        "id": 9,
+        "fullName": "Alyssa Nicoll",
+        "twitterHandle": "AlyssaNicoll"
+      }
+    ]
+  }
+}

src/app/shared/date.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class DateService {
+  getWeekStartAndEndDateTimeUtc() {
+    let curr = new Date;
+    let first = curr.getDate() - curr.getDay();
+    let last = first + 6;
+    return {
+      start: curr.setDate(first),
+      end: curr.setDate(last)
+    };
+  }
+}

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

@@ -0,0 +1,2 @@
+<a href="{{episode.url}}">ngAir {{episode.id}} - {{episode.title}}</a>
+<div>{{episode.dateTimeUtc | date:'medium'}}</div>

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

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

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

@@ -0,0 +1,22 @@
+export interface AppState {
+  episodes: Episode[],
+  people: Person[],
+  currentHostsIds: number[],
+  currentPanelistsIds: number[]
+}
+
+export interface Episode {
+  id: number,
+  title: string,
+  dateTimeUtc: number,
+  url: string,
+  hostIds: number[],
+  guestIds: number[],
+  panelistIds: number[]
+}
+
+export interface Person {
+  id: number,
+  fullName: string,
+  twitterHandle: string
+}

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

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

src/app/shared/state/episodes.reducer.ts

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

src/app/shared/state/people.reducer.ts

@@ -0,0 +1,13 @@
+import {compose} from "@ngrx/core";
+import {combineReducers} from "@ngrx/store";
+import {episodesReducer} from "./episodes.reducer";
+import {peopleReducer} from "./people.reducer";
+
+export const reducers = {
+  episodes: episodesReducer,
+  people: peopleReducer
+};
+
+export function rootReducer(state, action) {
+  return compose(combineReducers)(reducers)(state, action);
+}

src/app/shared/state/root.reducer.ts

@@ -1,2 +1,6 @@
 // Typings reference file, you can add your own global typings here
 // https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
+declare module "*.json" {
+  const value: any;
+  export default value;
+}