From 5d3361a4103be1fa9eebe72d76e417c2abf9846e Mon Sep 17 00:00:00 2001
From: Jared Kobos <jaredkobos@gmail.com>
Date: Sat, 10 Feb 2018 19:10:30 -0500
Subject: [PATCH] Replace static user display data with live user

- Addresses #42
- Edits the Avatar component to connect to the Redux store
  and load live user data.
- Also addresses #9 (adds Gravatar hash request to Avatar
  component
---
 package.json                            |  1 +
 src/components/Avatar/Avatar.js         | 35 +++++++++++++++++++++++--
 src/components/Avatar/Avatar.module.css |  1 +
 yarn.lock                               | 18 ++++++++++++-
 4 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index a97ed76..b58cb85 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "axios": "^0.17.1",
     "custom-react-scripts": "^0.2.1",
     "font-awesome": "^4.7.0",
+    "md5": "^2.2.1",
     "query-string": "^5.0.1",
     "react": "^15.6.1",
     "react-bootstrap": "^0.31.3",
diff --git a/src/components/Avatar/Avatar.js b/src/components/Avatar/Avatar.js
index c14b62a..33bdc8e 100644
--- a/src/components/Avatar/Avatar.js
+++ b/src/components/Avatar/Avatar.js
@@ -1,13 +1,44 @@
 import React, { Component } from 'react';
 import styles from './Avatar.module.css';
+import { connect } from 'react-redux';
+import md5 from 'md5';
 
+@connect(
+  state => ({
+    state: state
+  }),
+  null
+)
 class Avatar extends Component {
+  constructor(props) {
+    super(props);
+    this.getUserName = this.getUserName.bind(this);
+    this.getEmailHash = this.getEmailHash.bind(this);
+    this.getGravatarURL = this.getGravatarURL.bind(this);
+  }
+
+  getUserName() {
+    const lastName = this.props.state.Login.user.userLastName;
+    const firstName = this.props.state.Login.user.userFirstName;
+    return `${firstName} ${lastName}`;
+  }
+
+  getEmailHash() {
+    const email = this.props.state.Login.user.userEmail.trim();
+    return md5(email);
+  }
+
+  getGravatarURL(emailHash) {
+    return `https://www.gravatar.com/avatar/${emailHash}`;
+  }
+
   render() {
+    this.getEmailHash();
     return(
       <div className={styles.Avatar}>
-        <div className={styles.user}>Gregory O.</div>
+        <div className={styles.user}>{this.getUserName()}</div>
         <div className={styles.arrow}></div>
-        <img className={styles.gravatar} src="https://www.gravatar.com/avatar/HASH" alt="gravatar" />
+        <img className={styles.gravatar} src={this.getGravatarURL(this.getEmailHash())} alt="gravatar" />
       </div>
     )
   }
diff --git a/src/components/Avatar/Avatar.module.css b/src/components/Avatar/Avatar.module.css
index e29c6db..10982fa 100644
--- a/src/components/Avatar/Avatar.module.css
+++ b/src/components/Avatar/Avatar.module.css
@@ -9,6 +9,7 @@
 
 .user {
   padding: 0 0.5em;
+  text-transform: capitalize;
 }
 
 .gravatar {
diff --git a/yarn.lock b/yarn.lock
index 0087432..958d2e8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1544,6 +1544,10 @@ chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.0:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
+charenc@~0.0.1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
+
 chokidar@^1.6.0, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@@ -1894,6 +1898,10 @@ cross-spawn@^4.0.0:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
+crypt@~0.0.1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
+
 cryptiles@2.x.x:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
@@ -3744,7 +3752,7 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
-is-buffer@^1.0.2, is-buffer@^1.1.5:
+is-buffer@^1.0.2, is-buffer@^1.1.5, is-buffer@~1.1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
 
@@ -4638,6 +4646,14 @@ md5.js@^1.3.4:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+md5@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/md5/-/md5-2.2.1.tgz#53ab38d5fe3c8891ba465329ea23fac0540126f9"
+  dependencies:
+    charenc "~0.0.1"
+    crypt "~0.0.1"
+    is-buffer "~1.1.1"
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"