simplify angular-image-search - add image model

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>
+  <img *ngFor="let image of images" [src]="image.image" />
+</section>

angular-image-search/src/app/image-search/image-search.component.ts

@@ -1,27 +1,29 @@
 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',
   templateUrl: './image-search.component.html',
   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;
       });
   }
 

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;
+}

angular-image-search/src/app/image-api.service.ts → angular-image-search/src/app/services/image-api.service.ts

@@ -2,26 +2,20 @@ 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'
 })
 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)
+    );
   }
 }