From 9197936da6c76c506ba9cee08793cea0740d6951 Mon Sep 17 00:00:00 2001
From: Fadi Serapian <fadi.serapian@gmail.com>
Date: Fri, 29 May 2020 20:04:19 -0400
Subject: [PATCH] simplify angular-image-search - add image model

---
 .../image-search/image-search.component.html  | 16 ++++++++++-----
 .../image-search/image-search.component.ts    | 20 ++++++++++---------
 .../src/app/models/image.model.ts             |  8 ++++++++
 .../{ => services}/image-api.service.spec.ts  |  0
 .../app/{ => services}/image-api.service.ts   | 16 +++++----------
 5 files changed, 35 insertions(+), 25 deletions(-)
 create mode 100644 angular-image-search/src/app/models/image.model.ts
 rename angular-image-search/src/app/{ => services}/image-api.service.spec.ts (100%)
 rename angular-image-search/src/app/{ => services}/image-api.service.ts (53%)

diff --git a/angular-image-search/src/app/image-search/image-search.component.html b/angular-image-search/src/app/image-search/image-search.component.html
index 4394852..dc6772f 100644
--- a/angular-image-search/src/app/image-search/image-search.component.html
+++ b/angular-image-search/src/app/image-search/image-search.component.html
@@ -1,10 +1,16 @@
 <h1>Angular Image Search</h1>
-<form (ngSubmit)="formSubmitted()">
+<form #f="ngForm" (ngSubmit)="formSubmitted(f)">
   <label for="searchTerm">Search Term</label>
-  <input [(ngModel)]="searchTerm" class="u-full-width" type="text" id="searchTerm" name="searchTerm">
+  <input
+    class="u-full-width"
+    type="text"
+    id="searchTerm"
+    name="searchTerm"
+    ngModel
+  />
   <button type="submit">Search</button>
 </form>
-<img *ngIf="loading" id="loadingImage" src="https://i.imgur.com/LVHmLnb.gif">
+<img *ngIf="loading" id="loadingImage" src="https://i.imgur.com/LVHmLnb.gif" />
 <section class="images">
-  <img *ngFor="let image of images;" [src]="image" >
-</section>
\ No newline at end of file
+  <img *ngFor="let image of images" [src]="image.image" />
+</section>
diff --git a/angular-image-search/src/app/image-search/image-search.component.ts b/angular-image-search/src/app/image-search/image-search.component.ts
index 47c485d..4bcf516 100644
--- a/angular-image-search/src/app/image-search/image-search.component.ts
+++ b/angular-image-search/src/app/image-search/image-search.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { ImageApiService, APIResult, ImageResult } from '../image-api.service';
+import { NgForm } from '@angular/forms';
+import { ImageApiService } from '../services/image-api.service';
+import { Image } from '../models/image.model';
 
 @Component({
   selector: 'app-image-search',
@@ -7,21 +9,21 @@ import { ImageApiService, APIResult, ImageResult } from '../image-api.service';
   styleUrls: ['./image-search.component.css']
 })
 export class ImageSearchComponent implements OnInit {
-  searchTerm = '';
   loading = false;
-  images: string[] = [];
+  images: Image[];
 
   constructor(private imageAPIService: ImageApiService) { }
 
-  ngOnInit(): void {}
+  ngOnInit(): void { }
 
-  formSubmitted() {
-    this.images = [];
+  formSubmitted(searchForm: NgForm) {
     this.loading = true;
-    this.imageAPIService.getImages(this.searchTerm)
-      .subscribe((images: string[]) => {
+    const searchTerm = searchForm.value.searchTerm;
+
+    this.imageAPIService.getImages(searchTerm)
+      .subscribe((images: Image[]) => {
         this.images = images;
-        this.loading = false;   
+        this.loading = false;
       });
   }
 
diff --git a/angular-image-search/src/app/models/image.model.ts b/angular-image-search/src/app/models/image.model.ts
new file mode 100644
index 0000000..4349ba5
--- /dev/null
+++ b/angular-image-search/src/app/models/image.model.ts
@@ -0,0 +1,8 @@
+export interface Image {
+  title: string;
+  image: string;
+  thumbnail: string;
+  author: string;
+  source: string;
+  created_utc: number;
+}
\ No newline at end of file
diff --git a/angular-image-search/src/app/image-api.service.spec.ts b/angular-image-search/src/app/services/image-api.service.spec.ts
similarity index 100%
rename from angular-image-search/src/app/image-api.service.spec.ts
rename to angular-image-search/src/app/services/image-api.service.spec.ts
diff --git a/angular-image-search/src/app/image-api.service.ts b/angular-image-search/src/app/services/image-api.service.ts
similarity index 53%
rename from angular-image-search/src/app/image-api.service.ts
rename to angular-image-search/src/app/services/image-api.service.ts
index b1bc69d..39b7209 100644
--- a/angular-image-search/src/app/image-api.service.ts
+++ b/angular-image-search/src/app/services/image-api.service.ts
@@ -2,17 +2,10 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { Image } from '../models/image.model';
 
 const API_URL = 'https://nature-image-api.now.sh/search?q=';
 
-export interface ImageResult {
-  image: string;
-}
-
-export interface APIResult {
-  images: ImageResult[];
-}
-
 @Injectable({
   providedIn: 'root'
 })
@@ -20,8 +13,9 @@ export class ImageApiService {
 
   constructor(private http: HttpClient) { }
 
-  getImages(searchTerm): Observable<string[]> {
-    return this.http.get<APIResult>(`${API_URL}${searchTerm}`)
-      .pipe(map(({ images }) => images.map(({ image }: ImageResult) => image)));
+  getImages(searchTerm: string): Observable<Image[]> {
+    return this.http.get<any>(`${API_URL}${searchTerm}`).pipe(
+      map(res => res.images)
+    );
   }
 }