Conectando el buscador con la API

Construcción del proyecto

Juan Camilo Lentino Villalba

student•

yo lo hice de la siguiente forma:

el valor del estado inicial de userState (const [userState, setUserState] = useState("inputUser") no lo coloque como string

const [userState, setUserState] = useState(inputUser)

utilice JSON.stringify() y JSON.parse() para el seteado y obtención de datos en localStorage

if (userState === 'octocat'){
            localStorage.setItem('octocat',JSON.stringify(userResponse)) // JSON.stringify()
        }

        if (userResponse.message === 'Not Found'){
            const { octocat } = localStorage
            setInputUser(octocat)
            setUserState(JSON.parse(octocat)) // JSON.parse()
            setNotFound(true)
        }

en el primer bloque de código del condicional que valida si la respuesta de la petición es un objeto con una propiedad message con valor "Not Found", añadí tambien setUserState(JSON.parse(octocat)), y en el bloque de código del else setNotFound(false)

if (userResponse.message === 'Not Found'){
            const { octocat } = localStorage
            setInputUser(octocat)
            setUserState(JSON.parse(octocat)) // ***
            setNotFound(true)
        } else {
            setUserState(userResponse)
            setNotFound(false) // **
        }

el código completo quedaría así:

import React, { useState, useEffect } from "react";
import { Container } from "@mui/material";
import Searcher from "./components/Searcher";
import { getGitHubUser } from "./services/users";

const App = ()=>  {
    const [inputUser, setInputUser] = useState('octocat');
    const [userState, setUserState] = useState(inputUser)
    const [notFound, setNotFound] = useState(false)

    const gettinUser = async (user)=> {
        const userResponse = await getGitHubUser(user)

        if (userState === 'octocat'){
            localStorage.setItem('octocat',JSON.stringify(userResponse))
        }

        if (userResponse.message === 'Not Found'){
            const { octocat } = localStorage
            setInputUser(octocat)
            setUserState(JSON.parse(octocat))
            setNotFound(true)
        } else {
            setUserState(userResponse)
            setNotFound(false)
        }
    }

    console.log(userState)

    useEffect(()=> {
        gettinUser(inputUser)
    }, [inputUser])

    const containerStyles = {
        background: 'whitesmoke',
        width: '80vw',
        height: '500px',
        borderRadius: '16px',
        marginTop: '20px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
    }

    return (
        <Container sx={containerStyles}>
            <Searcher inputUser={inputUser} setInputUser={setInputUser} />
        </Container>
    );
}

export default App;

Conectando el buscador con la API

Introducción al curso

Bienvenida al curso

Presentación proyecto

¿Qué es Material UI?

Preparación de entorno de desarrollo

Herramientas dentro de Material UI

Componentes simples

Componentes compuestos

Contenedores responsive

Material icons

Bonus

Construcción del proyecto

Análisis detallado del proyecto

Creando el contenedor y el text field

Colocando los estilos del buscador

Construyendo la lógica del buscador

Conectando nuestro proyecto a la API de GitHub

Conectando el buscador con la API

Creando el contenedor y trayendo la imagen de perfil del usuario

Trayendo la información principal del usuario

Trayendo la descripción del usuario

Creando el componente con las estadísticas del usuario

Mostrando la localización del usuario

Ajuste de estilos con SX a los componentes de descripción e información principal

Ajuste de estilos con SX al componente de descripción, PaperInformation y LocationInformation

Evaluación del proyecto

Despedida

Resumen del curso