From a62708441e2ae59ba4daf8e77c52c4a57c520fb5 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 20 Nov 2024 11:25:57 +0100
Subject: [PATCH] 4 done

---
 .../show-details/show-details.component.html  |  2 +-
 .../show-details/show-details.component.ts    |  5 ++---
 src/app/services/api-service.ts               | 22 ++++++++++++++-----
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/app/components/show-details/show-details.component.html b/src/app/components/show-details/show-details.component.html
index e18143c..b975f3e 100644
--- a/src/app/components/show-details/show-details.component.html
+++ b/src/app/components/show-details/show-details.component.html
@@ -1,6 +1,6 @@
 @if (detailShow$ | async; as detailShow) {
   <div class="card">
-    <img class="card-img-top img-fluid" ngSrc="{{detailShow.image}}">
+    <img class="card-img-top img-fluid" src="{{detailShow.image}}">
     <div class="card-body">
       <h4 class="card-title">{{ detailShow.title }}</h4>
       <p class="card-text" [innerHTML]="detailShow.summary"></p></div>
diff --git a/src/app/components/show-details/show-details.component.ts b/src/app/components/show-details/show-details.component.ts
index 3201695..5bc5192 100644
--- a/src/app/components/show-details/show-details.component.ts
+++ b/src/app/components/show-details/show-details.component.ts
@@ -1,14 +1,13 @@
 import {Component, Input} from '@angular/core';
 import {BehaviorSubject} from 'rxjs';
 import {Show} from '../../model/show';
-import {AsyncPipe, NgOptimizedImage} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
   selector: 'app-show-details',
   standalone: true,
   imports: [
-    AsyncPipe,
-    NgOptimizedImage
+    AsyncPipe
   ],
   templateUrl: './show-details.component.html',
   styleUrl: './show-details.component.css'
diff --git a/src/app/services/api-service.ts b/src/app/services/api-service.ts
index 7e4efb6..b71e37c 100644
--- a/src/app/services/api-service.ts
+++ b/src/app/services/api-service.ts
@@ -1,7 +1,7 @@
 import {inject, Injectable} from '@angular/core';
 import {Show} from '../model/show';
 import {HttpClient} from '@angular/common/http';
-import {map, Observable} from 'rxjs';
+import {catchError, map, Observable, throwError} from 'rxjs';
 import {ShowDTO} from '../model/ShowDto';
 
 @Injectable({
@@ -15,10 +15,20 @@ export class ApiService {
     const apiUrl = `${this.baseUrl}/singlesearch/shows?q=${title}`;
     let show: Show = new Show(0, title);
 
-    return this.httpClient.get<ShowDTO>(apiUrl).pipe(map((s) => {
-      show.summary = s.summary;
-      show.image = s.image?.medium;
-      return show;
-    }));
+    return this.httpClient.get<ShowDTO>(apiUrl).pipe(
+      catchError(err => {
+        let errorMessage;
+        if (err.status == 404) {
+          errorMessage = "Eine Serie mit diesem Titel konnte nicht gefunden werden.";
+        } else {
+          errorMessage = err.message();
+        }
+        return throwError(() => console.log(errorMessage));
+      }),
+      map((s) => {
+        show.summary = s.summary;
+        show.image = s.image?.medium;
+        return show;
+      }));
   }
 }