Introducción a PokeAPI

para que les quede mas facil 🥵🥵

https://raw.githubusercontent.com/musartedev/curso-redux/27298f5dd3e37caf2a90a7a82580cd2905fcab31/src/statics/logo.svg

Usando async await:

import axios from 'axios';

export const getPokemons = async () => {
	try {
		const { data } = await axios.get(
			'https://pokeapi.co/api/v2/pokemon?limit=151'
		);
		console.log(data.results);
		return data.results;
	} catch (error) {
		console.error('There was an error: ', error);
	}
};

Con async/await es más fácil

solo se debe escibir la función getPokemon de esta manera:

export const getPokemon = async () => {
  try {
    const { data } = await axios.get('https://pokeapi.co/api/v2/pokemon?limit=151')
return data
  } catch (error) {
    console.error(error.message)
  }
}

Y dentro de App.jsx en el useEffect solamente se ejecutaría la función:

useEffect(() => {
  getPokemon()
}, [])

Para los que esten trabajando con TypeScript y Vite, mi codigo esta así: (cualquier duda o aporte comenten)

// App.tsx
import { useEffect, useState } from 'react'
import { Col } from 'antd'
import { Search } from './components/Search'
import { PokemonList } from './components/PokemonList'
import { getPokemons } from './api'
import logo from './statics/logo.svg'
import './App.css'

function App() {
  const [pkmns,setPkmns] = useState([]);
  useEffect(()=>{
    async function fetchPokemon(){
      const pokemons = await getPokemons();
      setPkmns(pokemons)
    } 
    fetchPokemon();
  },[])
  return (
    <div className="App">
      <Col span={4} offset={10}>
        <img src={logo} alt="Pokedux" />
      </Col>
      <Col span={8} offset={8}>
        <Search />
      </Col>
      <PokemonList pokemons={pkmns} />
    </div>
  )
}

export default App

// index.ts
import axios from "axios";

type PokemonType = {
    name: string;
    url : string
}

type GetPokemonsResponse = {
    results: PokemonType[]
}

export const getPokemons = async ()=>{
    try {
        const { data } = await axios.get<GetPokemonsResponse>('https://pokeapi.co/api/v2/pokemon?limit=151');
        return data.results;
    } catch (err) {
        console.error(err);
    }
}

// PokemonList.tsx
import { FC } from "react";
import { PokemonCard } from "./PokemonCard";
import './PokemonList.css'

export interface IPokemon{
    name: string
    url: string
}

interface Props {
    pokemons: IPokemon[]
}

const PokemonList:FC<Props> = ({ pokemons }) =>{
    console.info(pokemons)
    return (
        <div className="PokemonList">
            {pokemons.map((pokemon,index)=>(
                <PokemonCard url={pokemon.url} name={pokemon.name} key={pokemon.name} />
            ))}
        </div>
    )
}

PokemonList.defaultProps = {
    pokemons: Array(10).fill('')
}

export {
    PokemonList
}

// PokemonCard.tsx
import { FC } from "react";
import { StarOutlined } from "@ant-design/icons";
import { Card } from "antd";
import Meta from "antd/lib/card/Meta";
import { IPokemon } from "./PokemonList";

const PokemonCard:FC<IPokemon> = ({name, url}) => {
    console.info(name)
    return (
        <Card
            title={name}
            cover={<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png" alt="Ditto" />}
            extra={<StarOutlined />}
        >
            <Meta description="fire, fairy" />
        </Card>
    )
}

export {
    PokemonCard
}

Hola tengo un error al usar key = { pokemon . name } no me salen los nombres y sigue saliendo el warning en consola. Help me pls

api/index.js

import axios from "axios";

const API_URL = 'https://pokeapi.co/api/v2/pokemon?limit=151';
export const getPokemon = () => {
    return axios
        .get(API_URL)
        .then((response) => response.data.results)
        .catch((error) => console.error(error));
}

Os dejo un enlace muy interesante sobre el manejo de asincronía en useEffect

A mi no me pinta el name en el componente card:

App.js

import { useEffect, useState } from 'react';
import { Col } from 'antd';
import SearchBar from './components/SearchBar';
import PokemonList from './components/PokemonList';
import { getPokemons } from './api';
import logo from './statics/logo.svg';
import './App.css';

function App() {
  const [pokemons, setPokemons] = useState([]);

  useEffect(() => {
    const fetchPokemons = async () => {
      const pokemonsRes = await getPokemons();
      setPokemons(pokemonsRes);
    };

    fetchPokemons();
  }, []);

  return (
    <div className='App'>
      <Col span={4} offset={10}>
        <img src={logo} alt='Pokedux' />
      </Col>
      <Col span={8} offset={8}>
        <SearchBar />
      </Col>
      <PokemonList pokemons={pokemons} />
    </div>
  );
}

export default App;

/api/index.js

import axios from 'axios';

const getPokemons = () => {
  return axios 
  .get('https://pokeapi.co/api/v2/pokemon?limit=151')
  .then((res) => console.log(res.data.results))
  .catch((err) => console.log(err));
}

export { getPokemons };

Pokemonlist.jsx

import PokemonCard from './PokemonCard';

const PokemonList = ({ pokemons }) => {
  return (
    <div className='PokemonList'>
      {pokemons.map((pokemon) => {
        return <PokemonCard name={pokemon.name} key={pokemon.name} />;
      })}
    </div>
  );
};

PokemonList.defaultProps = {
  pokemons: Array(10).fill(''),
};

export default PokemonList;

Esta sección es una joya

useEffect(() => {
    const fetchPokemons = async () => await getPokemos();
    fetchPokemons();
  }, []);

Normalmente existe una mala práctica de usar el async sin escalas en el useEffect, en linters estrictos esto truena y más si es en equipo colaborativo, el trabajo con promesas es una joya, me está encantando este curso, buen remake, que diga excelente remake.

Este video no se ve desde la aplicación movil de platzi