add gravatar to topbar

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 = (

vocodes/src/session/SessionState.ts

@@ -15,4 +15,5 @@ export interface UserInfo {
   user_token: string,
   username: string,
   display_name: string,
+  email_gravatar_hash: string,
 }

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;
+  }
 }

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