87.cargar-img-auto

src/app/gifs/interfaces/gifs.interface.ts

@@ -0,0 +1,136 @@
+export interface SearchGifsResponse {
+  data:       Gif[];
+  pagination: Pagination;
+  meta:       Meta;
+}
+
+export interface Gif {
+  type:                       Type;
+  id:                         string;
+  url:                        string;
+  slug:                       string;
+  bitly_gif_url:              string;
+  bitly_url:                  string;
+  embed_url:                  string;
+  username:                   Username;
+  source:                     string;
+  title:                      string;
+  rating:                     Rating;
+  content_url:                string;
+  source_tld:                 string;
+  source_post_url:            string;
+  is_sticker:                 number;
+  import_datetime:            Date;
+  trending_datetime:          Date;
+  images:                     Images;
+  analytics_response_payload: string;
+  analytics:                  Analytics;
+  user?:                      User;
+}
+
+export interface Analytics {
+  onload:  Onclick;
+  onclick: Onclick;
+  onsent:  Onclick;
+}
+
+export interface Onclick {
+  url: string;
+}
+
+export interface Images {
+  original:                 FixedHeight;
+  downsized:                The480_WStill;
+  downsized_large:          The480_WStill;
+  downsized_medium:         The480_WStill;
+  downsized_small:          DownsizedSmall;
+  downsized_still:          The480_WStill;
+  fixed_height:             FixedHeight;
+  fixed_height_downsampled: FixedHeight;
+  fixed_height_small:       FixedHeight;
+  fixed_height_small_still: The480_WStill;
+  fixed_height_still:       The480_WStill;
+  fixed_width:              FixedHeight;
+  fixed_width_downsampled:  FixedHeight;
+  fixed_width_small:        FixedHeight;
+  fixed_width_small_still:  The480_WStill;
+  fixed_width_still:        The480_WStill;
+  looping:                  Looping;
+  original_still:           The480_WStill;
+  original_mp4:             DownsizedSmall;
+  preview:                  DownsizedSmall;
+  preview_gif:              The480_WStill;
+  preview_webp:             The480_WStill;
+  "480w_still":             The480_WStill;
+}
+
+export interface The480_WStill {
+  height: string;
+  width:  string;
+  size:   string;
+  url:    string;
+}
+
+export interface DownsizedSmall {
+  height:   string;
+  width:    string;
+  mp4_size: string;
+  mp4:      string;
+}
+
+export interface FixedHeight {
+  height:    string;
+  width:     string;
+  size:      string;
+  url:       string;
+  mp4_size?: string;
+  mp4?:      string;
+  webp_size: string;
+  webp:      string;
+  frames?:   string;
+  hash?:     string;
+}
+
+export interface Looping {
+  mp4_size: string;
+  mp4:      string;
+}
+
+export enum Rating {
+  G = "g",
+  PG = "pg",
+}
+
+export enum Type {
+  GIF = "gif",
+}
+
+export interface User {
+  avatar_url:    string;
+  banner_image:  string;
+  banner_url:    string;
+  profile_url:   string;
+  username:      Username;
+  display_name:  string;
+  description:   string;
+  instagram_url: string;
+  website_url:   string;
+  is_verified:   boolean;
+}
+
+export enum Username {
+  Empty = "",
+  Snl = "snl",
+}
+
+export interface Meta {
+  status:      number;
+  msg:         string;
+  response_id: string;
+}
+
+export interface Pagination {
+  total_count: number;
+  count:       number;
+  offset:      number;
+}

src/app/gifs/sevices/gifs.service.ts

@@ -1,5 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { SearchGifsResponse, Gif } from '../interfaces/gifs.interface';
 
 @Injectable({
   providedIn: 'root'
@@ -10,15 +11,26 @@ export class GifsService {
   private apiKey:string = 'l5riPVpNTboaKKKjqUAe81u9PmKLfRhG';
   private _historial:string[] = [];
 
-
-  //TODO cambiar el tipado de any por el correspondiente
-  public resultados:any[] = [];
+  public resultados:Gif[] = [];
 
   get historial (){
     return [...this._historial];
   }
 
-  constructor (  private http:HttpClient, ) {}
+  constructor (  private http:HttpClient, ) {
+
+    // this._historial = localStorage.getItem('historial');
+
+    this._historial = JSON.parse( localStorage.getItem('historial')! ) || [];
+    this.resultados = JSON.parse ( localStorage.getItem('resultados')!) || [];
+
+  /*   if(localStorage.getItem('historial')){
+
+      this._historial = JSON.parse( localStorage.getItem('historial')! );
+
+    } */
+
+  }
 
   buscarGifs( query:string ){
 
@@ -29,14 +41,19 @@ export class GifsService {
       this._historial.unshift( query );
       this._historial = this._historial.splice(0,10);
 
+      localStorage.setItem('historial', JSON.stringify( this._historial ) );
+
     }
 
     // console.log(this._historial);
 
-    this.http.get(`https://api.giphy.com/v1/gifs/search?api_key=l5riPVpNTboaKKKjqUAe81u9PmKLfRhG&q=${ query }&limit=10`)
-    .subscribe( ( resp:any ) => {
+    this.http.get<SearchGifsResponse>(`https://api.giphy.com/v1/gifs/search?api_key=l5riPVpNTboaKKKjqUAe81u9PmKLfRhG&q=${ query }&limit=10`)
+    .subscribe( ( resp ) => {
       console.log( resp.data );
       this.resultados = resp.data;
+
+      localStorage.setItem('resultados', JSON.stringify( this.resultados ) );
+
     })