From 7089dc73db96f65cfeed91b905a8b22a8e30f041 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Wed, 26 May 2021 11:11:20 -0400
Subject: [PATCH] add gravatar to topbar

---
 .../src/migration/MigrationTopNav_Session.tsx    | 13 +++++++++++--
 vocodes/src/session/SessionState.ts              |  1 +
 vocodes/src/session/SessionWrapper.ts            |  4 ++++
 vocodes/src/v2/profile/ProfileComponent.tsx      | 16 +++-------------
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/vocodes/src/migration/MigrationTopNav_Session.tsx b/vocodes/src/migration/MigrationTopNav_Session.tsx
index 3efedccdc9..dfca52cc4c 100644
--- a/vocodes/src/migration/MigrationTopNav_Session.tsx
+++ b/vocodes/src/migration/MigrationTopNav_Session.tsx
@@ -14,11 +14,20 @@ function MigrationTopNav_Session(props: Props) {
 
   let loggedIn = props.sessionWrapper.isLoggedIn();
   let displayName = props.sessionWrapper.getDisplayName();
+  let gravatarHash = props.sessionWrapper.getEmailGravatarHash();
+  let gravatar = <span />;
 
-  if (displayName === 'undefined') {
+  if (displayName === undefined) {
     displayName = 'My Account';
   }
 
+  if (gravatarHash !== undefined) {
+    const hash = gravatarHash;
+    const size = 15;
+    const gravatarUrl = `https://www.gravatar.com/avatar/${hash}?s=${size}`
+    gravatar = <img alt="gravatar" src={gravatarUrl} />
+  }
+
   let sessionLink = <p />;
 
   if (loggedIn) {
@@ -27,7 +36,7 @@ function MigrationTopNav_Session(props: Props) {
       <Link
         to={url}
         className="button is-alert is-inverted is-pulled-right"
-        >{displayName}</Link>
+        > {gravatar}&nbsp; {displayName}</Link>
     );
   } else {
     sessionLink = (
diff --git a/vocodes/src/session/SessionState.ts b/vocodes/src/session/SessionState.ts
index e8dd47584f..4319bf22e3 100644
--- a/vocodes/src/session/SessionState.ts
+++ b/vocodes/src/session/SessionState.ts
@@ -15,4 +15,5 @@ export interface UserInfo {
   user_token: string,
   username: string,
   display_name: string,
+  email_gravatar_hash: string,
 }
diff --git a/vocodes/src/session/SessionWrapper.ts b/vocodes/src/session/SessionWrapper.ts
index dc6e492b17..bc09d9f062 100644
--- a/vocodes/src/session/SessionWrapper.ts
+++ b/vocodes/src/session/SessionWrapper.ts
@@ -36,4 +36,8 @@ export class SessionWrapper {
   public getDisplayName() : string | undefined {
     return this.sessionStateResponse?.user?.display_name;
   }
+
+  public getEmailGravatarHash() : string | undefined {
+    return this.sessionStateResponse?.user?.email_gravatar_hash;
+  }
 }
diff --git a/vocodes/src/v2/profile/ProfileComponent.tsx b/vocodes/src/v2/profile/ProfileComponent.tsx
index 8709a765e2..b24f6b0a61 100644
--- a/vocodes/src/v2/profile/ProfileComponent.tsx
+++ b/vocodes/src/v2/profile/ProfileComponent.tsx
@@ -13,7 +13,7 @@ interface UserPayload {
   user_token: string,
   username: string,
   display_name: string,
-  gravatar_hash: string,
+  email_gravatar_hash: string,
   profile_markdown: string,
   profile_rendered_html: string,
   user_role_slug: string,
@@ -38,16 +38,6 @@ interface State {
   user?: UserPayload,
 }
 
-/*
-{"success":true,"user":
-  {"user_token":"3MJ09S2TQZ7CC5F","username":"echelon",
-  "display_name":"echelon","profile_markdown":"","profile_rendered_html":"",
-  "user_role_slug":"new-user","banned":0,"dark_mode":"light-mode",
-  "avatar_public_bucket_hash":null,"disable_gravatar":0,"hide_results_preference":0,
-  "discord_username":null,"twitch_username":null,"twitter_username":null,
-  "created_at":"2021-05-25T06:38:46Z"}}
-*/
-
 class ProfileComponent extends React.Component<Props, State> {
 
   constructor(props: Props) {
@@ -104,8 +94,8 @@ class ProfileComponent extends React.Component<Props, State> {
     }
 
     let gravatar = <span />;
-    if (this.state.user!.gravatar_hash !== undefined) {
-      const hash = this.state.user!.gravatar_hash;
+    if (this.state.user!.email_gravatar_hash !== undefined) {
+      const hash = this.state.user!.email_gravatar_hash;
       const size = 50;
       const gravatarUrl = `https://www.gravatar.com/avatar/${hash}?s=${size}`
       gravatar = <img alt="gravatar" src={gravatarUrl} />