No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Evaluación del proyecto

23/24
Recursos

Aportes 8

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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)

Para arreglar el formato de fecha

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

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;

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

Todos los frameworks UI comparten la misma filosofia de responsive design, un grid container, hijos cols (12 a 16) y el resto es lo mismo.

Ánimos compañeros, el reto fue sencillo

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

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

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