Display user initials on settings menu avatar

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

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 {