Actualizando datos (PUT)

Clase 29 de 37 • Curso de React.js 2019

Daniel Vaca

student•

Si te estas preguntando ¿Por qué en la página de Badge Edit no podemos sencillamente recibir los datos desde la lista, sino que tenemos que volverlos a pedir al servidor?, lo cual en la práctica es ineficiente. Existen muchas soluciones, alguna que pueden ser complicadas como pasar con propiedades y state de componentes de orden superior, u otras poco elegantes como pasar por query string en la dirección.

Para lo anterior les aconsejo revisar el curso de Redux que potencia un montón el desarrollo en React y permite manejar de manera centralizada el state de toda la app. Ej.: al dar clic en un elemento de la lista este manda a actualizar el state de la app y la página de edit automáticamente carga lo que se encuentre en el state evitando tener que llamar al servidor.

Daniel Vaca

student•

https://platzi.com/clases/redux/

Andres Gallardo

student•

Igualmente, eso depende mucho del caso.

Si tenemos una entidad gigante, con muchisimas propiedades, y en el listado solamente mostramos 3 propiedades en los resultados, ahi si se deberia hacer 2 gets, uno para traer el listado, y cuando queremos ir a visualizar mayor informacion, hacer un get a la entidad en cuestion.

Ivan Santiago

student•

Ahora ya no es necesario escribir...

this.setState({
	error: error
})

Si las variables tienen el mismo nombre basta con escribir lo siguiente :)

this.setState({
	error
)}

Adolfo M.Valdivieso

student•

Mi parte favorita: "... Voy a hacer esto para no confundir al próximo desarollador que quizas no sea yo..."

Jimmy Buriticá Londoño

student•

Tienes razón, es una gran aporte. Incluso uno mismo se puede confundir en el futuro.

William Schnaider Torres Bermon

student•

Les comparto mi versión del BadgeList: !BadgeList Para los iconos usé Fontawesome y para las imagenes (avatars) ui-avatars (juega con las iniciales de los nombres).

Alberto Luebbert M.

student•

¿cómo integraste dichas librerías dentro del proyecto? ¡Quedo excelente!

William Schnaider Torres Bermon

student•

Gracias! Para incorpor fontawesome basicamente hice lo siguiente:

Instalación:

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome

Importación:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser } from "@fortawesome/free-solid-svg-icons";

Implementación:

<FontAwesomeIcon icon={faUser} />

Podrá encontrar más información en la documentación que proporcioné, espero que le haya servido :D

Bruno Cal

student•

Le he añadido SweetAlerts y una ProgressBar para mejorar el UX de la web, aquí tienen un gif del funcionamiento, y en mi Github-PlatziReact, en el Commit #11, el código de la versión del gif.

Guillermo Baldán López

student•

¡Qué bueno!

José Antonio Di Pietro Zambrano

student•

Te quedo brutal bro 👊

Wandy Rafael Santana Evangelista

student•

Maravillosa, pense que aprender React iba hacer sumamente dificil, pero realmente, despues de meses de preparacion, hizo que no fuese tan duro, ahora no me detengo en pensar en proyectos que pueden revolucionar en la industria. :) No se rindan muchachos, y sobre todo Nunca Paren de Aprender.

Jhon Carlos Colorado Angulo

student•

Igualmente se sucede a mí, ya empiezo a pensar en mejorar cosas.

Sergio Rubio

student•

Creo que este curso es lo mejor para el confinamiento que tenemos ahora mismo en España! Gracias Richard!

Sebastián Buitrago

student•

Que triste pensar que ya ha pasado un año desde que empezo esto y nada que acabamos

Alexander Ramirez

student•

this.props.match.params

Cada una de esas variables que insertamos en el path y que declaramos en las rutas los podemos acceder con el objeto params . . .

Carlos Castillo Sanchez

student•

En mi caso yo manejé el título del form mediante los props:

<BadgeForm 
                                formTitle="Edit Attendant" 
                                onChange={this.handleChange}
                                onSubmit={this.handleSubmit} 
                                formValues={this.state.form}
                                error={this.state.error}
                            />```

Y en el caso de un nuevo attendant en los props del form uso New Attendant

Seba Cardoso

student•

Que buena clase y me gusta como explica el profesor.

Eduardo Cruz

student•

Alguien entiende porque de un pronto a otro el profesor agrega dos clases como class BadgesListItem. y class BadgesList en el mismo lado . Que por cierto donde rayos el explica esto , me busque en todos los videos y parece q subieron esto y se saltaron la explicacion

import React from 'react';
import { Link } from 'react-router-dom';

import './styles/BadgesList.css';
import Gravatar from './Gravatar';

class BadgesListItem extends React.Component {
  render() {
    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>
    );
  }
}

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}>
                <Link
                  className="text-reset text-decoration-none"
                  to={`/badges/${badge.id}/edit`}
                >
                  <BadgesListItem badge={badge} />
                </Link>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default BadgesList;```

