Enviando datos (POST)

Clase 27 de 37 • Curso de React.js 2019

Clase anteriorSiguiente clase

Resumen

MD5 es una pequeña librería a la cual se le da un texto y ella regresa un hash.

Podremos hacer pruebas para cifrar nuestros textos a md5 en el siguiente sitio MD5 Online

Hola Platzi = d3bfb9302fb1007c0f996b41cba2818c

Nildiert Jimenez

student•

Para solucionar el problema del reto final simplemente importamos el componente Gravatar en BadgesList.js

import Gravatar from './Gravatar'

Y cambiamos la etiqueta img por el componente Gravatar

class BadgesListItem extends React.Component {
  render() {
    return (
      &lt;div className=&quot;BadgesListItem&quot;&gt;
        &lt;Gravatar
          className=&quot;BadgesListItem__avatar&quot;
          email={this.props.badge.email}
          alt={`${this.props.badge.firstName} ${this.props.badge.lastName}`}
        /&gt;
...
export default BadgesList;

Rafael Soriano Ramírez

student•

Excelente aporte

Andrés Felipe García Rendón

student•

Muchas gracias crack!

José Daniel Navarrete Díaz

student•

Yulieth Lubo

student•

¡Listo el reto! Lo que hice fue importar la Función Gravatar en BadgesList.js y pasarle los parámetros para que devolviera el Avatar.

import Gravatar from "../components/Gravatar";

<Gravatar
           className="Badge__avatar-list"
           email={badge.email}
            alt="Avatar"
/>

Bernardo Aguayo Ortega

student•

muy bueno!

Jose Morales Varon

student•

Me funcionó, muy bueno!

Juan Carlos Valencia López

student•

Mi solucion

Jorginho Jesus Ravello Rios

student•

Muchas gracias por tu aporte men buena solución. Con poco linea de codigo ^^!.

Arturo Mauricio Terceros Beltrán

student•

Vi muchas soluciones al reto, pero esta es la mas correcta. De esta manera se agrega la url a la base de datos.

Carlos Andres Castañeda Osorio

student•

Aunque el uso de la API del profesor es un llamado a un método, me gustaría aclarar que para usar una verdadera petición POST con FETCH se deben enviar algunos parámetros adicionales al objeto, en este post pueden encontrar más información. Ejemplo:

fetch('../post.php', {
   method: 'POST',
   body: this.state.form
})

Juan Arturo Gutiérrez

student•

Creo que este enlace puede ser útil también:

promise_post = async () =&gt; {
        const settings = {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        }
    };
    try {
        const fetchResponse = await fetch(`url_api`, settings);
        const data = await fetchResponse.json();
        return data;
    } catch (error) {
        return error;
    }    

}```

Bernardo Aguayo Ortega

student•

Gracias!

David Jesus Palma Lugo

student•

Aquí mi solución en badgesList

import React from 'react'
import {Link} from 'react-router-dom'
import Gravatar from './Gravatar'
//import './styles/Badges.css'
//import FontAwesome from 'react-fontawesome';
import "./styles/Badge.css"
import './styles/BadgesList.css'

class BadgesList extends React.Component {
    render() {
        if (this.props.badges.lenght === 0) {
            return (
                <div>
                    <h3>No encontramos ningun badge</h3>
                    <Link className="btn btn-primary" to="/badges/new">
                        Create new badge
                    </Link>
                </div>
            )
        }
        return (
            <ul className="list-unstyled">
                {this.props.badges.map((badge)=>{
                    return (
                        <li key={badge.id}>                       
                            <div className="container">
                                <div className="row">
                                    <div className="col-3 badge-container-avatar">
                                        <Gravatar className="BadgesListItem__avatar" email={badge.email} alt="Avatar"/>
                                    </div>
                                    <div className="col-9 badge-container-info">
                                        <h4 className="BadgeList-name">{badge.firstName}{badge.lastName}</h4>
                                        <span className="BadgeList-twitter">{badge.twitter}</span><br/>
                                        <span className="jobTitle">{badge.jobTitle}</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    )
                })}
            </ul>
        )
    }
}

export default BadgesList

Cristobal Andres Diaz Gomez

student•

Buena solución. la implemente y funciono bien. adicionalmente incorpore un redireccionamiento para que al guardar te llevara a los badges. esto lo hice en la page BadgeNew, en handleSubmit en el try incorporando la siguiente linea this.props.history.push('/Badges')

slds

Willy David Da Conceicao Lozada

student•

QUE BUENA CLASE AQUÍ MIS APUNTES SE PUEDEN COPIAR xD! ![](

Gaston Morales

student•

En el navegador me da el error: Error: Illegal argument undefined

Como puedo solucionarlo ?

Fernanda Aragon

student•

Hola, puedes tomar pantallazo del error y compartirlo y también compartir el código para poder ayudarte mejor, gracias!

Gaston Morales

student•

import React from 'react';
import md5 from 'md5';


function Gravatar(props) {
  const email = props.email;
  const hash = md5(email);

  return (
    <img
      className={props.className}
      src={`https://www.gravatar.com/avatar/${hash}?d=identicon`}
      alt="Avatar"
    />
  );

}

