From 86addbeb64414af31b6a331bc7191b4723ddcefa Mon Sep 17 00:00:00 2001
From: aMetallurgist <joshua.d1434@gmail.com>
Date: Sat, 23 Mar 2024 17:12:29 -0700
Subject: [PATCH] Display user initials on settings menu avatar

---
 .../components/common/AuthenticatedHeader.tsx | 27 ++++++++++++-------
 app/src/services/auth.ts                      |  2 ++
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/app/src/components/common/AuthenticatedHeader.tsx b/app/src/components/common/AuthenticatedHeader.tsx
index 2a6ba18e..6efbefcd 100644
--- a/app/src/components/common/AuthenticatedHeader.tsx
+++ b/app/src/components/common/AuthenticatedHeader.tsx
@@ -8,18 +8,18 @@ import Typography from '@mui/material/Typography';
 import {Tooltip, Avatar, Menu, MenuItem, Stack} from '@mui/material';
 import logo from '../../img/favicon.png';
 import {useSignOutMutation} from '../../services/auth';
+import {selectCurrentUser} from '../../../src/app/authSlice';
+import {User} from '../../services/auth';
 
+import {useSelector} from 'react-redux';
 import {Link, useNavigate} from 'react-router-dom';
 import {styled} from '@mui/system';
 
-const userName = 'Hank Hill';
-
-function getInitials(name: string) {
-  const splitName = name.split(' ');
-
-  if (splitName.length === 1) return splitName[0][0];
-
-  return splitName[0][0] + splitName[splitName.length - 1][0];
+function getInitials(user: User): string {
+  const fi = user.firstName && user.firstName[0] || '?';
+  const li = user.lastName && user.lastName[0] || '?';
+  
+  return fi + li;
 }
 
 interface OwnProps {
@@ -94,12 +94,19 @@ const AvatarDropdownMenu = () => {
     setAnchorElUser(null);
   };
 
+  // If the user ever fails to load, then display 
+  // ?? as the initials for debugging purposes
+  const user = useSelector(selectCurrentUser) || {
+    email: 'unknown',
+    firstName: '?',
+    lastName: '?'
+  };
+
   return (
     <Box sx={{flexGrow: 0}}>
       <Tooltip title="Open settings">
         <IconButton onClick={handleOpenUserMenu} sx={{p: 0}}>
-          {/* Replace with real user name */}
-          <Avatar alt={userName}>{getInitials(userName)}</Avatar>
+          <Avatar alt={user.firstName + ' ' + user.lastName}>{getInitials(user)}</Avatar>
         </IconButton>
       </Tooltip>
       <Menu
diff --git a/app/src/services/auth.ts b/app/src/services/auth.ts
index 7ab468eb..ce4db984 100644
--- a/app/src/services/auth.ts
+++ b/app/src/services/auth.ts
@@ -2,6 +2,8 @@ import {api} from './api';
 
 export interface User {
   email: string;
+  firstName: string;
+  lastName: string;
 }
 
 export interface UserResponse {