Ricardo Magaña

student•

Gracias por colocarlo

Fernando Pioli Martínez

student•

Estoy como en una fiesta que te presentan un montón de personas nuevas y no podes recordar todos los nombres. Qué cantidad de metodos, instancias y props! Pero buenísimo el resultado!

Platzi Team

student•

No se que me perdi jaja :( pero yo no ltenia el componente de BadgesListitem

Sergio Bernal

student•

Me pasó igual

Víctor Hugo Arango Madrid

student•

Buen día, ¡Que gran profesor es Richard!, explica con una gran pedagogía, Richard y Freddy Vega me han parecido dos grandes profesores. Muchisimas gracias a ellos.

ANGEL DAVID SULBARAN CALDERON

student•

Actualizando datos (PUT)

Nos queda un tipo de formulario por hacer que es el de editar los datos, este es muy parecido al de BadgeNew pero vamos a creare una nueva pagina que se va a llamar “badgeEdit”, si vamos a “App.js” podemos notar que no esta la rutra en nuestro BrowserRouter Para ello vamos a app.js y agregamos justo debajo de BadgeNew nuestro BadgeEdit

                    &lt;Route exact path=&quot;/badges/edit&quot; component={BadgeEdit}/&gt;

Pero hay un detalle en esto y es que debemos agregarle lo siguiente;

                    &lt;Route exact path=&quot;/badges/:badgeId/edit&quot; component={BadgeEdit}/&gt;

Para ello vamos a trabajar con badges en especifico por lo que dben tener un id y aca en esta línea estamos declarando “:badgeId” como una variable que nos definira el Id de un badge al momento de editarlo, va a ser un valor que si va a estar definido en la Url pero va a ser genérico, puede ser el 1 el 2 el 3, eso no importa mucho.

Cuando eso ocurra queremos presentar el componenete BadgeEdit. Procedemos a declarar el import y luego como el new y el edit se parecen, usaremos el new como pnto de partida para crear nuestro BadgeEdit, pero lo que haremos sera cambiar las referencias a BadgeNew por BadgeEdit por lo que lo haremos tanto en las clases para el constructor como en nuestras className para los estilos y por ultimo en el export y por ultimo en este paso, copiamos el archivo css de BadgeNew y le colocamos el nombre de BadgeEdit para trabajarlos de manera separada y obviamente reemplazamos los nombres de las clases en ccs para dejar nuestro punto de partida realizado.

Nuestro siguiente paso sera que en la lista de badges cada uno de los badges que allí aparecen nos lleven a esa pagina por lo que para ello vamos a badgesList y en badgeslist donde hacemos el map para renderizar la lista de componentes;

    return (
      &lt;div className=&quot;BadgesList&quot;&gt;
        &lt;ul className=&quot;list-unstyled&quot;&gt;
          {this.props.badges.map(badge =&gt; {
            return (
              &lt;li key={badge.id}&gt;
                &lt;Link to={`/badges/${badge.id/edit}`}&gt;
                &lt;BadgesListItem badge={badge} /&gt;
                &lt;/Link&gt;
              &lt;/li&gt;
            );
          })}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
}

Crearemos un Link en nuestro código de los badges en el cual vamos a colocar dentro los elementos del maping para que cuando les demos cick a cada uno de los badges estos pasen a la pagina BadgeEdit para hacer las modificaciones, pero luego de esto vamos a tener un pequeño problema y es que nuestros badges se verán color azul y serán un hypertexto, por lo que vamos a aplicar una clase de bootStrap para arreglar esto


   return (
     &lt;div className=&quot;BadgesList&quot;&gt;
       &lt;ul className=&quot;list-unstyled&quot;&gt;
         {this.props.badges.map(badge =&gt; {
           return (
             &lt;li key={badge.id}&gt;
               &lt;Link className=&quot;text-reset text-decoration-none&quot; to={`/badges/${badge.id}/edit`}&gt;
               &lt;BadgesListItem badge={badge} /&gt;
               &lt;/Link&gt;
             &lt;/li&gt;
           );
         })}
       &lt;/ul&gt;
     &lt;/div&gt;
   );

Listo con esto todo arreglado, ahora llegados a este punto, cuando lleguemos al edit, necesitamos pedir información de el badge que vamos a editar por lo que haremos una llamada de datos a datos que ya existen;

 state = {
    loading:true,
    error: null,

    form: {
        firstName: '',
        lastName: '',
        email: '',
        jobTitle: '',
        twitter: '',
    }};

Lo primero que vamos a hacer sera cargfar nuestro loading state a true porque necesitaremos cargar los datos existente y siguiente es crear el método componentDidMount que indicara que cuando este ocurra, comenzaremos a cargar los datos;


    componentDidMount(){
        this.fetchData()
    }

Y definiremos la función declarada dentro de el mismo;

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

        try{    
            const data = await api.badges.read()
        } catch(error){

        }
    }