export default Gravatar;

Edward Alvaro Nuñez García

student•

Reto cumplido! -Importar el componente Gravatar en BadgesList. -Remplazar la etiqueta img por el componente avatar y pasar el email por props.

import React from "react";

import "./styles/BadgesList.css";
import { Link } from "react-router-dom";
import Gravatar from './Gravatar';

class BadgesListItem extends React.Component {
  
  render() {
    console.log(this.props.badge.avatarUrl);
    return (
      <div className="BadgesListItem">
       <Gravatar className="BadgesListItem__avatar" email={this.props.badge.email} />
        <div>
          <strong>
            {this.props.badge.firstName} {this.props.badge.lastName}
          </strong>
          <br />@{this.props.badge.twitter}
          <br />
          {this.props.badge.jobTitle}
        </div>
      </div>
    );
  }
}```

Wilson Delgado

student•

gracias!

Nicolas Villabona

student•

Cuando doy click en save no occurre nada , este es mi codigo

gracias 🤗

Nicolas Villabona

student•

El error era que mi button en BadgeForm era type="button" por ende no hacía submit el form.

Alex John Chamba Macas

student•

Mi solución al reto:

import React from "react";
import { Link } from "react-router-dom";
import "./styles/BadgesList.css";
import Gravatar from "./Gravatar";

class BadgesList extends React.Component {
  render() {
    if (this.props.badges.length === 0) {     
      return (
        <div>
          <h3>No badges were found</h3>
          <Link className="btn btn-primary" to="/badges/new">
            Create new badge
          </Link>
        </div>
      );
    }
    return (
      <div className="BadgesList">
        <ul className="list-unstyled">
          {this.props.badges.map(badge => {
            return (
              <li key={badge.id}>               
                <div className="BadgesListItem">                 
                  <Gravatar
                    className="Badge__avatar"
                    email={badge.email}
                    alt="Avatar"
                  />
                  <div>
                    <strong>
                      {badge.firstName} {badge.lastName}
                    </strong>
                    <br />
                    {badge.twitter}
                    <br />
                    {badge.jobTitle}
                  </div>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}
export default BadgesList;

Carlos Hernandez

student•

Te complicaste menos que yo😂

ANGEL DAVID SULBARAN CALDERON

student•

Enviando datos (POST)

Ahora que sabemos hacer peticiones a un API, ahora queremos enviar Datos, por lo que vamos a crear un nuevo recurso, es decir un nuevo badge, el formulario ya lo tenemos pero el submit es lo que aun nos falta trabajar, asi que arreglemos eso, si vamos al código, en badgenew, hay cosas que podemos mejorar, hay varias cosas que vamos a mejorar por lo menos el hero lo centaremos por ejemplo pero ya eso deberías saner hacerlo, Lo que haremos también sera reemplazar la imagen que tenemos de PlatziConf porque tenmos una nueva imagen querepresenta el logo de la conferencia por lo que vamos a editar el import.

El otro detalle es que en el formulario no tenemos la información de un badge por lo que esta vacio, no se ve bien, por lo que arreglaremos eso y le colocaremos información para que se rellene desde antes, algo asi como para tener un preview pare ello vamos al código en badgenew y vamos a nuestro badge, en cada línea vamos a darle un valor promisión, para ello podemos darle un condicional de “OR” ósea “||” que sirve para darle un valor que sera colocado en caso de ser nulo el valor inicial.

De manera que nuetro código quedara como algo asi;

 &lt;div className=&quot;BadgeNew__hero&quot;&gt;
                    &lt;img className=&quot;BadgeNew__hero-image img-fluid&quot; src={header}
                    alt=&quot;logo&quot;  /&gt;
                &lt;/div&gt;

                &lt;div className=&quot;container&quot;&gt;
                    &lt;div className=&quot;row&quot;&gt;
                        &lt;div className=&quot;col-6&quot;&gt;
                            &lt;Badge 
                            firstName={this.state.form.firstName || 'FIRST_NAME'}
                            lastName={this.state.form.lastName || 'LAST_NAME'}
                            twitter={this.state.form.twitter || 'twitter'}
                            jobTitle={this.state.form.jobTitle ||'JOB_TITLE'}
                            email = {this.state.form.email || 'EMAIL'}
                            avatarUrl=&quot;https://es.gravatar.com/userimage/153903818/cb14649c4719d457e5e6d57b7e4ef3cc.jpg&quot;  /&gt;
                        &lt;/div&gt;

                        &lt;div className=&quot;col-6&quot;&gt;
                            &lt;BadgeForm  onChange={this.handleChange} formValues={this.state.form}/&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    
                &lt;/div&gt;

Ahora, nuestra imagen no siempre va a estar allí por lo que vamos a m modificar esa parte para cambiar esa parte por lo que vamos al componente del badge a cambiarlo, por lo que nos vamos a esa línea donde eso se presenta y vamos a ver que siempre presenta el mismo valor en AvatarUrl que es donde lo tenemos, resukta que gravatar tiene un istema que sirve perfectamente para hacer esto con el md5 del email, con un generador de md5 por lo que si vamos a https://www.miraclesalad.com/webtools/md5.php Y escribimos nuestro correo, el código que obtendremos en la pagia seria u código numerico que insertaremos en el link de nuestro avatar que nos proporciona gravatar, asi que el paso siguiente seria automatizar esto de manera que cuando colocas el email, la webApp colocara tu imagen de inmediato.

Para ello vamos primero a nuestra terminal e instalamod el md5 en nuestro proyecto, es una pequeña librería que nos va a tomar nuestro texto y nos va a a tomar el md5, básicamente lo que haremos sera reemplazar el código de el avatar de gravatar para que cuendo insertes tu correo, este reemplazara el código de el avatar por el código generado por el md5, tomando asi la imagen correspondiente a la que tienes en gravatar.

En o que se instala, pasaremos a crear el componente de gravatar y lo primero que haremos quedara asi;

import React from 'react';
import md5 from 'md5'

function Gravatar (props){
    const email = props.email;
    const hash = md5(email);

    return(
        
    )

}

Importamos react como siempre y tambien el md5 crearemos una función porque haremos algo funcional, lo que queremos hacer realmente es leer el email de los props por lo que crearemos la constante para asi recibir los emails y le decimos que el hash va aser el md5 del email que recibiremos.

Ahora nos falta retornar una elemento por lo que vamos a toma el código de la imagen que tenemos en badge y la lógica de tomar el md5 y pasarlo a imagen la vamos a encapsular Quedando este asi:

import React from 'react';
import md5 from 'md5'

function Gravatar (props){
    const email = props.email;
    const hash = md5(email);

    return(
        &lt;img className={props.className} src={`https://es.gravatar.com/avatar/${hash}?d=identicon`} alt=&quot;avatar&quot;/&gt;
    )

};

