¡Prueba de fuego!

Clase 13 de 15 • Curso de Creación de Librerías UI para React

Contenido del curso

Introducción al curso

Pre-coding

3
Definir requerimientos
16:38 min

Desarollo components

Juan Camilo Lentino Villalba

student•

yo le añadí 2 nuevos estados

const [back, setBack] = useState(true)
const [next, setNext] = useState(false)

y se los di como valor de la propiedad disabled de los botones, y estos mismos estados los utilice como sentencia para un operador ternario para controlar el valor de la propiedad bgColorHover

<Button disabled={back} width="150px" height="40px" bgColorHover={back ? '' : 'red'} onClick={handleDecrement}>{'<Back'}</Button>
<Button disabled={next} width="150px" height="40px" bgColorHover={next ? '' : 'green'} onClick={handleIncrement}>{'Next>'}</Button>

todo esto con el fin de limitar el valor de numCharacter, que nunca pueda ser menor a 1 o mayor a 826 (numero de personajes de la API), la interfaz no lo permitirá, y para eso utilice una función para controlar los estados de back y next

const handleDisabled = ()=> {
  if (numCharacter === 1){
    setBack(true)
  } else {
    setBack(false)
  }

  if (numCharacter === 826){
    setNext(true)
  } else {
    setNext(false)
  }
}

esta función se ejecutara cada vez que el valor de numCharacter cambie

useEffect(()=> {
  gettinCharacter(numCharacter)
  handleDisabled()
}, [numCharacter])

el código completo quedaría de esta manera src/App.js:

import { useEffect, useState } from 'react';
import { Button, ContainerFlex, MediaImg, Text } from 'curso-creacion-librerias-ui'
import { gettinData } from './services';


function App() {
  
  const [back, setBack] = useState(true)
  const [next, setNext] = useState(false)
  const [numCharacter, setNumCharacter] = useState(1)
  const [characters, setCharacters] = useState({})

  const gettinCharacter = async (character)=> {
    const response = await gettinData(character)
    setCharacters(response)
    console.log(response)
  }

  useEffect(()=> {
    gettinCharacter(numCharacter)
    handleDisabled()
  }, [numCharacter])

  const handleDisabled = ()=> {
    if (numCharacter === 1){
      setBack(true)
    } else {
      setBack(false)
    }

    if (numCharacter === 826){
      setNext(true)
    } else {
      setNext(false)
    }
  }

  const handleIncrement = ()=> {
    setNumCharacter(numCharacter+1)
  }

  const handleDecrement = ()=> {
    setNumCharacter(numCharacter-1)
  }


  return (
    <div className="App">
      <ContainerFlex
        flexDirection="column"
        justifyContent="space-evenly"
        alignItems="center"
        height="100vh"
        gap="8px"
      >
        <MediaImg src={characters.image || ''} width="200px" height="200px" alt={characters.name || ''} />
        <Text component="h3" fontSize="18px" lineHeight="10px">{characters.name}</Text>
        <Text component="p" fontSize="18px" lineHeight="10px">{characters.id}</Text>
        <Text component="p" fontSize="18px" lineHeight="10px">{characters.species}</Text>
        <Text component="p" fontSize="18px" lineHeight="10px">{characters.status}</Text>
        <ContainerFlex
          flexDirection="row"
          justifyContent="center"
          alignItems="center"
          gap="8px"
        >
          <Button disabled={back} width="150px" height="40px" bgColorHover={back ? '' : 'red'} onClick={handleDecrement}>{'<Back'}</Button>
          <Button disabled={next} width="150px" height="40px" bgColorHover={next ? '' : 'green'} onClick={handleIncrement}>{'Next>'}</Button>  
        </ContainerFlex>
      </ContainerFlex>
    </div>
  );
}

export default App;

src/services.js:

const urlFetch = 'https://rickandmortyapi.com/api/character/'

export const gettinData = async (character)=> {
    const response = await fetch(`${urlFetch}${character}`, {
        method: 'GET'
    })
    const payload = response.json()

    return payload
}

¡Prueba de fuego!

Introducción al curso

Bienvenida al curso

¿Cuando construir nuestra propia Librería UI?

Pre-coding

Definir requerimientos

Desarollo components

Button component

Button test

Container component

Container test

Media img component

Media img test

Text component

Text test

Publicación

Publicación de librería en npm

Prueba de fuego

¡Prueba de fuego!

Despedida

Resumen del curso

Despedida