diff --git a/src/app/gifs/interfaces/gifs.interface.ts b/src/app/gifs/interfaces/gifs.interface.ts new file mode 100644 index 0000000..cd2a6b0 --- /dev/null +++ b/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; +} diff --git a/src/app/gifs/sevices/gifs.service.ts b/src/app/gifs/sevices/gifs.service.ts index bfdbeed..ebf5015 100644 --- a/src/app/gifs/sevices/gifs.service.ts +++ b/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(`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 ) ); + })