From b6710d9bc0fa3857b375e9b68d37f95fa0435df1 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Tue, 18 May 2021 21:40:52 -0400
Subject: [PATCH] show username

---
 vocodes/src/App.tsx               |  4 ++--
 vocodes/src/api/SessionState.ts   |  2 +-
 vocodes/src/navigation/TopNav.tsx | 18 +++++++++++++++---
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/vocodes/src/App.tsx b/vocodes/src/App.tsx
index 40f008c2ee..c7a7c085a3 100644
--- a/vocodes/src/App.tsx
+++ b/vocodes/src/App.tsx
@@ -134,8 +134,8 @@ class App extends React.Component<Props, State> {
   }
 
   componentDidMount() {
-    this.startupQueryServiceSettings();
     this.querySession();
+    this.startupQueryServiceSettings();
     setInterval(() => this.querySession, 10000);
     //this.state.videoJobPoller.start();
     //this.state.videoQueuePoller.start();
@@ -428,7 +428,7 @@ class App extends React.Component<Props, State> {
         <div id="viewable">
           <TopNav 
             enableAlpha={this.state.enableAlpha}
-            loggedIn={this.state.loggedIn}
+            sessionState={this.state.sessionState}
             mode={this.state.mode} 
             historyBadgeCount={this.state.utterances.length}
             isHistoryCountBadgeVisible={this.state.isHistoryCountBadgeVisible}
diff --git a/vocodes/src/api/SessionState.ts b/vocodes/src/api/SessionState.ts
index aeee4de4d4..e8dd47584f 100644
--- a/vocodes/src/api/SessionState.ts
+++ b/vocodes/src/api/SessionState.ts
@@ -8,7 +8,7 @@ export interface SessionStateResponse {
   logged_in: boolean,
 
   // Extended user details (only if logged in)
-  user_info?: UserInfo,
+  user?: UserInfo,
 }
 
 export interface UserInfo {
diff --git a/vocodes/src/navigation/TopNav.tsx b/vocodes/src/navigation/TopNav.tsx
index 2bbf25aae4..d22130a3fe 100644
--- a/vocodes/src/navigation/TopNav.tsx
+++ b/vocodes/src/navigation/TopNav.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { Mode } from '../AppMode'
+import { SessionStateResponse } from '../api/SessionState';
 
 interface Props {
   enableAlpha: boolean,
-  loggedIn: boolean,
+  sessionState?: SessionStateResponse,
   mode: Mode,
   historyBadgeCount: number,
   isHistoryCountBadgeVisible: boolean,
@@ -24,15 +25,26 @@ function TopNav(props: Props) {
     badge = <span className={className}>{props.historyBadgeCount}</span>;
   }
 
+  let loggedIn = false;
+  let displayName = "My Account";
+
+  if (props.sessionState !== undefined) {
+    console.log('sessionstate', props.sessionState);
+    loggedIn = props.sessionState.logged_in;
+    if (props.sessionState.user !== undefined) {
+      displayName = props.sessionState.user.display_name;
+    }
+  }
+
   // Vo.codes 2.0
   let loginManagement = <span />;
   let extendedFeatures = <span />;
 
   if (props.enableAlpha) {
-    if (props.loggedIn) {
+    if (loggedIn) {
       loginManagement = (
         <span>
-          <a href="#profile" onClick={() => props.switchModeCallback(Mode.PROFILE_MODE)}>username</a>
+          <a href="#profile" onClick={() => props.switchModeCallback(Mode.PROFILE_MODE)}>{displayName}</a>
           <a href="#logout" onClick={() => props.logoutHandler()}>Log Out</a>
         </span>
       );