From c2cd21672a04caca805f3caadfd92a3efe7df8ca Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Sun, 4 Sep 2022 09:59:28 -0500
Subject: [PATCH] feat: show user name to self

---
 src/Bootstrap.tsx                             |  2 +-
 .../PeerNameDisplay/PeerNameDisplay.tsx       | 10 +++++---
 src/components/Shell/Shell.test.tsx           |  4 ++--
 src/components/Shell/Shell.tsx                | 23 +++++++++++++++++--
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/Bootstrap.tsx b/src/Bootstrap.tsx
index 4984159..9d734b7 100644
--- a/src/Bootstrap.tsx
+++ b/src/Bootstrap.tsx
@@ -49,7 +49,7 @@ function Bootstrap({
 
   return (
     <Router>
-      <Shell>
+      <Shell userPeerId={userId}>
         {hasLoadedSettings ? (
           <Routes>
             {['/', '/index.html'].map(path => (
diff --git a/src/components/PeerNameDisplay/PeerNameDisplay.tsx b/src/components/PeerNameDisplay/PeerNameDisplay.tsx
index e9adea9..3342b69 100644
--- a/src/components/PeerNameDisplay/PeerNameDisplay.tsx
+++ b/src/components/PeerNameDisplay/PeerNameDisplay.tsx
@@ -1,9 +1,13 @@
+import Typography, { TypographyProps } from '@mui/material/Typography'
 import { funAnimalName } from 'fun-animal-names'
 
-interface PeerNameDisplayProps {
+interface PeerNameDisplayProps extends TypographyProps {
   children: string
 }
 
-export const PeerNameDisplay = ({ children }: PeerNameDisplayProps) => {
-  return <>{funAnimalName(children)}</>
+export const PeerNameDisplay = ({
+  children,
+  ...rest
+}: PeerNameDisplayProps) => {
+  return <Typography {...rest}>{funAnimalName(children)}</Typography>
 }
diff --git a/src/components/Shell/Shell.test.tsx b/src/components/Shell/Shell.test.tsx
index 866083f..73e4568 100644
--- a/src/components/Shell/Shell.test.tsx
+++ b/src/components/Shell/Shell.test.tsx
@@ -4,10 +4,10 @@ import { MemoryRouter as Router } from 'react-router-dom'
 
 import { Shell, ShellProps } from './Shell'
 
-const ShellStub = (overrides: ShellProps = {}) => {
+const ShellStub = (overrides: Partial<ShellProps> = {}) => {
   return (
     <Router>
-      <Shell {...overrides} />
+      <Shell userPeerId="abc123" {...overrides} />
     </Router>
   )
 }
diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx
index 4db2360..5355ba9 100644
--- a/src/components/Shell/Shell.tsx
+++ b/src/components/Shell/Shell.tsx
@@ -35,8 +35,11 @@ import Brightness7Icon from '@mui/icons-material/Brightness7'
 
 import { ShellContext } from 'ShellContext'
 import { AlertOptions } from 'models/shell'
+import { PeerNameDisplay } from 'components/PeerNameDisplay'
 
-export interface ShellProps extends PropsWithChildren {}
+export interface ShellProps extends PropsWithChildren {
+  userPeerId: string
+}
 
 const drawerWidth = 240
 
@@ -97,7 +100,7 @@ const DrawerHeader = styled('div')(({ theme }) => ({
   justifyContent: 'flex-end',
 }))
 
-export const Shell = ({ children }: ShellProps) => {
+export const Shell = ({ children, userPeerId }: ShellProps) => {
   const [isAlertShowing, setIsAlertShowing] = useState(false)
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const [doShowPeers, setDoShowPeers] = useState(false)
@@ -247,6 +250,22 @@ export const Shell = ({ children }: ShellProps) => {
               </IconButton>
             </DrawerHeader>
             <Divider />
+            <ListItem disablePadding>
+              <ListItemText
+                sx={{
+                  padding: '1em 1.5em',
+                }}
+                primary={
+                  <>
+                    <Typography>Your user name: </Typography>
+                    <PeerNameDisplay sx={{ fontWeight: 'bold' }}>
+                      {userPeerId}
+                    </PeerNameDisplay>
+                  </>
+                }
+              />
+            </ListItem>
+            <Divider />
             <List role="navigation">
               <Link to="/">
                 <ListItem disablePadding>