make a function to get first alphabetic character of username

5 files changed, 14 insertions, 6 deletions

diff --git a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
index 875244dc..2327ef79 100644
--- a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
+++ b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
@@ -5,6 +5,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import { deepPurple } from '@material-ui/core/colors'
 import { useDispatch, useSelector } from 'react-redux'
 import { fetchSchematics } from '../../redux/actions/index'
+import { getUppercaseInitial } from '../../utils/GalleryUtils'
 
 const useStyles = makeStyles((theme) => ({
   toolbar: {
@@ -67,7 +68,7 @@ export default function DashSidebar (props) {
         >
           <ListItemAvatar>
             <Avatar className={classes.purple}>
-              {user.username.charAt(0).toUpperCase()}
+              {getUppercaseInitial(user.username)}
             </Avatar>
           </ListItemAvatar>
           <ListItemText
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Header.js b/blocks/eda-frontend/src/components/SchematicEditor/Header.js
index 1f998c46..d0153b9f 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Header.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Header.js
@@ -31,7 +31,7 @@ import { deepPurple } from '@material-ui/core/colors'
 
 import logo from '../../static/favicon.ico'
 import { setTitle, logout, setSchTitle, setSchShared } from '../../redux/actions/index'
-import { getDateTime as getDate } from '../../utils/GalleryUtils'
+import { getDateTime as getDate, getUppercaseInitial } from '../../utils/GalleryUtils'
 
 const useStyles = makeStyles((theme) => ({
   toolbarTitle: {
@@ -303,7 +303,7 @@ function Header () {
               onClick={handleClick}
             >
               <Avatar className={classes.purple}>
-                {user.username.charAt(0).toUpperCase()}
+                {getUppercaseInitial(user.username)}
               </Avatar>
             </IconButton>
             <Menu
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
index 6db29aec..64c15234 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
@@ -36,7 +36,7 @@ import CloseIcon from '@material-ui/icons/Close'
 import { useSelector, useDispatch } from 'react-redux'
 import { fetchSchematics, fetchSchematic, fetchDiagram, fetchGallery } from '../../redux/actions/index'
 import { blue } from '@material-ui/core/colors'
-import { getDateTime as getDate } from '../../utils/GalleryUtils'
+import { getDateTime as getDate, getUppercaseInitial } from '../../utils/GalleryUtils'
 
 const Transition = forwardRef(function Transition (props, ref) {
   return <Slide direction='up' ref={ref} {...props} />
@@ -357,7 +357,7 @@ export function ImageExportDialog (props) {
           <ListItem button onClick={() => handleListItemClick(img)} key={img}>
             <ListItemAvatar>
               <Avatar className={classes.avatar}>
-                {img.charAt(0).toUpperCase()}
+                {getUppercaseInitial(img)}
               </Avatar>
             </ListItemAvatar>
             <ListItemText primary={img} />
diff --git a/blocks/eda-frontend/src/components/Shared/Navbar.js b/blocks/eda-frontend/src/components/Shared/Navbar.js
index b42cb4c2..8303cfbf 100644
--- a/blocks/eda-frontend/src/components/Shared/Navbar.js
+++ b/blocks/eda-frontend/src/components/Shared/Navbar.js
@@ -7,6 +7,7 @@ import { deepPurple } from '@material-ui/core/colors'
 import { Link as RouterLink, useHistory } from 'react-router-dom'
 import logo from '../../static/favicon.ico'
 import { logout } from '../../redux/actions/index'
+import { getUppercaseInitial } from '../../utils/GalleryUtils'
 
 const useStyles = makeStyles((theme) => ({
   appBar: {
@@ -168,7 +169,7 @@ export function Header () {
               onClick={handleClick}
             >
               <Avatar className={classes.purple}>
-                {user.username.charAt(0).toUpperCase()}
+                {getUppercaseInitial(user.username)}
               </Avatar>
             </IconButton>
             <Menu
diff --git a/blocks/eda-frontend/src/utils/GalleryUtils.js b/blocks/eda-frontend/src/utils/GalleryUtils.js
index 84811c28..def4c512 100644
--- a/blocks/eda-frontend/src/utils/GalleryUtils.js
+++ b/blocks/eda-frontend/src/utils/GalleryUtils.js
@@ -186,3 +186,9 @@ export const saveXmlToFile = (filename, xmlDoc) => {
   const data = serializer.serializeToString(xmlDoc)
   saveToFile(filename, 'application/xml', data)
 }
+
+export const getUppercaseInitial = (str) => {
+  const match = str.match(/[a-zA-Z]/)
+  const char = match ? match[0] : str.charAt(0)
+  return char.toUpperCase()
+}