Uso de gravatar en nuestro proyecto

Clase 19 de 29 • Curso de React Router 5 y Redux

Seba Cardoso

student•

A mi se me ocurre que también podría tener una sola img y manejar la lógica dentro del src.

<img src={Object.keys(user).length > 0 ? gravatar(user.email) : userIcon} alt={user.email} />

Oscar Barajas Tavares

Team Platzi•

Una solución que ayuda a mejorar el código que es parte de la imagen, gracias por compartir.

Markoz Peña Mendez

student•

No esta mal pero para mi gusto es mejor tener todo ese resultado que final regresa un Boolean en una constante. Meter mucho js en la JSX no es entendible al final.

Pablo Domínguez Durán

student•

No me gusta que dé por hecho que sabemos qué hace gravatar.js

Una explicación sencilla bastaría. Al saltarselo hace que muchos solo copien y peguen código

Jaime David Burbano Montoya

student•

Es que no hace mucho. Lo que hizo en ese archivo fue construir una url .

import md5 from 'md5';

const gravatar = (email) => {
  const base = 'https://gravatar.com/avatar/';
  const formattEmail = (email).trim().toLowerCase();
  const hash = md5(formattEmail, {encoding:'binaty'});

  return `${base}${hash}`;
}

export default gravatar;

Importa la libreria de md5
Crea un función llamada gravatar que recibe un email como parametro
Crea una "base" que es la url de gravatar para obtener una imagen
Crea la parte dinámica de la url, donde coge el email que recibe, le quita los espacios que pueda tener dentro y lo pasa a minúsculas
Convierte la parte dinámica de la url a un hash o una serie binaria
La función retonar una URL que representa una imagen
Le pone esta url de la imagen en la etiqueta <img>

Eso es todo

Victor Baruch Pazaran Jaimes

student•

claro, estoy de acuerdo en esto, pero tambien es tarea de cada quien ponerse a investigar un poco por nuestra cuenta en los temas que te interesen o que se quieran entender mas a profundidad, tan solo imagina como seria el curso si se pusiera a explicar cada una de las funciones que llebamos usando hasta el momento

yo nunca habia escuchado de gravatar, pero mira, con una sencialla busqueda en google pude saber que era

Joaquín Ignacio Ossandón Gómez

student•

Para quienes tengan un error con Object.keys(user)

En mi index.js (más bien en mi estado inicial) no existía el objeto user, sino User, corrigiendo esto, solucioné el error de que no funcionase con el Object.keys, claramente no era un objeto, sino algo que no estaba definido y me lo estaba sacando de la manga.

Antes:

