show username

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}

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 {

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>
       );