Proyecto buscador de Gifs 2 (Peticiones Fetch)


*

">

Componente que recibe los valores del array como argumento


Haremos un componente que cuando note que hay un nuevo elemento cree la peticion HTTP y ademas traiga las imagenes correspondientes y se desplegen en el DOM

Por ahora solo crearemos el archivo inclutendo un h3 con las category 

// Archivo GifGrid.js
import React from 'react';

const GifGrids = (category) => {
  return (
    <>
      <h3>{category}</h3>
    </>
  );
};

export default GifGrids;

">

Modificacion del GifexpertApp


En lugar de renderizar el li renderizaremos el nuevo componente componente 

 // Edicion archivo GifExpertApp.js
import { useState } from 'react';
import AddCategory from './components/AddCategory';
import GifGrids from './components/GifGrids';

const GifExpertApp = () => {
  const [categories, setCategories] = useState(['Dragon Ball']);

  return (
    <>
      <h2>GifExpertApp </h2>
      <AddCategory setCategories={setCategories} />
      <hr />

      <ol>
        {categories.map((category) => (
          // Ya no usaremos esto... return <li key={category}> {category} </li>;
          <GifGrids key={category} category={category} />
        ))}
      </ol>
    </>
  );
};

export default GifExpertApp;
">

Envio de peticion HTTP


Buscaremos dentro de la pagina de la api en la seccion developers el Endpoint de se Search
Que seria esto : api.giphy.com/v1/gifs/search

En PostMan o Insomia(yo usare Insomia) enviaremos nuetra solicitud GET con el url del endpoint de search y nos dara este error en Insomia porque no tenemos la API Key
{ "message": "No API key found in request" }

Solucion del error de autentificacion Para solucionarlo buscaremos nuestra API Key : JeeWKM4pXxeFy1ne8EhjO11BtYtTCNb5 y lo enviaremos como argumento en los parametros

En Insomia es en la seccion de Query
New value = api_key
Value = JeeWKM4pXxeFy1ne8EhjO11BtYtTCNb5

1
">

Solicitud de GIF


Importante y quizas algo obvio pero cada API tiene su propios parametros y metodos y nombres distintos

Usaremos el parametro q que es para activar las busquedas
New value = q
Value = Pokemon

Y el parametro limit
New value = limit
Value = 10
Ahora nos copiaremos esa URL y la usaremos en VS Code

2
">

Fetch GrifGrid.js

URL en VS Code Debemos aƱadir el HTTPS si hace falta

Ahora usaremos fetch y el async-await
A data la destructuraremos para usar sus elementos
Extrerenos en este caso id, titulo, ademas del URL de las imagenes de tamaƱo medio
En URL usaremos el oprador ternario por si no envian la imagen evitar errores 

 // Modificacion de GifGrid.js
import React from 'react';

const GifGrids = ({ category }) => {
  const getGifs = async () => {
    const url =
      'https://api.giphy.com/v1/gifs/search%09?q=Pokemon&limit=10&api_key=JeeWKM4pXxeFy1ne8EhjO11BtYtTCNb5';
    const resp = await fetch(url);
    const { data } = await resp.json();
    const gifs = data.map((img) => {
      return {
        id: img.id,
        title: img.title,
        url: img.images?.downsized_medium.url,
      };
    });

    console.log(gifs);
  };
  getGifs();

  return (
    <>
      <h3>{category}</h3>
    </>
  );
};
export default GifGrids;
">

Default Values con defaultProps

USE EFFECTS en GrifGrid.js

Me permite ejecutar codigo de manera condicional sin importar el nivel donde se encuentre la funcion ejecutandose, el segundo elemento es una lista de dependencias (dentro de el array)

Si dejamos la lista de dependencias vacio la funcion useEffect solo se va ejecutar una sola vez, osea solo se ejecutara cuando el componente es renderizado la primera vez

NOta tenemos dos snipets para USE EFFECT
- Auto importacion: El primero que aparece un cubo en morado para importacion de USE EFFECT (Aparece solo escribiendo useEffect)
- Estructura: El segundo aparece un cuadrado blanco le damos y nos da el cascaron (Aparece solo escribiendo useEffect) 

// Modificiacion de GifGrid.js
import React, { useEffect } from 'react';

const GifGrids = ({ category }) => {
  useEffect(() => {
    getGifs();
  }, []);

  const getGifs = async () => {
    const url =
      'https://api.giphy.com/v1/gifs/search%09?q=Pokemon&limit=10&api_key=JeeWKM4pXxeFy1ne8EhjO11BtYtTCNb5';
    const resp = await fetch(url);
    const { data } = await resp.json();
    const gifs = data.map((img) => {
      return {
        id: img.id,
        title: img.title,
        url: img.images?.downsized_medium.url,
      };
    });

    console.log(gifs);
  };

  return (
    <>
      <h3>{category}</h3>
    </>
  );
};
export default GifGrids;
">

Mostrando las imagenes GrifGrid.js

Para esto vamos a usar USE STATE

El valor de nuestra key ser el id de esta manera podremos aƱadir los 10 elementos a la lista

AƱadiremos el GifGridItem y este sera aƱadido e key y desde ahi enviaremos las propiedaes de img con `{..img}`

Envio de todas las propiedades de img

Manera comun de envio de imagenes {...img} 

// Modificiacion de GifGrid.js
import React, { useEffect, useState } from 'react';
import GifGridItem from './GifGridItem';

const [images, setImages] = useState([]);
const GifGrids = ({ category }) => {
  useEffect(() => {
    getGifs();
  }, []);

  const getGifs = async () => {
    const url =
      'https://api.giphy.com/v1/gifs/search%09?q=Pokemon&limit=10&api_key=JeeWKM4pXxeFy1ne8EhjO11BtYtTCNb5';
    const resp = await fetch(url);
    const { data } = await resp.json();
    const gifs = data.map((img) => {
      return {
        id: img.id,
        title: img.title,
        url: img.images?.downsized_medium.url,
      };
    });

    console.log(gifs);
    setImages(gifs);
  };

  return (
    <>
      <h3>{category}</h3>
      {images.map((img) => (
        <GifGridItem key={img.id} {...img} />
      ))}
    </>
  );
};
export default GifGrids;
">

Componente GifGridItem GifGridItem.js

Componente de donde enviaremos las imagenes con su titulo

// Modificiacion de GifGridItem.js
import React from 'react';

const GifGridItem = ({ id, title, url }) => {
  console.log(id, title, url);
  return (
    <>
      <img src={url} alt={title} />
      <p>{title}</p>
    </>
  );
};

export default GifGridItem;