WIP: Upgrade to angular5

Angular2/ClientApp/app/app.module.shared.ts

@@ -1,17 +1,17 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
 import { RouterModule } from '@angular/router';
 
-import { AppComponent } from './components/app/app.component';
-import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { AboutComponent } from './components/about/about.component';
+import { AppComponent } from './components/app/app.component';
+import { BookProfileComponent } from "./components/bookProfile/bookProfile.component";
 import { BooksComponent } from './components/books/books.component';
-import { CharacterComponent} from "./components/characters/characters.component";
+import { CharacterComponent } from "./components/characters/characters.component";
+import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { SeriesComponent } from "./components/series/series.component";
-import { BookProfileComponent } from "./components/bookProfile/bookProfile.component";
-import { SeriesProfileComponent} from "./components/seriesProfile/seriesProfile.component";
+import { SeriesProfileComponent } from "./components/seriesProfile/seriesProfile.component";
 
 @NgModule({
     declarations: [
@@ -26,7 +26,7 @@ import { SeriesProfileComponent} from "./components/seriesProfile/seriesProfile.
     ],
     imports: [
         CommonModule,
-        HttpModule,
+        HttpClientModule,
         FormsModule,
         RouterModule.forRoot([
             { path: '', redirectTo: 'about', pathMatch: 'full' },

Angular2/ClientApp/app/components/base/base.component.ts

@@ -1,13 +1,11 @@
-import {Http, Response} from "@angular/http";
+import {HttpClient, HttpResponse} from "@angular/common/http";
+
 import {ResultJson} from "../../models/ResultJson";
 
 export class BaseComponent {
-    constructor(http: Http) {
-        this.http = http;
-    }
+    constructor(protected http: HttpClient) { }
 
-    private apiIsrunning: boolean;
-    http: Http;
+    private apiIsrunning: boolean = false;
 
     private apiBaseUrl = () :string => {
         return `${window.location.protocol}//dwcheckapi.azurewebsites.net/`;
@@ -50,11 +48,10 @@ export class BaseComponent {
         }
     };
 
-    performXhr = (route: string, successCallback: (response: Response, success: boolean) => void) => {
-        this.http.get(route).subscribe((result: Response) => {
-            let resultJson = result.json() as ResultJson;
-            if (resultJson.success) {
-                successCallback(result, resultJson.success);
+    performXhr = (route: string, successCallback: (response: HttpResponse<any>, success: boolean) => void) => {
+        this.http.get(route, {observe: 'response'}).subscribe((response: HttpResponse<any>) => {
+            if (response.ok) {
+                successCallback(response, response.ok);
             }
 
         });

Angular2/ClientApp/app/components/bookProfile/bookProfile.component.ts

@@ -1,9 +1,10 @@
-import {Component, OnInit, OnDestroy, Inject} from '@angular/core';
+import {HttpClient, HttpResponse} from '@angular/common/http';
+import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
 import { ActivatedRoute } from "@angular/router";
-import {Http, Response} from '@angular/http';
-import { ResultJson } from "../../models/ResultJson";
+
 import { Book } from "../../models/Book";
-import { ImageViewModel} from "../../models/Image";
+import { ImageViewModel } from "../../models/Image";
+import { ResultJson } from "../../models/ResultJson";
 import { BaseComponent } from "../base/base.component";
 
 @Component({
@@ -12,7 +13,7 @@ import { BaseComponent } from "../base/base.component";
 })
 
 export class BookProfileComponent extends BaseComponent implements OnInit, OnDestroy {
-    constructor(private route: ActivatedRoute, http: Http) {
+    constructor(private route: ActivatedRoute, http: HttpClient) {
         super(http);
 
         this.registerFunctions();
@@ -28,8 +29,8 @@ export class BookProfileComponent extends BaseComponent implements OnInit, OnDes
     private getBookImageData: () => void;
 
     // callbacks
-    private processBookCallback: (resultJson: Response, success: boolean) => void;
-    private processBookArtResponseCallback: (result: Response) => void;
+    private processBookCallback: (resultJson: HttpResponse<any>, success: boolean) => void;
+    private processBookArtResponseCallback: (result: HttpResponse<any>, success: boolean) => void;
 
     ngOnInit() {
         this.subscription = this.route.params.subscribe(params =>  {
@@ -47,9 +48,9 @@ export class BookProfileComponent extends BaseComponent implements OnInit, OnDes
     }
 
     registerFunctions = () => {
-        this.processBookCallback =  (resultJson: Response, success: boolean) => {
+        this.processBookCallback =  (result: HttpResponse<any>, success: boolean) => {
             if (success) {
-                let serverBook = resultJson.json().result;
+                let serverBook = result.body;
                 this.book = new Book(serverBook.bookId,
                     serverBook.bookOrdinal, serverBook.bookName,
                     serverBook.bookIsbn10, serverBook.bookIsbn13,
@@ -63,8 +64,8 @@ export class BookProfileComponent extends BaseComponent implements OnInit, OnDes
             this.loading = false;
         };
 
-        this.processBookArtResponseCallback = (result: Response) => {
-            let serverData = result.json().result;
+        this.processBookArtResponseCallback = (result: HttpResponse<any>, success: boolean) => {
+            let serverData = result.body;
             this.book.coverData = new ImageViewModel(
                 serverData.bookCoverImage, serverData.bookImageIsBase64String
             );

Angular2/ClientApp/app/components/books/books.component.html

@@ -11,7 +11,7 @@ <h1>Book Search</h1>
     <p>Searching, please wait</p>
 </div>
 
-<div class="table-responsive" *ngIf="!loading && success && hasBooks">
+<div class="table-responsive" *ngIf="!loading && success && books.value.length > 0">
     <table class='table'>
         <thead>
         <tr>
@@ -21,12 +21,12 @@ <h1>Book Search</h1>
             <th>ISBN 13</th>
             <th>Description</th>
 
-            <th *ngIf="displayCharacters">Characters</th>
-            <th *ngIf="displaySeries">Series</th>
+            <!-- <th *ngIf="displayCharacters">Characters</th>
+            <th *ngIf="displaySeries">Series</th> -->
         </tr>
         </thead>
         <tbody>
-        <tr *ngFor="let book of books">
+        <tr *ngFor="let book of books | async">
             <td colspan="2">
                 <img src="{{ book.imageTag() }}" class="img-responsive"/>
             </td>

Angular2/ClientApp/app/components/books/books.component.ts

@@ -1,87 +1,50 @@
 import { Component } from '@angular/core';
-import { Http, Response } from '@angular/http';
-import { Book } from "../../models/Book";
-import {ImageViewModel} from "../../models/Image";
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Observable } from 'rxjs/Observable';
+
 import {IApiBook} from "../../interfaces/IApiBook";
-import {BaseComponent} from "../base/base.component";
+import { Book } from "../../models/Book";
+import { BookService } from '../../services/book.service';
 
 @Component({
     selector: 'books',
     templateUrl: './books.component.html'
 })
-
-export class BooksComponent extends BaseComponent {
-    constructor(http: Http) {
-        super(http);
-
-        this.http = http;
-
-        this.loading = false;
-        this.success = true;
-        this.books = [];
-
-        this.registerFunctions();
-    }
-
+export class BooksComponent {
     /* Declarations */
-    success: boolean;
-    loading: boolean;
-    baseApiUrl: string;
+    success: boolean = true;
+    loading: boolean = false;
     searchString = '';
-    hasBooks = false;
-    books: Book[];
-
-    getDwBook: () => void;
-    private getBookImageData: (book: Book) => void;
-
-    /* callbacks */
-    private processBookResponseCallback: (result: Response, success: boolean) => void;
-    private processBookArtResponseCallback: (result: Response) => void;
-
-    private registerFunctions() {
-
-        this.processBookResponseCallback = (result: Response, success: boolean) => {
-            this.books = [];
-            result.json().result.forEach((serverBook: IApiBook) => {
-                let newBook = new Book(serverBook.bookId,
-                    serverBook.bookOrdinal, serverBook.bookName,
-                    serverBook.bookIsbn10, serverBook.bookIsbn13,
-                    serverBook.bookDescription,
-                    serverBook.characters, serverBook.series);
-                this.getBookImageData(newBook);
-                this.books.push(newBook);
-            });
+    books = new BehaviorSubject<Book[]>([]);
 
-            this.hasBooks = this.books && this.books.length > 0;
-            this.success = success;
-            this.loading = false;
-        };
-
-        this.processBookArtResponseCallback = (result: Response) => {
-            let serverData = result.json().result as IApiBook;
-            let book = this.books.find(book => book.bookId == serverData.bookId);
-            if (!book) {
-                throw new Error(`Couldn't find book with id of ${serverData.bookId}`);
-            }
-            book.coverData = new ImageViewModel(
-                serverData.bookCoverImage, serverData.bookImageIsBase64String
-            );
-        };
-
+    constructor(private bookService: BookService) { }
 
-        this.getDwBook = () => {
-            // ensure that the api is running before the user can do anything
-            this.checkApiIsRunning();
-
-            let route = `${this.bookSearchBaseUrl(this.searchString)}`;
-            this.loading = true;
-            this.performXhr(route,  this.processBookResponseCallback);
-        };
-
-        this.getBookImageData = (book: Book) => {
-            let route = `${this.bookGetCoverUrl(book.bookId)}`;
-            this.performXhr(route, this.processBookArtResponseCallback);
-        };
-    }
+    processBook(apiBook: IApiBook): Observable<Book> {
+        let newBook = new Book(apiBook.bookId,
+            apiBook.bookOrdinal, apiBook.bookName,
+            apiBook.bookIsbn10, apiBook.bookIsbn13,
+            apiBook.bookDescription,
+            apiBook.characters, apiBook.series);
+        return this.bookService.getBookCoverArt(newBook);
+    };  
+
+
+    getDwBook() {
+        this.books.next([])
+        this.loading = true
+        this.bookService.findBooksByName(this.searchString).subscribe(books => {
+            this.success = true
+            books.forEach(book => {
+                this.processBook(book).subscribe(hydratedBook => {
+                    if (!this.books.value.some(b => b.bookId === hydratedBook.bookId)) {
+                        const updatedbookList = this.books.value
+                        updatedbookList.push(hydratedBook)
+                        this.books.next(updatedbookList)
+                        this.loading = false
+                    }
+                })
+            })   
+        }, 
+        error => this.success = false)
+    };
 }
-

Angular2/ClientApp/app/components/characters/characters.component.ts

@@ -1,19 +1,18 @@
+import {HttpClient, HttpResponse} from '@angular/common/http';
 import { Component } from '@angular/core';
-import {Http, Response} from '@angular/http';
-import { ResultJson } from "../../models/ResultJson";
+
+import {IApiCharacter} from "../../interfaces/ICharacter";
 import { Character } from "../../models/Character";
+import { ResultJson } from "../../models/ResultJson";
 import {BaseComponent} from "../base/base.component";
-import {IApiCharacter} from "../../interfaces/ICharacter";
 
 @Component({
     selector: 'characters',
     templateUrl: './characters.component.html'
 })
 export class CharacterComponent extends BaseComponent{
-    constructor(http: Http) {
+    constructor(http: HttpClient) {
         super(http);
-
-        this.http = http;
 
         this.success = true;
         this.loading = false;
@@ -29,13 +28,13 @@ export class CharacterComponent extends BaseComponent{
     characters: Character[];
 
     getDwCharacters: () => void;
-    private processCharactersCallback: (response: Response, success: boolean) => void;
+    private processCharactersCallback: (response: HttpResponse<any>, success: boolean) => void;
 
     private registerFunctions() {
-        this.processCharactersCallback = (response: Response, success: boolean) => {
+        this.processCharactersCallback = (response: HttpResponse<any>, success: boolean) => {
             if(success) {
                 this.characters = [];
-                response.json().result.forEach((character:IApiCharacter) => {
+                (response.body as any[]).forEach((character:IApiCharacter) => {
                     this.characters.push(new Character(character.characterName, character.books));
                 });
             }
@@ -52,4 +51,3 @@ export class CharacterComponent extends BaseComponent{
         };
     }
 }
-

Angular2/ClientApp/app/components/series/series.component.ts

@@ -1,19 +1,18 @@
+import {HttpClient, HttpResponse} from '@angular/common/http';
 import { Component } from '@angular/core';
-import {Http, Response} from '@angular/http';
+
+import {IApiSeries} from "../../interfaces/ISeries";
 import { ResultJson } from "../../models/ResultJson";
 import { Series } from "../../models/Series";
 import {BaseComponent} from "../base/base.component";
-import {IApiSeries} from "../../interfaces/ISeries";
 
 @Component({
     selector: 'series',
     templateUrl: './series.component.html'
 })
 export class SeriesComponent extends BaseComponent {
-    constructor(http: Http) {
+    constructor(http: HttpClient) {
         super(http);
-
-        this.http = http;
 
         this.success = true;
         this.loading = false;
@@ -27,14 +26,14 @@ export class SeriesComponent extends BaseComponent {
     series: Series[];
 
     getDwSeries: () => void;
-    private processSeriesCallback: (response: Response, success: boolean) => void;
+    private processSeriesCallback: (response: HttpResponse<any>, success: boolean) => void;
 
     private registerFunctions() {
 
-        this.processSeriesCallback = (response: Response, success: boolean) =>  {
+        this.processSeriesCallback = (response: HttpResponse<any>, success: boolean) =>  {
             if(success) {
                 this.series = [];
-                response.json().result.forEach((series:IApiSeries) => {
+                (response.body as any[]).forEach((series:IApiSeries) => {
                     this.series.push(new Series(series.seriesId, series.seriesName, series.bookNames));
                 });
             }