Explicando por partes aca iniciaremos con nuestra función asíncrona como en otras ocasiones, nuestro setState inicial con nuestro loading verdadero y nuestro error nulo, para luego pasar a nuestro TryCatch, “try” con la constante de data que esperara la carga de datod de la api.badges y usaremos el método read que esto lo que hará sera tomar el ID del badge que nos interesa. Luego de eso usaremos uno de los props que ReactRouter le pasa a sus componentes que es this.props.match, cada una de esas variables que insertamos en el path que declaramos en la ruta lo podemos acceder dentro del objeto params y dijimos que se iba a llamar badgeId De manera que;

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

        try{    
            const data = await api.badges.read(
                this.props.match.params.badgeId
            )
        } 
    }

Luego de esto;

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

        try{    
            const data = await api.badges.read(
                this.props.match.params.badgeId
            )
            this.setState({ loading: false, form: data })
        } catch(error){
            this.setState({ loading:false, error: error })
        }
    }

Aca básicamente hacemos lo mismo de siempre que es en cxaso de que todo vaya bien, vamos a guardar la información en data porque es lo que buscamos a l hacer este edit por lo que el form se guardara en los datos como especificamos mas abajo y luego de esto vamos a crear nuestro Catch para que en caso de que haya un error este mismo quedara guardado en error, para asi tener nuestro errorState de esta función.

Que sigue? Probar que esto funciona y si efectivamente realiza el match y vemos nuestro código, luego editamos un poco la pagina porque nuestro titulo nos dice New attendant pero aca lo que haremos sera un edit por lo que debemos colocar el <h1> en el sitio correspondiente en cada uno de los lugares tabto en badgeNew como en badgeEdit por lo que eliminaremos el <h1> de nuestro badgeForm.

Ahora en badgeEdit nuestra api no creara sino que lo que hará sera editar la data que estaremos solicitando por lo que nos dirigiremos a nuestro código y editaremos la parte en la que esta nuestro hadleSubmiot y este ya no sera créate sino update.

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

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

            this.props.history.push('/badges')

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

