Qual o tipo de um React Hook? | Alura Cursos Online

Qual o tipo de um React Hook? | Alura Cursos Online

function Pokemon() {
    const [Pokemon, setPokemon] = useState<string>('Pikachu');
    function trocarPokemon() {
        const novoPokemon = getPokemonAleatorio();
        setPokemon(novoPokemon);
    }

    useEffect(() => {
        async function buscaPokemon() {
            const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${nome}`);
            const data = await response.json();
            const Pokemon: Pokemon = {
                nome: data.name,
                imagem: data.sprites.front_default,
            };
            setPokemon(Pokemon);
        }
        if (nome) {
            buscaPokemon();
        }
    }, [nome]);

    return (
        <div className="Pokemon">
            <>
                {Pokemon ? ( 
                    <>
                        <h1>{Pokemon.nome}</h1>
                        <img src={Pokemon.imagem} alt={Pokemon.nome} />
                    </>
                ) : (
                    <p>Carregando...</p> 
                )}
            </>
        </div>
    );
}
export default Pokemon;

import { createContext, useContext, useState, ReactNode } from 'react';
// Interface para representar o contexto
interface PokemonContextType {
  treinador: string;
  setTreinador: React.Dispatch<React.SetStateAction<string>>;
}
// Criar o contexto
const PokemonContext = createContext<PokemonContextType | undefined>(undefined);
// Provedor do contexto
interface PokemonProviderProps {
  children: ReactNode;
}
  () {
   [treinador, setTreinador] = ();
   (
    
  );
}

  () {
   context = ();
   (!context) {
      ();
  }
   context;
}

import React from 'react';
import { usePokemon } from './PokemonContext';
function TreinadorPokemon() {
  const { treinador, setTreinador } = usePokemon();
  return (
    <div>
      <h2>Treinador Pokémon:</h2>
      <p>{treinador}</p>
      <button onClick={() => setTreinador('Misty')}>Mudar Treinador</button>
    </div>
  );
}
export default TreinadorPokemon;

function usePokebola(): [PokebolaState, () => void, () => void] {
    // Use useState para gerenciar o estado da Pokébola
 const [estadoPokebola, setEstadoPokebola] = useState<PokebolaState>('fechada');
    // Função para abrir a Pokébola
    const abrirPokebola = () => {
        setEstadoPokebola('aberta');
    };
    // Função para fechar a Pokébola
    const fecharPokebola = () => {
        setEstadoPokebola('fechada');
    };
    return [estadoPokebola, abrirPokebola, fecharPokebola];
}
export default usePokebola;

import usePokebola from '../usePokebola';
import PokebolaAberta from "./pokebolaaberta.png";
import PokebolaFechada from "./pokebolafechada.png";
function Pokebola() {
    // Use o hook usePokebola
    const [estadoPokebola, abrirPokebola, fecharPokebola] = usePokebola();
    return (
        <div>
            <img src={estadoPokebola == "aberta"
                ? PokebolaAberta
                : PokebolaFechada} alt={`Pokebola ${}`} />
            
                Abrir Pokébola
                Fechar Pokébola
            
        
    );
}
  ;

    const aumentarNivel = () => {
        setPokemonLevel(pokemonLevel + 1);
    };
    const diminuirNivel = () => {
        if (pokemonLevel > 0) {
            setPokemonLevel(pokemonLevel - 1);
        }
    };

    return (
        <div>
            <h1>Ninetales</h1>
            <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/38.png" alt="Imagem do pokemon ninetales" />
            <p>Nível atual do Pokémon: {pokemonLevel}</p>
            <button onClick={aumentarNivel}>Aumentar Nível</button>
            <button onClick={diminuirNivel}>Diminuir Nível</button>
        </div>
    );
}
export default PokemonLevel;