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)
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 8
Preguntas 0
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??
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?