Update recibe un badgeId y la información que queremos actualizar asi que el badge id aprendimos a obtenerlo de this.props.params asi que en update ese es el primer argumento y el segundo va a ser y como sacamos el id de this.props.params.badgeId este va a ser nuestro primer argumento en update por lo que quedaría asi;


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

        try{
            await api.badges.update( this.props.match.params.badgeId, this.state.form);
            this.setState({loading: false});

            this.props.history.push('/badges')

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

Luego de esto realizaremos el cambio y por el código ya escrito de nuestro método de history, cuando acabe volveremos a la lista de badges a ver si se actualizo la información. Nuestro put fue exitoso.

Andrés Felipe Eslava Zuluaga

student•

ME agrada MUCHÍSIMO que el profesor sea tan espontáneo y que se entienda todo tan excelente que lo hace ver fácil. ME gusta mucho éste curso

Fernando de Leon Gil

student•

Esta clase en particular me encanto, porque justo hoy me estaba matando la cabeza realizando un update parecido pero con los hooks la solución es más simple!!!

Gaspar Dolcemascolo

student•

Pero esto ms que nada depende del backend. No estoy muy enterado de que si siempre es asi como traes la data del backend. Algun backend que me de un poco de claridad

Héctor Eduardo López Carballo

student•

No sé de backend, pero me parece que el backend debe tener un método que le ayude al front a actualizar la información. En este caso, los del backend se van a encargar de toda la lógica que trabaje la base de datos, pero nosotros tenemos que mandarles esa información de alguna forma.

Saludos!

Andres Gallego

student•

El backend se encarga de crear la api y generar los métodos que crean, actualizan,etc. nosotros como frontend nos encargamos solamente de enviarle los datos, por ejemplo al final que solo tuvimos que enviar el id y los datos y ya el backend hizo el resto

Gaspar Dolcemascolo

student•

No me muestra la información en el badge. Alguien que me ayude BadgeList

import React from 'react'
import { Link } from 'react-router-dom'
import Gravatar from './Gravatar'

class BadgesList extends React.Component {
	render() {

		if(this.props.badges.length === 0) {
			return(
				<div>
					<h4>Badges were not found</h4>
					<Link to="/new" className="btn btn-primary">
						Create new Bage
					</Link>
				</div>
			)
		}

		return(
			<ul className="list-unstyled">
				{this.props.badges.map(badge => {
					return (
						<li className="" key={badge.id}>
							<Link className="text-reset text-decoration-none Badges__list-item" to={`/badges/${badge.id}/edit`} >
								<div className="Badges__item-img">
									<Gravatar email={badge.email} alt={badge.firstName} />
								</div>
								<div className="Badges__list-info">
									<h4>{badge.firstName} {badge.lastName}</h4>
									<div><a target="_black" href={`https://twitter.com/${badge.twitter}`}>@{badge.twitter}</a></div>
									<p>{badge.jobTitle}</p>
								</div>
							</Link>
						</li>
					)
				})}
			</ul>
		)
	}
}

export default BadgesList

BadgeEdit

import React from 'react'
import Badge from '../components/Badge'
import BadgeForm from '../components/BadgeForm'
import header from '../images/platziconf-logo.svg'
import './styles/BadgeEdit.css'
import api from '../api'
import PageLoading from '../components/PageLoading'

class BadgeEdit extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			loading: true,
			error: null,
			form: {
				firstName: '',
				lastName: '',
				jobTitle: '',
				twitter: '',
				email: '',
				avatarUrl: '',
			} 
		}
	}

	componenetDidMount() {
		this.fetchData()
	}

	fetchData = async e => {
		this.setState({loading: true, error: null,})
		try {
			const data = await api.badges.read(this.props.match.params.badgeId)
			this.setState({loading: false, form: data})
		} catch (error) {
			this.setState({loading: false, error: error})
		}
	}

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

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

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

      		this.props.history.push('/')
   		} catch (error) {
      		this.setState({ loading: false, error: error });
    	}
  	}

	render() {
		if (this.state.loading) {
			return <PageLoading />
		}

		return(
			<React.Fragment>
				<div className="BadgeEdit__hero">
					<img src={header} alt="Platzi Conf Logo" />
				</div>
				<div></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'} 
								email={this.state.form.email || 'name@example.com'} 
								jobTitle={this.state.form.jobTitle || 'Job Title'} 
								avatarUrl={this.state.form.avatarUrl} 
							/>
						</div>
						<div className="col-6">
							<h3>Edit Badge</h3>
							<BadgeForm 
								onSubmit={this.handleSubmit} 
								onChange={this.handleChange} 
								formValues={this.state.form} 
								error={this.state.error}
							/>
						</div>
					</div>
				</div>
			</React.Fragment>
		)
	}
}

export default BadgeEdit

Y en la pagina de /badges me da este error por <Link /> Como lo puedo solucionar?

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
    in a (at BadgesList.js:30)
    in div (at BadgesList.js:30)
    in div (at BadgesList.js:28)
    in a (created by Link)
    in Link (at BadgesList.js:24)
    in li (at BadgesList.js:23)
    in ul (at BadgesList.js:20)
    in BadgesList (at Badges.js:78)
    in div (at Badges.js:77)
    in div (at Badges.js:76)
    in div (at Badges.js:70)
    in Badges (created by Route)
    in Route (at App.js:16)
    in Switch (at App.js:14)
    in Layout (at App.js:13)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:12)
    in App (at src/index.js:8)

Hollwann Leon

student•

En BadgeEdit aún estás usando la función crear de la API, debes usar Update, y para lo del Link asegúrate de que lo estás importando de react-router-dom

Gaspar Dolcemascolo

student•

No, el profe tiene .read como yo (acabo de copiar su código) y sigue sin mostrarme los datos. Y en lo otro si tengo importado react-router-dom. Enserio ya me estoy desesperando

Ezequiel Dominguez

student•

Lo que no entendi es que significan esos 2 puntos en "/badges/:badgeid/edit" y por que dice que es una variable, como es que llega ahi?

Manuel Ojeda

student•

En la convención de los ruteadores tanto de frameworks JS (React, Vue, Angular) es la manera en la que se distingue que esa es una variable y por ende se puede extraer el ruteador, en este caso React Router. Por ello el : nos ayuda a identificar dentro de una ruta cuál es una variable y cuál no.

Mauro Hernandez

student•

El fragmento de la url don aparece :badgeid se puede considerar como una variable debido que esa parte de la url hace referencia a un usuario único.

Eso indica que va se remplaza por el id único del usuario

<Link  to={`/badges/${badge.id}/edit`} className="text-reset text--ecoration-none" >
       Contenido
</Link>

Este link va a redirigir a del usuario especifico gracias a que en la url que se le indica que va a sustituir

:badgeid

por

${badge.id}

el cual se obtiene a través de props que se le pasan al componente.

Actualizando datos (PUT)

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