Evaluación del proyecto

Construcción del proyecto

Juan Camilo Lentino Villalba

student•

como solución al reto numero dos, lo que yo hice, fue inicialmente desde el componente App pasar por props el estado notFound a el componente Searcher

const App = ()=>  {
	...
	const [notFound, setNotFound] = useState(false)
	...

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

recibo en el componente Searcher ese valor

const Searcher = ({ setInputUser, notFound }) => {
	...
}

ubicado en el componente Searcher, envuelvo a el componente Stack con Fragment y al mismo nivel del componente Stack añado un nuevo componente Typography que validara si el valor de notFound el cual fue recibido por props, es true o false y dependiendo su valor mostrara un mensaje de error o un string vacio

const Searcher = ({ setInputUser, notFound }) => {
    ....

    return (
        <>
            <Stack 
                ...
            </Stack>
            <Typography 
                color='red' 
            >
                {
                    notFound 
                        ? 'Error: usuario no existe'
                        : ''
                }
            </Typography>
        </>
    )
}

cada vez que busquemos un usuario que no exista o este mal escrito, este mensaje aparecerá y igualmente desaparecerá cuando el usuario sea encontrado, ya que toda esta logica que nos permite contralar esto se encuentra en el componente App en su funcion gettinUser

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)
        }
    }
    
    useEffect(()=> {
        gettinUser(inputUser)
    }, [inputUser])

    const containerStyles = {
        ....
    }

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

el código completo quedaría de esta forma src/App.jsx:

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

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)
        }
    }
    
    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} notFound={notFound} />
            <UserCard userState={userState} />
        </Container>
    );
}

export default App;

src/components/Searcher/index.js:

import React, { useState } from "react";
import { IconButton, Stack, TextField, Typography } from "@mui/material"
import SearchIcon from '@mui/icons-material/Search';

const Searcher = ({ setInputUser, notFound }) => {
    const [valueInput, setValueInput] = useState('')

    const onSearchValueChange = (event)=> {
        setValueInput(event.target.value)
    }

    const handleSubmit = ()=> {
        setInputUser(valueInput)
    }

    return (
        <>
            <Stack 
                direction='row' 
                sx={{
                    marginTop: '30px',
                    width: '80%'
                }}
            >
                <TextField 
                    id="outlined-basic" 
                    label="Github User"
                    placeholder="Octocat" 
                    variant="outlined" 
                    size="small"
                    value={valueInput}
                    onChange={onSearchValueChange}
                    sx={{
                        width: '90%',
                        
                    }}
                />
                <IconButton 
                    onClick={handleSubmit}
                    size="small"
                    sx={{
                        left: '-45px'
                    }}
                >
                    <SearchIcon />
                </IconButton>
            </Stack>
            <Typography 
                color='red' 
            >
                {
                    notFound 
                        ? 'Error: usuario no existe'
                        : ''
                }
            </Typography>
        </>
        
    )
}

export default Searcher;

Evaluación del proyecto

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