export default Gravatar;

Lo que estamos haciendo es darle el link de gravatar para que nos retorne la imagen, esta misma sera la que poseamos en la pagina a partir de nuestro correo, que usandi el md5 este tomara el código md5 de que nuestro correo proporciona para asi colocar el hash en el sitio correspondiente, retornando asi nuestro avatar deseado. Nuestro siguiente paso sera cambiar el el atributo “img” en badge e importar el componente “Gravatar” antes de eso obviamente, por lo que pasado a lo dicho primero, vamos a ver como debería quedar el código.

 &lt;Gravatar 
                className=&quot;Badge__avatar&quot; 
                email={this.props.email} 
                alt=&quot;avatar&quot;
                /&gt;

¿Porque email? Esto es debido a que nuestro source sera como tal ya el url que proporcionamos en nuestro componente gravatar y lo que hará sera tomar el email que proporcionamos y transformarlo al código md5, tomar el hash y colocarlo en la parte correspondiente de nuestro link puesto en el componente, por lo que recibiremos la imagen de asociada a nuestro correo.

Ahora pasaremos a nuestra tarea de esta clase que es enviar los datos que ya tenemos En badgeNew agregaremos el onSubmit;

 &lt;div className=&quot;col-6&quot;&gt;
                            &lt;BadgeForm  onChange={this.handleChange} 
                            onSubmit={this.hadleSubmit}
                            formValues={this.state.form}/&gt;
                        &lt;/div&gt;

