BookMonkey 3 Diff

Files changed (7) hide show

tmp/src/app/book-monkey/iteration-3/{http → rxjs}/app.module.ts +3 -1
tmp/src/app/book-monkey/iteration-3/{http → rxjs}/home/home.component.html +3 -0
tmp/src/app/book-monkey/iteration-3/{http → rxjs}/search/search.component.html +17 -0
tmp/src/app/book-monkey/iteration-3/{http → rxjs}/search/search.component.ts +32 -0
tmp/src/app/book-monkey/iteration-3/{http → rxjs}/shared/book-factory.ts +11 -0
tmp/src/app/book-monkey/iteration-3/{http → rxjs}/shared/book-raw.ts +15 -0
tmp/src/app/book-monkey/iteration-3/{http → rxjs}/shared/book-store.service.ts +37 -4

tmp/src/app/book-monkey/iteration-3/{http → rxjs}/app.module.ts RENAMED

@@ -8,6 +8,7 @@
 import { BookListComponent } from './book-list/book-list.component';
 import { BookListItemComponent } from './book-list-item/book-list-item.component';
 import { BookDetailsComponent } from './book-details/book-details.component';
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@
     HomeComponent,
     BookListComponent,
     BookListItemComponent,
-    BookDetailsComponent
   ],
   imports: [
     CommonModule,

 import { BookListComponent } from './book-list/book-list.component';
 import { BookListItemComponent } from './book-list-item/book-list-item.component';
 import { BookDetailsComponent } from './book-details/book-details.component';
+import { SearchComponent } from './search/search.component';
 @NgModule({
   declarations: [
     HomeComponent,
     BookListComponent,
     BookListItemComponent,
+    BookDetailsComponent,
+    SearchComponent
   ],
   imports: [
     CommonModule,

tmp/src/app/book-monkey/iteration-3/{http → rxjs}/home/home.component.html RENAMED

@@ -4,3 +4,6 @@
   Buchliste ansehen
   <i class="right arrow icon"></i>
 </a>

   Buchliste ansehen
   <i class="right arrow icon"></i>
 </a>
+            +
+<h2>Suche</h2>
+<bm-search></bm-search>

tmp/src/app/book-monkey/iteration-3/{http → rxjs}/search/search.component.html RENAMED

	@@ -0,0 +1,17 @@

+<div class="ui search" [class.loading]="isLoading">
+  <div class="ui icon input">
+    <input type="text" class="prompt"
+      (keyup)="keyUp$.next($event.target.value)">
+    <i class="search icon"></i>
+  </div>
+            +
+  <div class="results transition visible"
+    *ngIf="foundBooks.length">
+    <a class="result"
+      *ngFor="let book of foundBooks"
+      [routerLink]="['..', 'books', book.isbn]">
+      {{ book.title }}
+      <p class="description">{{ book.subtitle }}</p>
+    </a>
+  </div>
+</div>

tmp/src/app/book-monkey/iteration-3/{http → rxjs}/search/search.component.ts RENAMED

	@@ -0,0 +1,32 @@

+import { Component, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, tap, switchMap, filter } from 'rxjs/operators';
+            +
+import { Book } from '../shared/book';
+import { BookStoreService } from '../shared/book-store.service';
+            +
+@Component({
+  selector: 'bm-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.css']
+})
+export class SearchComponent implements OnInit {
+            +
+  keyUp$ = new Subject<string>();
+  isLoading = false;
+  foundBooks: Book[] = [];
+            +
+  constructor(private bs: BookStoreService) { }
+            +
+  ngOnInit() {
+    this.keyUp$.pipe(
+      filter(term => term.length >= 3),
+      debounceTime(500),
+      distinctUntilChanged(),
+      tap(() => this.isLoading = true),
+      switchMap(searchTerm => this.bs.getAllSearch(searchTerm)),
+      tap(() => this.isLoading = false)
+    )
+    .subscribe(books => this.foundBooks = books);
+  }
+}

tmp/src/app/book-monkey/iteration-3/{http → rxjs}/shared/book-factory.ts RENAMED

	@@ -0,0 +1,11 @@

+import { Book } from './book';
+import { BookRaw } from './book-raw';
+            +
+export class BookFactory {
+  static fromRaw(b: BookRaw): Book {
+    return {
+      ...b,
+      published: new Date(b.published)
+    };
+  }
+}

tmp/src/app/book-monkey/iteration-3/{http → rxjs}/shared/book-raw.ts RENAMED

	@@ -0,0 +1,15 @@

+export interface BookRaw {
+  isbn: string;
+  title: string;
+  authors: string[];
+  published: string;
+  subtitle?: string;
+  rating?: number;
+  thumbnails?: ThumbnailRaw[];
+  description?: string;
+}
+            +
+export interface ThumbnailRaw {
+  url: string;
+  title?: string;
+}

tmp/src/app/book-monkey/iteration-3/{http → rxjs}/shared/book-store.service.ts RENAMED

@@ -1,8 +1,11 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
 import { Book } from './book';
 @Injectable({
   providedIn: 'root'
@@ -13,12 +16,23 @@
   constructor(private http: HttpClient) {}
   getAll(): Observable<Book[]> {
-    return this.http.get<any[]>(`${this.api}/books`);
   }
   getSingle(isbn: string): Observable<Book> {
-    return this.http.get<any>(
       `${this.api}/book/${isbn}`
     );
   }
@@ -26,6 +40,25 @@
     return this.http.delete(
       `${this.api}/book/${isbn}`,
       { responseType: 'text' }
     );
   }
 }

 import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { throwError, Observable } from 'rxjs';
+import { retry, map, catchError } from 'rxjs/operators';
 import { Book } from './book';
+import { BookRaw } from './book-raw';
+import { BookFactory } from './book-factory';
 @Injectable({
   providedIn: 'root'
   constructor(private http: HttpClient) {}
   getAll(): Observable<Book[]> {
+    return this.http.get<BookRaw[]>(`${this.api}/books`)
+      .pipe(
+        retry(3),
+        map(booksRaw =>
+          booksRaw.map(b => BookFactory.fromRaw(b)),
+        ),
+        catchError(this.errorHandler)
+      );
   }
   getSingle(isbn: string): Observable<Book> {
+    return this.http.get<BookRaw>(
       `${this.api}/book/${isbn}`
+    ).pipe(
+      retry(3),
+      map(b => BookFactory.fromRaw(b)),
+      catchError(this.errorHandler)
     );
   }
     return this.http.delete(
       `${this.api}/book/${isbn}`,
       { responseType: 'text' }
+    ).pipe(
+      catchError(this.errorHandler)
     );
   }
+            +
+  getAllSearch(searchTerm: string): Observable<Book[]> {
+    return this.http.get<BookRaw[]>(
+      `${this.api}/books/search/${searchTerm}`
+    ).pipe(
+      retry(3),
+      map(booksRaw =>
+        booksRaw.map(b => BookFactory.fromRaw(b)),
+      ),
+      catchError(this.errorHandler)
+    );
+  }
+            +
+  private errorHandler(error: HttpErrorResponse): Observable<any> {
+    console.error('Fehler aufgetreten!');
+    return throwError(error);
+  }
 }