Uso de gravatar en nuestro proyecto

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

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

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.

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.

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

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'}
          />

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

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

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

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

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

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

no entendí nara

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

1. 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!!

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

Que opìnan de esta forma de validar

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

Una pequeña logica para que aparesca diferentes opciones si estas logeado o no

 <ul>
                {
                    hashUser ?
                    <>
                        <li><Link to="/">Cuenta</Link></li>
                        <li><Link to="/login">Cerrar Sesion</Link></li>
                    </>
                    :
                    <li><Link to="/login">Iniciar Sesion</Link></li>
                }
                
                
            </ul>

Hola, por que en gravatar.js en la línea 5 email va en paréntesis?

En la util > Gravatar el valor de email me retorno un array y pasa solucionarlo lo hice entrando al elemento (no se por que se paso como array)

import md5 from 'md5';

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

export default gravatar;

ctrl + ¿ identar a la derecha en windows

Si no es necesario usar el mapDispatchToProps, podemos simplemente enviar un parámetro:

export default connect(mapStateToProps)(Header);

no me funciona la opcion object.keys(user), me da error, esa línea de código la reemplacé por otra validación:

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

Primero vamos a conectar nuestro componente header con redux para poder conectar el estado de nuestro usuario y ya con estos elementos vamos a poder usar gravatar. Primero importaremos el connect y exportaremos como ya sabemos con el connect.

Ahora primero lo que vamos a hacer es utilizar mpStateToProps para poder traernos del estado el elemento que se encarga de los usuarios.

const mapStateToProps = (state) => {
  return {
    user: state.user,
  };
};

export default connect(mapStateToProps, null)(Header);

Ahora tenemos que revisar que si estaemos recibiendo props dentro de nuestro documento y los vamos a destructurar. Ahora vamos a cambiar la imagen que estamos utilizando por la que nos otorgue gravatar.

<img src={gravatar(user.email)} alt="{user.email}" />

Pero hay que crear una validacion para saber si tenemos usuario o no.

const hasUser = object.keys(user).length > 0;

Aqui comparamos si hay elementos dentro del objeto y si esto es mayor a 0 quiere decir que es true, en caso de ser menor pues lo guardaremos en false Y ya quedaria listo

Algunas veces simplemente el iniciar sesion no funciona, no se porque es un poco frustrante no saber el porque aveces funciona y porque no, mi solucion fue copiar y pegar codigo que habia en la cajca de comentarios, pero en realidad no tenia ninfgun typo.

Ami no me dio no me aparece la imagen de gravatar.

=) 💪

Pero la validacion esta un poco de mas no ? porque aunque no este en gravatar si regresa siempre algo una imagen de gravatar y no regresa la de usericon

que hermoso es esto*.*

espectacular, que funcionalidad 😄 y muy buen explicación

les recomiendo al final de el link del gravatar agregar ?d=identicon para que les genere una imagen distinta para cada mail

En este curso estoy aprendiendo a velocidades increíbles… Gracias a Oscar ya voy entendiendo y asimilando el flujo de trabajo con Redux

Les comparto otra posible solucion.

import { gravatar } from '../utils/gravatar'
import '../assets/styles/components/Header.scss';
import logoPlatziVideo from '../assets/static/logo-platzi-video-BW2.png'
import userLogo from '../assets/static/user-icon.png'

const Header = (props) => {
  
  const {
    user
  } = props

  let email = userLogo;

  if(user){
    if(user.email){
      email = gravatar(user.email);
    }
  }

  return (
    <header className="header">
      <Link to='/'>
        <img className="header__img" src={logoPlatziVideo} alt="Platzi Video" />
      </Link>
  
      <div className="header__menu">
        <div className="header__menu--profile">
          <img src={email} alt={user.email} />
          <p>Perfil</p>
        </div>
        <ul>
          <li><a href="/">Cuenta</a></li>
          <li>
            <Link to='/login'>
              Iniciar Sesión
            </Link>
          </li>
        </ul>
      </div>
    </header>  
  );
}

Hi!

…

…

Genial, hay vamos aggarando el pulsoa Redux, debo practicar y leer bastante 💪💪

Si quieren que les funcione el gravatar cambien el ruturn por este

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

tenía mal base, en el archivo de gravatar.js por si a alguien le pasó

Realice la validacion al mismo tiempo al momento de la declaracion de variables y funciona tb 😄

  const profilePicture = props.user.hasOwnProperty('email')
    ? gravatar(props.user.email)
    : userIcon;

Gracias Oscar y Richard por mostrarnos la magia de JS 😄

La solución de Seba Cardoso, me animo a intentar otra forma de evitar hacer el if en el return.

  let userImage = userIcon

  Object.keys(user).length > 0 && (userImage = gravatar(user.email))
  console.log(userImage)

ya en el src de la imagen se utiliza

<img src={userImage} alt='' />

y de esta forma también queda con un solo elemento img.

Mi forma de hacer la imagen del gravatar. Existen varias formas pero aplico esta porque valida que el valor de user y que tenga email

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

esas props que se le pasan al componente que son exactamente? no se de dodne salen ni a que se refieren.

Hola, No entiendo el por qué tenemos que usar Object.key() para medir la logitud de ‘user’???

puesto que user ya es un objeto, en lo personal, preferiría usar

user.hasOwnProperty('email')

Me gusta el hecho de crear el minimo de validaciones en el codigo, les comparto mi solucion…

const Header = ({ user }) => {
  const isLoged = Object.keys(user).length > 0;
  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">
        <img src={isLoged ? gravatar(user.email) : userIcon} alt={isLoged ? user.email : 'Icono'} />
        <p>{isLoged ? user.email : 'Login'}</p>
      </div>
      <ul>
        <li><a href="/">Cuenta</a></li>
        <li>
          <Link to="/login">Iniciar sesion</Link>
        </li>
      </ul>
    </div>
  </header>
  )
}

En mi caso, el condicional para elegir cual URL usar para la imagen de perfil la coloqué antes de la parte presentacional del componente, me parece que queda un poco más limpio y legible así.

    const { user } = props;
    const userAvatar = (user && user.email) ? gravatar(user.email) : userIcon;

    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">
                    <img src={userAvatar} alt="" />

Bien interesante el servicio de Gravatar

Wooooow!! un momento, esta genial la parte de utilizar gravatar!! es todo lo que quiero decir.

práctica: