From 423b66d570654e28ff24221690ef2fecc61aabf5 Mon Sep 17 00:00:00 2001
From: Jeroham Miranda <verdizone@gmail.com>
Date: Tue, 2 Mar 2021 10:49:39 -0600
Subject: [PATCH] 84.mostrar-resultados-en-pantalla

---
 src/app/app.module.ts                         |  6 ++++
 src/app/gifs/busqueda/busqueda.component.ts   |  5 +++-
 .../gifs/resultados/resultados.component.html | 23 +++++++++++++-
 .../gifs/resultados/resultados.component.ts   | 13 ++++----
 src/app/gifs/sevices/gifs.service.ts          | 30 +++++++++++++++++--
 src/app/shared/sidebar/sidebar.component.html |  2 +-
 src/app/shared/sidebar/sidebar.component.ts   |  2 ++
 7 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8cfa9c9..e60d5bc 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
 
 
 //Modules
@@ -14,7 +15,12 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
+    //Angular
     BrowserModule,
+    HttpClientModule,
+    //Third parties...
+
+    //Mis Modulos
     SharedModule,
     GifsModule,
 
diff --git a/src/app/gifs/busqueda/busqueda.component.ts b/src/app/gifs/busqueda/busqueda.component.ts
index 645e3b2..d3c5c65 100644
--- a/src/app/gifs/busqueda/busqueda.component.ts
+++ b/src/app/gifs/busqueda/busqueda.component.ts
@@ -20,7 +20,10 @@ export class BusquedaComponent implements OnInit {
   buscarTexto(  ){
     const valor = this.txtBuscar.nativeElement.value;
 
-    // console.log( valor );
+     if (valor.trim().length === 0){
+       return;
+     }
+
     this.gifsService.buscarGifs( valor );
 
     this.txtBuscar.nativeElement.value = '';
diff --git a/src/app/gifs/resultados/resultados.component.html b/src/app/gifs/resultados/resultados.component.html
index 8abf4fb..44c5969 100644
--- a/src/app/gifs/resultados/resultados.component.html
+++ b/src/app/gifs/resultados/resultados.component.html
@@ -1,5 +1,26 @@
 <div class="col">
   <hr>
-  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore distinctio, iste accusamus consequatur ut eligendi quos et tempore explicabo delectus, inventore voluptas corporis maiores incidunt illum. Voluptatem quo ab eveniet?</p>
+
+
+   <div class="row">
+     <div *ngFor="let gif of resultados"
+     class="col-md-4 col-sm-6">
+      <div class="card">
+        <img
+        [src]="gif.images.downsized_medium.url"
+        [alt]="gif.title"
+        class="card-image-top
+        ">
+        <div class="card-body">
+          <div class="card-text">
+            <!-- {{ gif.title }} -->
+            {{ gif.images.downsized_medium.url }}
+          </div>
+        </div>
+      </div>
+     </div>
+   </div>
+
+
 
 </div>
diff --git a/src/app/gifs/resultados/resultados.component.ts b/src/app/gifs/resultados/resultados.component.ts
index 2efbc15..41294a0 100644
--- a/src/app/gifs/resultados/resultados.component.ts
+++ b/src/app/gifs/resultados/resultados.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { GifsService } from '../sevices/gifs.service';
 
 @Component({
   selector: 'app-resultados',
@@ -6,11 +7,13 @@ import { Component, OnInit } from '@angular/core';
   styles: [
   ]
 })
-export class ResultadosComponent implements OnInit {
+export class ResultadosComponent {
 
-  constructor() { }
-
-  ngOnInit(): void {
+  get resultados(){
+    return this._gifsService.resultados;
   }
 
+  constructor(  private _gifsService:GifsService, ) { }
+
+
 }
diff --git a/src/app/gifs/sevices/gifs.service.ts b/src/app/gifs/sevices/gifs.service.ts
index 07b96d3..bfdbeed 100644
--- a/src/app/gifs/sevices/gifs.service.ts
+++ b/src/app/gifs/sevices/gifs.service.ts
@@ -1,3 +1,4 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 
 @Injectable({
@@ -5,16 +6,41 @@ import { Injectable } from '@angular/core';
 })
 export class GifsService {
 
+
+  private apiKey:string = 'l5riPVpNTboaKKKjqUAe81u9PmKLfRhG';
   private _historial:string[] = [];
 
+
+  //TODO cambiar el tipado de any por el correspondiente
+  public resultados:any[] = [];
+
   get historial (){
     return [...this._historial];
   }
 
+  constructor (  private http:HttpClient, ) {}
+
   buscarGifs( query:string ){
-    this._historial.unshift( query );
 
-    console.log(this._historial);
+    query = query.trim().toLowerCase();
+
+    if (!this._historial.includes( query ) ){
+
+      this._historial.unshift( query );
+      this._historial = this._historial.splice(0,10);
+
+    }
+
+    // console.log(this._historial);
+
+    this.http.get(`https://api.giphy.com/v1/gifs/search?api_key=l5riPVpNTboaKKKjqUAe81u9PmKLfRhG&q=${ query }&limit=10`)
+    .subscribe( ( resp:any ) => {
+      console.log( resp.data );
+      this.resultados = resp.data;
+    })
+
+
+
   }
 
 
diff --git a/src/app/shared/sidebar/sidebar.component.html b/src/app/shared/sidebar/sidebar.component.html
index 6922947..56cc078 100644
--- a/src/app/shared/sidebar/sidebar.component.html
+++ b/src/app/shared/sidebar/sidebar.component.html
@@ -7,7 +7,7 @@ <h3 class="text-light display-6">
     <a href="#"
       class="list-group-item list-group-item-action"
       *ngFor="let item of historial"
-      >{{item}}
+      >{{item | titlecase}}
     </a>
 
   </div>
diff --git a/src/app/shared/sidebar/sidebar.component.ts b/src/app/shared/sidebar/sidebar.component.ts
index 58327e2..a047010 100644
--- a/src/app/shared/sidebar/sidebar.component.ts
+++ b/src/app/shared/sidebar/sidebar.component.ts
@@ -15,4 +15,6 @@ export class SidebarComponent {
 
   constructor(  private _gifsService: GifsService, ){}
 
+
+
 }