Conectando el buscador con la API

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

Clase anteriorSiguiente clase

Diana Florez

student•

A si mi me gusta el animo del profe... me hace prestar mas atención

Humberto Asca

student•

Es muy positivo, contagia su magia para bien. Motiva mucho.

Vinci Guerra

student•

Fuera bueno que no gritara tanto. Que pena pero me aturde en momentos.

María Antonia Lobato

student•

A mi me desespera tanto grito...

Kike Vanegas

student•

jajaja sí, está bien su entusiasmo, pero lo que respecta a la clase, debería moderar el tono jaja.

Estiven Mahecha Henao

student•

Me parece que es un poco confuso el código escrito por el profesor, acá les dejo mi código que a mi parecer es mas legible y mas corto, ya que no hago uso de tantos UseState y funciona igual.

Kike Vanegas

student•

El problema con tantos if en la función es que le toma un toque más resolver. Creo que sería mejor, ya que sabemos cómo es el flujo con valores default, tener un error handler, y en lugar de sobre evaluar el input value, y la response dentro del async, crear un comportamiento default por medio de un error handler.

Guillermo Nicolas Piedrabuena Parrochía

student•

Puede que este curso no este perfilado para mi, pero soy programador intermendio y en mi trabajo usan MUI, por eso busque el curso. La verdad necesitaba me explicaran bien el default theme y la prop variant, pero en este curso meten otras cosas más de logica y api, para que pongan en el curso que es para gente más iniciada. Creo que hace 4 años atras me habría fascinado.

Kike Vanegas

student•

jaaa... yo entré por la misma razón. Pensé que estaría más enfocado en arquitectura customisada con MUi

Iván Rodríguez

student•

si, hubiese sido muy bueno que una seccion se especificara en eso, tocara buscarlo en youtube o por ahi

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;

FRANCIA IVONN MUÑOZ ARISTIZABAL

student•

Sabes enseñar, no necesitas tanta energia, entiendo que aveces nos podemos entusiasmar pero debemos aprender a controlarnos, pero no te desanimes más bien vealo como una forma de mejorar, eres un buen guia. Espero ver otros cursos con usted pero por favor controlando un poco el entusiasmo. "Nunca pares de enseñar"

Lean Silva

student•

Está mal editado el audio del video, me sorprende que no revisen la calidad de su contenido mas a menudo. TEAM PLATZI.

Sergio Fernandez

student•

No le veo la necesidad al not found, con un then catch se me hace más que suficiente

Patrick Jhonatan Hernandez Blanco

student•

También creo que es excesivo el código del profesor, comparto una modificación con un mensaje 404 personalizado (Yo realice el ejercicio con la API de Pokemon).

Diego Fernando Velesaca Orellana

student•

Por que el console.log(userSatate); se imprime dos veces cada vez que realiza una busqueda ? En la primera imprime los datos del 'octocat' y en la segunda imprime los datos de 'danielvaldivv'. Esta renderizando dos veces la página ?.

Daniel Rodrigo Valdivieso Merino

teacher•

Hola Diego, compartenos tu código y lo revisamos, asi podremos ver y entender lo que esta sucediendo.

Diego Fernando Velesaca Orellana

student•

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

const App = () => {
  const [inputUser, setinputUser] = useState("octocat");
  const [userData, setUserData] = useState({});

  const gettingUser = async (user) => {
    const userRes = await getGithubUser(user);

    if (inputUser === "octocat") {
      localStorage.setItem("octocat", JSON.stringify(userRes));
    }

    if (userRes.message === "Not Found") {
      const ocotocat = JSON.parse(localStorage.getItem("octocat"));
      setUserData({ ...ocotocat });
    } else {
      setUserData({ ...userRes });
    }
  };

  console.log(userData); //IMPRIME DOS VECES CUANDO SE REALIZA UNA BUSQUEDA

  useEffect(() => {
    gettingUser(inputUser);
  }, [inputUser]);

  return (
    <Container
      sx={{
        background: "whitesmoke",
        width: "80vw",
        height: "500px",
        borderRadius: "16px",
        marginTop: "50px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <div>Github User Searcher</div>
      <Searcher inputUser={inputUser} setinputUser={setinputUser}></Searcher>
      <UserCard userData={userData}></UserCard>
    </Container>
  );
};

export default App;

Owen Sanchez

student•

Tengo una duda. ¿Por que por cada letra agregada al textfield se ejecuta el app entero y hace que se me ejecute de nuevo useEffect, lo que hace mas peticiones de las necesarias?

Owen Sanchez

student•

https://github.com/OwenSr0/Repo/tree/main/learning/React

Raul Correa Reyes

student•

Hola Owen, ¿Como validas que se renderiza todo el app?Entendería que solo debiera renderizarse el campo search

Franco Cabrera

student•

hasta aca bastante flojo el profesor, grita mas de lo que explica totalmente incensario ,

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)
        }

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

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;

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

const App = () => {
  const [inputUser, setinputUser] = useState("octocat");
  const [userData, setUserData] = useState({});

  const gettingUser = async (user) => {
    const userRes = await getGithubUser(user);

    if (inputUser === "octocat") {
      localStorage.setItem("octocat", JSON.stringify(userRes));
    }

    if (userRes.message === "Not Found") {
      const ocotocat = JSON.parse(localStorage.getItem("octocat"));
      setUserData({ ...ocotocat });
    } else {
      setUserData({ ...userRes });
    }
  };

  console.log(userData); //IMPRIME DOS VECES CUANDO SE REALIZA UNA BUSQUEDA

  useEffect(() => {
    gettingUser(inputUser);
  }, [inputUser]);

  return (
    <Container
      sx={{
        background: "whitesmoke",
        width: "80vw",
        height: "500px",
        borderRadius: "16px",
        marginTop: "50px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <div>Github User Searcher</div>
      <Searcher inputUser={inputUser} setinputUser={setinputUser}></Searcher>
      <UserCard userData={userData}></UserCard>
    </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