const initialState = {
  "User" : {},
  "playing": {},
  "myList": [], 
...

Después:

const initialState = {
  "user" : {},
  "playing": {},
  "myList": [], 
...

Hace bien despejarse, intenté hacer un poco de música, me distraje un poco, fui a hacer almuerzo y cuando entré a la cocina, se me alumbró la ampolleta. 😁

Obvio, también tenemos que revisar todo y entender qué estamos haciendo y por qué. En mi caso, no terminaba de enlazar todo hasta ahora. 😅

Esto soluciona también el problema de la próxima clase.

Manuel Entrena Jimenez

student•

Me salvastes!

Axel Alexis Lopez Resendiz

student•

En el return de gravatar

return `${base}${hash}?d=identicon`

de esta forma les retornara la imagen que tenga asignada al hash del correo o una aleatoria en caso de que no lo tenga.

Miguel Angel Reyes Moreno

student•

No me funciona :(

Andrés Felipe Cano Sierra

student•

Oh, oh, oh It's magic, you know

Max Alberto Cuao Manjarrez

student•

Otra manera de validar si existe el usuario para poner el icono:

          <img
            src={user ? gravatar(user.email) : userIcon}
            alt={user ? user.email : 'Icono de usuario'}
          />

Gustavo Gonzalez Montero

student•

Alguien me puede explicar con peras y manzanas porque en esta ocasión usamos una arrow function en mapStateToProps para sacar el usuario, y en otras ocaciones usamos un objeto que usamos como parámetro en el connect?

const mapStateToProps = state => {
  return {
    user: state.user
  }
}

export default connect(mapStateToProps, null)(Header)

Lo que entiendo es que del contenedor Login nos conectamos al otro contenedor Home que tiene al componente Header donde "supongo" que va a "traer" consigo ya cargado el usuario (en las props del state).

¿Es así o cómo se podría explicar de una manera simple?

Nilson Diaz

student•

Hola ! como bien ya sabes La forma de consumir el estado de redux es atravez de la funcion connect , esta recibira dos parametros

El primero sera una funcion a la que redux internamente le pasara todo nuestro store (o state) y nosotros dentro de la funcion retornaremos un objeto con los valores del store que queremos consumir en nuestro componente, tambien solo podemos retornar el store(o state) si queremos tener acceso a todo. Comunmente y por convencion se le llama mapStateToProps

El segundo parametro es un objeto en donde ponemos nuestros actions, Comunmente y por convencion se le llama mapDispatchToProps.

la razon por la que mapStateToProps es una funcion es porque nosotros no tenemos acceso al store de redux de una forma directa , asi que de esta forma redux nos dara por parametros el estado y ya luego nosotros decidiremos que retornar a las props de nuestro componente, mapDispatchToProps siempre sera un objeto ya que redux no tiene conocimiento de que actions nosotros tenemos , asi que importamos nuestro actions y lo ponemos en un objeto y se lo pasamos de segundo parametro en la funcion connect.

si no necesitamos actions o estado simplemente le ponemos un null en su respectivo espacio, y haremos esto cada vez que queramos conectarnos al store de redux (o state) en cualquier componente

siempre puedes leer mas a detalle como funciona en su documentacion

Espero te haya quedado un poco mas claro !

Gustavo Gonzalez Montero

student•

Gracias!

Manuel Alejandro Blanco Lamas

student•

Tambien pueden verificar si email esta incluido dentro de user con:

Object.keys(user).includes('email')

Andrés Campuzano Garzón

student•

🦄 Acá el código de lo trabajado al momento: https://github.com/AndresCampuzano/React-Router-and-Redux/commit/c2d05f887bda20f194436f08d042064cb96c7525

GRECO ALEJANDRO SERNA DIAZ

student•

muchas gracias compañero, gracias a ti pude darme cuenta de lo que fallé en mi proyecto, saludos :D

platzerito02112019 platzerito02112019

student•

Tengo este TypeError cuando uso la funcion keys

const Header = props => {
    
    const { user } = props;
    
    const hasUser = Object.keys(user).length  >  0;

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Header (Header.jsx:23)
    at renderWithHooks (react-dom.development.js:15108)
    at mountIndeterminateComponent (react-dom.development.js:17342)
    at beginWork$1 (react-dom.development.js:18486)
    at HTMLUnknownElement.callCallback (react-dom.development.js:347)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
    at invokeGuardedCallback (react-dom.development.js:454)
    at beginWork$$1 (react-dom.development.js:23217)
    at performUnitOfWork (react-dom.development.js:22208)

![](

Juan Sebastian Reina

student•

Lo que debe estar ocurriendo es que cuando se hace el destructuring de props el valor de user no existe, luego, el Object.keys intenta obtener los key values de un objeto que no existe o es null. Prueba lo siguiente:

    const isNullOrUndefined = (value) => value === null || typeof value === 'undefined' ;

    const { user } = props;
    
    const hasUser = isNullOrUndefined() && Object.keys(user).length  >  0;

en caso de ser null o undefined Object.keys no se ejecuta y hasUsertoma el valor defalse`, de esta manera debería quedar resulto

Juan Sebastian Reina

student•

me falta algo en el comentario anterior, corrijo:

 const hasUser = !isNullOrUndefined(user) && Object.keys(user).length  >  0;

ps: no se si se pueden editar comentarios haha

Manuel Entrena Jimenez

student•

Tuve que poner un "/" entre el base y el hash para que la url de gravatar funcionase y al final "?

Emmanuel Vega

student•

Gracias! A mi tampoco me retornaba ni mi usuario ni el default Aunque me queda duda de por qué se puede acceder a mi usario aún sin ponerle una contraseña

Daniel Hernández

student•

porque en la logica de un anterior video para pasar un parametro a una function desde el html toco hacer : {() => function(param)} y aqui si se puede hacer {function(param)} ??

Marco Mesén Campos

student•

las funciones que pases así {function(param)} se ejecutará inmediatamente, diferente a las funciones que pases dentro de otra, estas esperarán a que las ejecutes, el ejemplo anterior que mencionas era un event, creo que era onchange o onclick por ende tenía que pasarse sin que se ejecutara, hasta que el evento lo hiciera

Pablo Domínguez Durán

student•

Lo que hace la url de gravatar es proveer una url pública que tiene una foto asociada a un correo.

Este correo lo mandamos con un hash en formato binario que obtenemos de md5, un algoritmo de criptografía, para crear un hash de 128 bits

Karen Paola Diaz Duarte

student•

Práctica: anteriormente me salía un error en la consola de la web y lo corregí poniendo binary en comillas simples, 'binary'

Bruno Kamiche

student•

no entendí nara

Julio Gragirena

student•

holaa , el icono del usuario no me cambia , no se cual es la solucion

import React from 'react';
import { connect } from 'react-redux';
import '../asset/styles/Components/Header.scss';
import { Link } from 'react-router-dom';
import gravatar from '../utils/gravatar';
import logo from '../asset/static/logo-platzi-video-BW2.png';
import userIcon from '../asset/static/user-icon.png';

const Header = (props) => {
  const { user } = props;
  const hasUser = Object.keys(user).length > 0;
  console.log(hasUser);
  return (
    <header className='header'>

      <Link to='/'>
        <img className='header__img' src={logo} alt='Platzi Video' />
      </Link>
      <div className='header__menu'>
        <div className='header__menu--profile'>
          { hasUser ?
            (<img src={gravatar(user.email)} alt={user.email} />) :
            (<img src={userIcon} alt='User' />)
          }
          <p>Perfil</p>
        </div>
        <ul>
          <li><a href='/'>Cuenta</a></li>
          <li>
            <Link to='/login'>
              Iniciar sesion
            </Link>
          </li>
        </ul>
      </div>
    </header>
  );
};

const mapStateToProps = (state) => {
  return {
    user: state.user,
  };
};
//export default Header;
export default connect(mapStateToProps, null)(Header);

import md5 from 'md5';

const gravatar = (email) => {
  const base = 'https://gravatar.com/avatar/';
  const formattedEmail = email[0].trim().toLowerCase();
  const hash = md5(formattedEmail, { enconding: 'binary' });
  return `${base}${hash}`;
};

export default gravatar;

Luis Lira

student•

¡Hola! :D

Para que funcione el cambio de icono debes usar una cuenta de correr la cual esté registrada en Gravatar y que le hayas asignado tu propia imagen, en mi caso, me salía la imagen que agregué en mi cuenta de Wordpress, al parecer de ahí las toma.

¡Nunca pares de aprender! 💚

Julio Gragirena

student•

osea no me pone el icono por defecto ni tampoco un icono valido , ando viendo pero no encuentro el error la verdad

Daniel Ruiz

student•

No me cambia el avatar pero tampoco me arroja ningun error en consola ¿donde podria estar fallando?

Luis Lira

student•

Podrías poner tu código para poder revisarlo? También puedes ir haciendo logs para ver qué resultado estás teniendo.

Martin Paez

student•

Hi. Tienes que revisar tu funcion gravatar o el componente Header. Si nos podrias compartir tu codigo de ambos seria mejor para poderte apoyar. :)

Juan Sebastián Gómez Tabares

student•

estoy revisando que es props y aun no me queda claro que es, asi que lo imprimi en consola y me encuentro con muchas cosas que no se que son, alguien me podria explicar?

Abril Rios

student•

Props vendria a ser las propiedades React lo abrevia como props.

Un ejemplo de una propiedad con JavaScript seria .toString

Y con uno de React podria ser React.component

Migrant Cyborg

student•

Por si les llega a dar un typeError diciendo que el Object.keys no puede ejecurtarse sobre un elemento vacio:

Revisen las solcuiones que ya ofrecieron otrxs compañerxs: 1.1. Revisar initialState que "user" estè escrito en minuscula 1.2 Revisa que Object.keys inicie en mayuscula y no object.keys Y si nada de eso les funciona, lo que pasa es que el typo està en el reducer, vayan al case de loginRequest, y asegurense que en el return de user esté asì: action.payload

case actions.loginRequest: 
            return{
                ...state,
                user: action.payload,
            };

Me pasó que tenia actions.payload y no tenia como guardar el dato. Intenten no resolver haciendo una validación para que cuando user venga vació no haga el Object.keys, porque de este modo no resuelven el problema real y van a ir acarreando esta deuda tènica. Exitos compas!!

Cesar Eduardo Valle Pino

student•

Me paso que tenía object en lugar de Object. Gracias.

Paul Cortes

student•

Que opìnan de esta forma de validar

  <img src={user.email ? gravatar(user.email) : userIcon} alt='' />

Carlos Alfonso Garcia Rivera

student•

estilo compacto (y)

import md5 from 'md5';

const gravatar = (email) => {
  const base = 'https://gravatar.com/avatar/';
  const formattEmail = (email).trim().toLowerCase();
  const hash = md5(formattEmail, {encoding:'binaty'});

  return `${base}${hash}`;
}

export default gravatar;

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Header (Header.jsx:23)
    at renderWithHooks (react-dom.development.js:15108)
    at mountIndeterminateComponent (react-dom.development.js:17342)
    at beginWork$1 (react-dom.development.js:18486)
    at HTMLUnknownElement.callCallback (react-dom.development.js:347)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
    at invokeGuardedCallback (react-dom.development.js:454)
    at beginWork$$1 (react-dom.development.js:23217)
    at performUnitOfWork (react-dom.development.js:22208)

import React from 'react';
import { connect } from 'react-redux';
import '../asset/styles/Components/Header.scss';
import { Link } from 'react-router-dom';
import gravatar from '../utils/gravatar';
import logo from '../asset/static/logo-platzi-video-BW2.png';
import userIcon from '../asset/static/user-icon.png';

const Header = (props) => {
  const { user } = props;
  const hasUser = Object.keys(user).length > 0;
  console.log(hasUser);
  return (
    <header className='header'>

      <Link to='/'>
        <img className='header__img' src={logo} alt='Platzi Video' />
      </Link>
      <div className='header__menu'>
        <div className='header__menu--profile'>
          { hasUser ?
            (<img src={gravatar(user.email)} alt={user.email} />) :
            (<img src={userIcon} alt='User' />)
          }
          <p>Perfil</p>
        </div>
        <ul>
          <li><a href='/'>Cuenta</a></li>
          <li>
            <Link to='/login'>
              Iniciar sesion
            </Link>
          </li>
        </ul>
      </div>
    </header>
  );
};

const mapStateToProps = (state) => {
  return {
    user: state.user,
  };
};
//export default Header;
export default connect(mapStateToProps, null)(Header);

import md5 from 'md5';

const gravatar = (email) => {
  const base = 'https://gravatar.com/avatar/';
  const formattedEmail = email[0].trim().toLowerCase();
  const hash = md5(formattedEmail, { enconding: 'binary' });
  return `${base}${hash}`;
};

export default gravatar;

Uso de gravatar en nuestro proyecto

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto