Manejando los estados de la petición durante el POST

Clase 28 de 37 • Curso de React.js 2019

Resumen

De la misma manera en la que se manejan los estados cuando se solicitan datos, deben ser manejados cuando los datos son enviados.

Existe un tiempo entre que se da clic y los datos son enviados. Ese tiempo de espera es necesario visualizarlo. Igual hay que mostrar mensajes de error cuando no funcionan las cosas.

Ivan Santiago

student•

Para mejor la experiencia del usuario pienso que sería mucho mejor que los badges más recientes aparezcan primero.

Inicio de BadgesList.js

Con ésto se crea una copia de this.props.badges (para no afectar directamente a los props) y esta copia es la que se voltea para después pasar a map() y que al mostrarse la lista de badges aparezcan los más recientes primero. :)

René Sanchez

student•

Muy buen aporte 💚.

Cristhian Franco

student•

Muy buena sugerencia, yo lo hice de la siguiente forma:

 const badgesList =  [...this.props.badges].reverse();

return (
      <ul className="Badges-list">
        {badgesList.map((badge) => {
          return (...

René Sanchez

student•

No me gusto como se mostraba el error no es muy amigable asi que lo manipule con sweetalert quedando de esta manera 💚.

Este fue lo que utilice:

alertaFaltanDatos(faltantes) {
        Swal.fire({
            title: 'Alto ahi!',
            text: `Te faltan campos por rellenar 🧐\n ${faltantes}`,
            icon: 'error'
        });
    }

    alertaError(){
        Swal.fire({
            title: 'Opps!',
            text: `Ha ocurrido algo inesperado 😅, vuelve a intentarlo nuevamente`,
            icon: 'error'
        });

        // Controlar cuando sea un error 500 para que mande un mensaje que los server estan caidos o algo
    }

    alertaExitosa() {
        Swal.fire({
            title: 'Creacion Exitosa!',
            text: 'Muchas gracias por inscribirte en la conferencia 😊',
            icon: 'success'
        }).then((result) =&gt; {
            if (result.value || !result.value) {
                this.props.history.push('/badges');
            }
        });
    }

    // Capturar el evento del envio de datos
    handleSubmit = async e =&gt; {
        e.preventDefault();
        let datosFaltantes = [];

        for (const propiedad in this.state.form) {
            if (this.state.form.hasOwnProperty(propiedad)) {
                const valor = this.state.form[propiedad];
                if (valor === '') {
                    datosFaltantes.push(propiedad);
                }
            }
        }

        if (this.state.form.firstName === '' || this.state.form.lastName === '' || this.state.form.email === '' || this.state.form.jobTitle === '' || this.state.form.twitter === '') {
            let camposFaltantes = datosFaltantes.join(',');
            this.alertaFaltanDatos(camposFaltantes)
        } else {
            this.setState({
                loading: true,
                error: null
            });

            try {
                await api.badges.create(this.state.form);
                this.setState({ loading: false });
                this.alertaExitosa();
            } catch (error) {
                this.setState({
                    error: error,
                    loading: false
                });

                this.alertaError();
            }
        }
    };

Nicolas David Pastran Zamora

student•

Esta bastante cool tu código, aunque el for para sacar los datos vacíos me confundió un poco así que hice mi propia versión. Esta un poco mas corto

handleSubmit = async e =&gt; {
    e.preventDefault();
    const valuesFilter=Object.keys(this.state.form).filter((value)=&gt;{
        return (this.state.form[value]===&quot;&quot;)
    })
    if(valuesFilter.length!==0){
        this.alertData(valuesFilter)
    }else{
        this.setState({ loading: true, error: null });

        try {
          await api.badges.create(this.state.form);
          this.setState({ loading: false });
          this.alertSuccess()
        } catch (error) {
          this.setState({ loading: false, error: error });
          this.alertError()
        }
    }
};

René Sanchez

student•

Esta buenisimo crack! 💚

ALONSO HERNANDO MUJICA TRONCOSO

student•

En cuestion de UX es recomendable utilizar ProgressBar para indicarle al usuario el estado del proceso de su petición, asi como también la opción ir al listado o quedarse para crear un nuevo registro. En el caso de un error el usuario debe de tener la opcion de reportarlo.

Referencia : ProgressBar for react

Marcelo Benitez

student•

El problema con esto es que no puedes saber realmente el porcentaje actual de la petición, el proceso, simplemente le muestras un loader de 100%, de todos modos queda bien.

Daniel Hurtado

student•

Al fin aprendí como hacer un if dentro de un {} en JSX!

David Zabaleta Franco

student•

También se puede usar el operador ternario dentro del return del render, por si alguna vez lo necesitan. ⠀

⠀ Fuente

Jimmy Buriticá Londoño

student•

Super

Ariel Jacob

student•

Está muy bueno todo esto, pero qué complejo para quienes venimos de principiantes!

jean pierre gabriel nieto acosta

student•

Lo que pasa es que hay una ruta para aprender un lenguaje o un framework, y es que si no tienes un buen dominio del lenguaje y sus cracterísticas se te hará mucho más dificil para aprender el lenguaje.

Jairo Niño

student•

A nivel de buenas practicas, que es mejor para redirigir, esa la técnica que uso el profesor o utilizar Redirect (componente de react-router-dom).

<Redirect to="/someUrl" />

Gracias de antemano a todos los que respondan, saludos.

Marc Sánchez Díaz

student•

Yo prefiero Redirect, en este comentario explico como lo hice yo. Saludos.

Wilson Delgado

student•

Documentacion del condicional usado en el minuto 4:10 https://es.reactjs.org/docs/conditional-rendering.html

Emanuel Alejandro Mamani

student•

aqui les dejo mi codigo de alerta de error echo con bootstrap

{this.props.error && 
                       <div className="alert alert-danger mb-3" role="alert">
                           {this.props.error.message}
                       </div> 
                    }

Jesús Cervantes

student•

Hecho*

Carlos Alberto García Rosales

student•

Les recomiendo usar Event en lugar de e si están trabajando con desarrolladores muy nuevos ya que es más descriptivo hagamos código para todos .

Daniel Hurtado

student•

Yo considero que independientemente si trabajamos con nuevos o no, usar variables descriptivas es la mejor opción, solo unas semanas de descanso pueden hacer que olvidemos el funcionamiento de nuestro código, en donde una "e" podría significar todo si no detallamos. Escribir unas letras más nunca afectará el rendimiento ni peso de nuestra aplicación puesto que siempre lo estaremos traspilando y comprimiendo con babel.

Janice Prendas

student•

Concuerdo totalmente!

David Antonio Garcia Saaib

student•

Creo que no puse suficiente atención porque apareció un componente BadgesListItem ahi, igual ya lo cree como function component

Cristian Caballero

student•

También me pasó y no supe cuando @_@

Aaron Felipe Isaacs

student•

Creo que yo puse menos atención; apenas me di cuenta que existe BadgeListItem por este comentario! 😣😣

Jose Daniel Molina

student•

La condicion con && funciona porque en JavaScript, true && expresión siempre evalúa a expresión, y false && expresión siempre evalúa a false.

Por eso, si la condición es true, el elemento justo después de && aparecerá en el resultado. Si es false, React lo ignorará.

Recordemos que si el valor de retorno dentro de las { } es false, react no mostrará lo que hay ahí dentro

Johan Baracaldo Sanchez

student•

Otra forma de hacerlo es: this.props.badges.reverse().map((badge)=>{

Saludos.

Sebastián Buitrago

student•

Esta manera funciona mejor que usar data.reverse()

Jesús Vicuña

student•

Hola team react, pregunta ... Dondé se esta guardando la data una vez que listamos los badges? Alguien me puede recordar? Supuse que vivian en memoria pero no es así, ya que apago el servidor y cuando lo vuelvo a levantar veo el historico.

Jean Carlos Hernandez Carrasquel

student•

Hola, se guarda en server/db.json del mismo platzi-badges. esa ruta es la que se encuentra corriendo en el puerto 3001. Puedes hacerle el seguimiento en api.js, la ruta se encuentra declarada en la constante BASE_URL al comienzo del archivo, también ojea el otro archivo que está en /server

Jesús Vicuña

student•

Muchas gracias jean!

Bruno Cal

student•

Leí un comentario de un usuario que decía que por UX podríamos usar ProgressBar, me gustó mucho la idea y lo implementé en la app, aquí les dejo un gif, y fotos del código lo mejor comentado que pude.

BadgeForm

BadgeNew

Api

Javier Fuentes Mora

teacher•

Esta es otra forma de hacerlo con hooks

import React, { useState } from "react";
import header from "../images/badge-header.svg";
import "./styles/BadgeNew.css";
import Badge from "../components/Badge";
import BadgeForm from "../components/BadgeForm";
import api from "../api";
import PageLoading from "./PageLoading";

const BadgeNew = () => {
  const [form, setValues] = useState({
    firstName: "",
    lastName: "",
    email: "",
    jobTitle: "",
    twitter: "",
    gravatar: "http://1.gravatar.com/avatar/6735114339474bf800a704cbc73355a4",
    loading: false,
    error: null
  });

  const handleInput = event => {
    setValues({
      ...form,
      [event.target.name]: event.target.value
    });
  };
  const handleSubmit = async event => {
    event.preventDefault();
    setValues({ loading: true, error: null });

    try {
      await api.badges.create(form);
      setValues({ loading: false });
    } catch (error) {
      setValues({ loading: false, error: error });
    }
  };
  return (
    <>
      {form.error ? (
        <>Hay un error {form.error.message}</>
      ) : (
        <>
          {form.loading ? (
            <PageLoading />
          ) : (
            <>
              <div>
                <div className="BadgeNew__hero">
                  <img src={header} className="img-fluid" alt="logo" />
                </div>
              </div>
              <div className="container">
                <div className="row">
                  <div className="col">
                    <Badge
                      firstName={form.firstName || "Primer nombre"}
                      lastName={form.lastName || "Apellido"}
                      twitter={form.twitter || "Twitter"}
                      jobTitle={form.jobTitle || "Trabajo"}
                      gravatar={form.gravatar || "Avatar"}
                    />
                  </div>
                  <div className="col">
                    <BadgeForm
                      handleSubmit={handleSubmit}
                      handleInput={handleInput}
                      form={form}
                    />
                  </div>
                </div>
              </div>
            </>
          )}
        </>
      )}
    </>
  );
};

export default BadgeNew;

Gabriel De Andrade

student•

Que genial! De todas maneras recuerda que en clases siguientes vemos como usar los hooks, y en el Curso Avanzado de React usamos sólo componentes funcionales :D

Javier Fuentes Mora

teacher•

Hola si , solo que como ya sabia react solo estoy tomando el curso apra repasar conceptos y decidi hacerlo todo con hooks

Pedro Manuel Verde

student•

this.props.error.message (por que message? de donde viene??)

Diego Forero

Team Platzi•

message viene por defecto en la respuesta del servidor cuando lanza un error.

Marcelo Choque Pacheco

student•

error es un objeto, algo así. error { message: "aqui el mensaje del error", status: "aqui el numero del estado", etc,etc, etc } entonces nosotros queremos llamar a error y luego a message.. asi no mas es, ojala lo hayas entendido... aunq tarde esta respuesta jeje

Alejandro Robleto

student•

tengo una pregunta..... como hariamos para que el error se mantenga latente y funcione, ya que al desactivaro si enviamos el form vacio lo envia y me gustaria arreglar eso y entender como funciona... ( un if talves?)

Matías Gabriel Navarro

student•

Es que ahi ya tendrias que hacer validacion de formulario, por lo menos indicar un required a cada campo en el tag

Bastian Besoain

student•

Buenas. Tengo una consulta.

¿Como puedo evaluar en el form si se ha ingresado algún dato? Me gustaría ingresar un mensaje que diga "Debe ingresar el dato x" bajo cada campo y que, al escribir algun dato, desaparezca. El código sería algo así:

Francisco Ponce

student•

Hola Bastian,

Podrías crear un estado que setees a verdadero o falso una vez que que escribas en el evento onChange.

Ese estado se lo pasas a un texto que este debajo de cada input preguntando por ese estado activo. Si es verdadero renderiza el siguiente texto.

Luis Lira

student•

En el onChange puedes crear un condicional y con eso tener una parte del estado que indique si el mensaje se mostrará o no. También puedes usar la etiqueta de "required" dentro del elemento HTML y eso mostrará un mensaje que traen de forma nativa cada navegador en caso de que el campo esté vacío.

jorge llanque

student•

Cambia el push() por el unshift() para ver los nuevos badges al principio de la llista y no al final

César Palma

student•

esto cambia el orden de la data, lo que se quiere es preservar el orden y solo alterar el orden de la presentacipon de los datos

Manejando los estados de la petición durante el POST

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión