Skeleton code for Chapter 3

next-episode.pipe.js

import { Pipe } from '@angular/core';
import { Episode } from '../lib/contracts/episode';

@Pipe({
    name: 'nextEpisode'
})
class NextEpisodePipe {

    transform(episodes: Episode[]) {
        const now = Date.now();
        const nextEpisode = episodes.find(episode => {
            return (new Date(episode.airdate)).getTime() > now;
        });
        return '';
    }

    generateEpisodeNumber(season, episode) {
        return `S${('0' + season).slice(-2)}E${('0' + episode).slice(-2)}`;
    }

}

export default NextEpisodePipe;
export {NextEpisodePipe};

show.component.js

import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { NextEpisodePipe } from './next-episode.pipe';

@Component({
    selector: 'show',
    styles: [`
        img {
            margin: 0 10px 10px 0;
        }
    `],
    template: `
        <img [src]="show.image?.medium" [alt]="show.name" class="img-rounded" />
        <div class="show-information">
            <h3>Show name</h3>
            <p>Next episode: </p>
            <div [innerHTML]="show.summary"></div>
        </div>
    `,
    pipes: [ NextEpisodePipe ]
})
class ShowComponent {}

export default ShowComponent;
export {ShowComponent};

upcoming.component.js

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { SubscribeService } from '../lib/providers';
import { ShowComponent } from './show.component';
import { Show } from '../lib/contracts/show';

@Component({
    selector: 'upcoming-shows',
    template: `
        <h1>Upcoming shows</h1>
        <!-- Render a all series here -->
    `,
    directives: [ ShowComponent ]
})
class UpcomingShows {
    shows: Show[] = [];

    constructor(service: SubscribeService) {}

}

export default UpcomingShows;
export { UpcomingShows };