Evaluación del proyecto

Clase 23 de 24 • Curso Fundamental de Material UI con React

Patrick Jhonatan Hernandez Blanco

student•

Yo realicé el proyecto con la API de Pokemon por si alguien la quiere utilizar es genial!! y les comparto el código de mi proyecto Buscador de Pokemons (Aún falta separar el código en componentes)

Francisco Murillo

student•

Me gusta!!!🤌🏻

Jason Francisco Macas Mora

student•

Muy buen diseño. 🥹

Fidel Parabacuto

student•

Para arreglar el formato de fecha

  {new Date(created_at).toLocaleDateString('en-us')}

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;

Benjamín Arturo Pérez García

student•

Les comparto mi proyecto terminado con error y responsive. Muy buen curso y el ánimo del profe lo hacía mucho más liviano! Proyecto terminado

Mauricio Combariza

student•

Listo, ya estoy listo para aprender material ui. Alguna sugerencia??

Brandon Argel Verdeja Domínguez

student•

Al fin terminé el proyecto, me tardé mucho porque implemente para cambiar de tema light/dark con Material UI, entre otras cosas. 😅

Sergio Valbuena

student•

La solucion al reto de los errores: usar Vite! . Todo fue tan hermoso con Vite, la primera clase son como 10 segundos y ya está todo listo

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