Luego nos vamos a badgeform para asegurarnos que cuando el form se envie, llamemos a este prop para elo nos vamos a badgeform y vamos a comentar la función que habiasmos preparado para ello, el HandleSubmit ya no usaremos mas por lo que declararemos un nuevo método que va a manejar el cambio, para ello vamos mas abajo y cambimos el this.hadle submit por ;

 return(
            &lt;div&gt;
                &lt;h1&gt;New Attendant&lt;/h1&gt;

                &lt;form onSubmit={this.props.onSubmit}&gt;
                    &lt;div className=&quot;form-group&quot;&gt;
                        &lt;label&gt;First Name&lt;/label&gt;
                        &lt;input onChange=

This.props.onSubmit, ahora nos vamos nuevamente a BadgeNew para crear esta nueva funcion

    handleSubmit = e =&gt;{
        e.preventSubmit()

        
    };

La creamos y la detenemos porque sino va a enviar nuestros datos a una pagina, luego vamos a importar nuestra API porque vamos a hacer una llamada Y luego pasamos a agregar lo faltante a nuestra función;

handleSubmit = e =&gt;{
        e.preventSubmit()
        this.setState({loading: true, error: null})

        try{
            await api.badges.create(this.state.form)
            this.setState({loading: false})

        } catch(error){
            this.setState({loading: false, error: error})
        }
    };

Como realizaremos un envio de datos, en state vamos a enviar los datos por lo que el error sera nulo, en try detenemos el loading y los datos no los vamos a usar por lo que no colocamos el error y por ultimo, en el catch el loading seguirá detenido pero guardaremos los datos de error en “error”. Ahora veamos si funciona,. Como podemos ver, la información se nos va, pero eso es porque tenemos el preventSubmit para prevenir el envio de información por lo que debemos cambiarlo a preventDefault de manera que;


    handleSubmit = async e =&gt;{
        e.preventDefault()
        this.setState({loading: true, error: null})

        try{
            await api.badges.create(this.state.form)
            this.setState({loading: false})

        } catch(error){
            this.setState({loading: false, error: error})
        }
    };

Y por ultimo verificamos en nuestra pagina BadgesList que tenemos el nuevo badge creado, pero un detalle que tiene es que no podemos apreciar la imagen del avatar por lo que esto es un bug que debemos reparar como reto,

Para ello es simple, como ya tenemos el método Gravatar lo que debemos hacer es que la imagen que tenemos en badgesList decifre el link de gravatar y le codifique nuestro correo como un código md5, ta y como lo hicimos con nuestro badgeNew, básicamente solo recibiremos los values y estos se decifraran de la misma manera, usar los datos proporcionados en values y displayarlos en nuestra lista con los badges creados.

class BadgesListItem extends React.Component {
  render() {
    return (
      &lt;div className=&quot;BadgesListItem&quot;&gt;
        &lt;Gravatar
          className=&quot;BadgesListItem__avatar&quot;
          email={this.props.badge.email}
          alt={`${this.props.badge.firstName} ${this.props.badge.lastName}`}
        /&gt;

Asi de simple es la solución.

Jesus Daniel Mendoza Sanchez

student•

Reto

handleSubmit = async e =>{
    e.preventDefault();
    
    this.setState({loading:true});

    try{
      this.state.form.avatarUrl=`https://gravatar.com/avatar/${md5(this.state.form.email)}?d=identicon`;
      await api.badges.create(this.state.form);
      this.setState({loading:false});
    }catch(error){
      this.setState({loading:false, error:error});
    }
  }```

Antonio Mendiola Farías

student•

Mi solución al reto fue la siguiente:

Modificando el componente BadgeList. Primero se importa el componente Gravatar que creamos.

import Gravatar from "./Gravatar";

Después sustituimos el elemento <img> que teníamos para mostrar los avatares, con la llamada al componente Gravatar:

<Gravatar
                className="Badge__avatar"
                email={badges.email}
                alt="Avatar"
              />

Listo!

Jesus Adrian Berrio Valdes

student•

Al usar en badge nuewgravartar me da error y me dice illegal argument pero lo uso en badge list y me funciona normal

Jose Daniel Huerta Vazquez

student•

Me sucede lo mismo, pudiste resolverlo?

Cynthia .

student•

Me ha pasado lo mismo, viene de la ultima version de md5. Hay que borrar la linea md5 en tu fichero package.json y en el terminal : npm i md5@2.0.0

Johnnie Lopez

student•

Mi solución para el reto:

Martin Brisset

student•

Se complico un partido facil

André Cruz

student•

Solución al reto:

import React from "react";

import "./styles/BadgeNew.css";
import header from "../images/platziconf-logo.svg";
import Badge from "../components/Badge";
import BadgeForm from "../components/BadgeForm";
import api from "../api";
import md5 from "md5";

class BadgeNew extends React.Component {
  state = {
    form: {
      firstName: "",
      lastName: "",
      email: "",
      avatarUrl: "",
      jobTitle: "",
      twitter: ""
    }
  };

  handleChange = e => {
    // const nextForm = this.state.form;
    // nextForm[e.target.name] = e.target.value;

    this.setState({
      form: {
        ...this.state.form,
        [e.target.name]: e.target.value
      }
    });
  };

  handleSubmit = async e => {
    e.preventDefault();
    this.setState({ loading: true, error: null });
    let email = this.state.form.email;
    let hash = md5(email);

    try {
      this.state.form.avatarUrl = `https://s.gravatar.com/avatar/${hash}?d=identicon`;

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

  render() {
    return (
      <React.Fragment>
        <div className="BadgeNew__hero">
          <img
            className="BadgeNew__hero-image img-fluid"
            src={header}
            alt="logo"
          />
        </div>

        <div className="container">
          <div className="row">
            <div className="col-6">
              <Badge
                firstName={this.state.form.firstName || "FIRST_NAME"}
                lastName={this.state.form.lastName || "LAST_NAME"}
                twitter={this.state.form.twitter || "twitter"}
                jobTitle={this.state.form.jobTitle || "JOB_TITLE"}
                email={this.state.form.email || "EMAIL"}
                avatarUrl="https://s.gravatar.com/avatar/c05d67a280e55257eb344be1cc2d7287?s=80"
              />
            </div>

            <div className="col-6">
              <BadgeForm
                onChange={this.handleChange}
                onSubmit={this.handleSubmit}
                formValues={this.state.form}
              />
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default BadgeNew;

Jansen Peña

student•

Muy bien!!!! 👏

Carlos Hernandez

student•

Yo hice lo mismo😁

Isaias Chávez

student•

Mi solución al reto. Fuí al archivo BadgesList donde se supone se lee la lista de todos los badges existentes. Cada uno se lee individualmente y se despliega un bloque para cada uno asi que modifiqué la imagen que se despliega por un gravatar y solo le pasé la misma información como props.

{this.props.badges.map(badge => {
          return (
            <li key={badge.id} className="container-fluid">
              <div className="row">
                <div className="col-3 d-flex align-items-center">
                  <Gravatar
                    email={badge.email}
                    alt="Avatar"
                    className= {`img-fluid rounded-circle ${badge.className}`}
                  />
	//More code...

Jehaann Manzanares

student•

Muy bien echo !

Rafael Villarreal

student•

Resuelto.

handleSubmit = async e => {
    e.preventDefault();
    this.setState({ loading: true, error: null });

    try {
      const hash = md5(this.state.form.email);
      const hashedGravatar = `https://www.gravatar.com/avatar/${hash}?d=identicon`;
      this.state.form = {
        ...this.state.form,
        avatarUrl: hashedGravatar
      }
      this.setState({ loading: false });
      await api.badges.create(this.state.form);
    } catch (error) {
      this.setState({ loading: false, error: error });
    }
  };```

Jonathan Gonzalez Botero

student•

Gracias amigo por compartir, la verdad que perdi mucho tiempo intentando hacerlo con this.setState() y nunca funcionó, una vez que lo implementé con this.state.form = () guardo la url sin problema...

Enviando datos (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