Ultimos retoques

EARodriguez2021 · Jul 6, 2022 · 8930f23 · 8930f23
1 parent cd0a5de
commit 8930f23
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 5 deletions.
diff --git a/src/app/gifs/resultados/resultados.component.html b/src/app/gifs/resultados/resultados.component.html
@@ -7,7 +7,7 @@
 <div class="row">
 
   <div *ngFor="let gif of resultados"
-       class="col-md-4 col-sm-6">
+       class="col-md-4 col-sm-6 animate__animated animate__fadeIn">
 
     <div class="card">
       <img

diff --git a/src/app/gifs/services/gifs.service.ts b/src/app/gifs/services/gifs.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { Gif, SearchGifsResponse } from '../interface/gifs.interface';
 
 @Injectable({
@@ -8,6 +8,7 @@ import { Gif, SearchGifsResponse } from '../interface/gifs.interface';
 export class GifsService {
 
   private _apiKey: string = '1rJ7CaPuJ0XVDmmcDmXOMdGhavYdEXpA';
+  private servicioUrl: string = 'https://api.giphy.com/v1/gifs';
   private _historial: string[] = [];
 
   public resultados: Gif[] = [];
@@ -16,7 +17,12 @@ export class GifsService {
     return [...this._historial];
   }
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) { 
+
+  this._historial = JSON.parse(localStorage.getItem('historial')!) || [];
+  this.resultados = JSON.parse(localStorage.getItem('resultados')!) || [];
+
+  }
 
   buscarGifs(query: string) {
 
@@ -25,11 +31,18 @@ export class GifsService {
     if (!this._historial.includes(query)) {
       this._historial.unshift(query);
       this._historial = this._historial.splice(0, 10);
+      localStorage.setItem('historial', JSON.stringify( this._historial )  );
     }
 
-    this.http.get<SearchGifsResponse>(`https://api.giphy.com/v1/gifs/search?api_key=${this._apiKey}&q=${query}&limit=10`)
+    const params = new HttpParams()
+          .set('api_key', this._apiKey)
+          .set('limit', '10')
+          .set('q', query );
+
+    this.http.get<SearchGifsResponse>(`${this.servicioUrl}/search`, { params })
       .subscribe((resp) => {
         this.resultados = resp.data;
+        localStorage.setItem('resultados', JSON.stringify( this.resultados )  );
       })
 
   }

diff --git a/src/app/shared/sidebar/sidebar.component.html b/src/app/shared/sidebar/sidebar.component.html
@@ -5,7 +5,11 @@ <h3 class="text-light">
   </h3>
   <hr class="text-white">
   <div class="list-group list-reset">
-    <a *ngFor="let history of historial" href="#" class="list-group-item list-group-item-action">
+    <a 
+        (click)="buscar( history )"
+        *ngFor="let history of historial" 
+        href="#" 
+        class="list-group-item list-group-item-action">
       {{ history | titlecase }}
     </a>
   </div>

diff --git a/src/app/shared/sidebar/sidebar.component.ts b/src/app/shared/sidebar/sidebar.component.ts
@@ -11,6 +11,11 @@ export class SidebarComponent {
     return this.gifsService.historial;
   }
 
+  buscar(termino: string)
+  {
+    this.gifsService.buscarGifs(termino);
+  }
+
   constructor(private gifsService: GifsService) { }
 
 }
diff --git a/src/index.html b/src/index.html
@@ -7,6 +7,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+  />
 </head>
 <body>
   <app-root></app-root>