Added Recommended Books Action

client/src/app/book.service.ts

@@ -36,4 +36,14 @@ export class BookService {
 
     return this.http.get<Book[]>(`${URL}/books/search?term=${query}`);
   }
+
+  similar(isbn: string, limit = 5): Observable<BookView[]> {
+    if (limit > 100) {
+      limit = 100;
+    }
+
+    return this.http.get<Book[]>(`${URL}/books/similar?isbn=${isbn}`).pipe(
+      map((books:Book[]) => books.map((book:Book) => new BookView(book)))
+    );
+  }
 }

client/src/app/book/book.component.html

@@ -66,6 +66,39 @@ <h3>Publisher Country</h3>
         </mat-card-content>
     </mat-card>
 
+  <mat-card class="book-recs">
+    <h3>Similar Books</h3>
+    <div class="book-recs-content" *ngIf="similarBooks | async; else noRecs">
+      <mat-card *ngFor="let book of similarBooks | async" class="book-card">
+        <img class="img-link cropped book-thumbnail"
+             onerror="this.onerror=null; this.src='http://lgimages.s3.amazonaws.com/gc-md.gif'"
+             [routerLink]="['/books', book.isbn]"
+             mat-card-image [src]="book.cover" [alt]="book.title" />
+
+        <mat-card-header class="book-card-header">
+          <mat-card-title class="book-card-title">
+            <h5 class="book-title"><a [routerLink]="['/books', book.isbn]">{{ book.title }}</a></h5>
+            <span class="book-authors">by
+                    <span *ngFor="let author of book.authors; let last = last">
+                      <a [routerLink]="['/authors', author._id]">{{ author.name }}</a>
+                      <span *ngIf="!last">, </span>
+                    </span>
+                  </span>
+          </mat-card-title>
+        </mat-card-header>
+
+        <mat-card-content class="book-card-content">
+          <div>
+            <p class="book-description" [innerHTML]="book.synopsis"></p>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <ng-template #noRecs>
+      <p>No similar books found. </p>
+    </ng-template>
+  </mat-card>
+
     <mat-card class="book-reviews">
         <h3>Reviews from Readers</h3>
 
@@ -82,4 +115,4 @@ <h3>Reviews from Readers</h3>
         <h3>Write a Review</h3>
         <lms-review-form [bookId]="book.isbn" (reviewAdded)="refetchBook()"></lms-review-form>
     </mat-card>
-</div>
+</div>

client/src/app/book/book.component.ts

@@ -4,6 +4,7 @@ import { BookService } from '../book.service';
 import { BookView } from '../models/book-view';
 import { Reservation } from '../models/reservation';
 import { ReservationService } from '../reservation.service';
+import {Observable} from "rxjs";
 
 @Component({
   selector: 'lms-book',
@@ -12,6 +13,7 @@ import { ReservationService } from '../reservation.service';
 })
 export class BookComponent implements OnInit {
   book: BookView;
+  similarBooks: Observable<BookView[]>;
   reservation: Reservation | undefined;
 
   constructor(
@@ -47,6 +49,10 @@ export class BookComponent implements OnInit {
       });
   }
 
+  getSimilarBooks() {
+    this.similarBooks = this.bookService.similar(this.book.isbn);
+  }
+
   setUserReservation(reservations: Reservation[]) {
     this.reservation = reservations.find(r => r.book._id === this.book.isbn);
   }

server/.gitignore

@@ -0,0 +1 @@
+.env