From dd82d9e1eb0aea2dd226edc8d41af4d44f057132 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Sat, 27 Aug 2022 21:38:08 -0500
Subject: [PATCH] feat: render message author

---
 src/components/Message/Message.test.tsx |  6 ++++++
 src/components/Message/Message.tsx      | 13 +++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Message/Message.test.tsx b/src/components/Message/Message.test.tsx
index bf5b50a..f5b6518 100644
--- a/src/components/Message/Message.test.tsx
+++ b/src/components/Message/Message.test.tsx
@@ -33,4 +33,10 @@ describe('Message', () => {
 
     screen.getByText(mockReceivedMessage.text)
   })
+
+  test('renders message author', () => {
+    render(<Message message={mockReceivedMessage} userId={mockUserId} />)
+
+    screen.getByText(mockUserId)
+  })
 })
diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
index ec71486..cdf9845 100644
--- a/src/components/Message/Message.tsx
+++ b/src/components/Message/Message.tsx
@@ -48,7 +48,16 @@ export const Message = ({ message, userId }: MessageProps) => {
   }
 
   return (
-    <div className="Message block">
+    <Box className="Message">
+      <Typography
+        variant="overline"
+        display="block"
+        sx={{
+          textAlign: message.authorId === userId ? 'right' : 'left',
+        }}
+      >
+        {userId}
+      </Typography>
       <Box
         sx={{
           backgroundColor,
@@ -64,6 +73,6 @@ export const Message = ({ message, userId }: MessageProps) => {
           {message.text}
         </Markdown>
       </Box>
-    </div>
+    </Box>
   )
 }