From c38a203f078dc2b3e4bfb43e794a068cc577fcf0 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Mon, 3 Oct 2022 21:29:28 -0500
Subject: [PATCH] feat: [closes #32] group messages under peer names

---
 .../ChatTranscript/ChatTranscript.tsx         | 12 ++++++++--
 src/components/Message/Message.test.tsx       | 24 ++++++++++++++++---
 src/components/Message/Message.tsx            | 23 ++++++++++--------
 3 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/components/ChatTranscript/ChatTranscript.tsx b/src/components/ChatTranscript/ChatTranscript.tsx
index 8856fa3..ef0a922 100644
--- a/src/components/ChatTranscript/ChatTranscript.tsx
+++ b/src/components/ChatTranscript/ChatTranscript.tsx
@@ -49,12 +49,20 @@ export const ChatTranscript = ({
         paddingY: theme.spacing(1),
       })}
     >
-      {messageLog.map(message => {
+      {messageLog.map((message, idx) => {
+        const previousMessage = messageLog[idx - 1]
+        const isFirstMessageInGroup =
+          previousMessage?.authorId !== message.authorId
+
         return (
           // This wrapper div is necessary for accurate layout calculations
           // when new messages cause the transcript to scroll to the bottom.
           <div key={message.id}>
-            <Message message={message} userId={userId} />
+            <Message
+              message={message}
+              userId={userId}
+              showAuthor={isFirstMessageInGroup}
+            />
           </div>
         )
       })}
diff --git a/src/components/Message/Message.test.tsx b/src/components/Message/Message.test.tsx
index 2708459..f1f6810 100644
--- a/src/components/Message/Message.test.tsx
+++ b/src/components/Message/Message.test.tsx
@@ -24,19 +24,37 @@ const mockReceivedMessage: ReceivedMessage = {
 
 describe('Message', () => {
   test('renders unsent message text', () => {
-    render(<Message message={mockUnsentMessage} userId={mockUserId} />)
+    render(
+      <Message
+        message={mockUnsentMessage}
+        userId={mockUserId}
+        showAuthor={false}
+      />
+    )
 
     screen.getByText(mockUnsentMessage.text)
   })
 
   test('renders received message text', () => {
-    render(<Message message={mockReceivedMessage} userId={mockUserId} />)
+    render(
+      <Message
+        message={mockReceivedMessage}
+        userId={mockUserId}
+        showAuthor={false}
+      />
+    )
 
     screen.getByText(mockReceivedMessage.text)
   })
 
   test('renders message author', () => {
-    render(<Message message={mockReceivedMessage} userId={mockUserId} />)
+    render(
+      <Message
+        message={mockReceivedMessage}
+        userId={mockUserId}
+        showAuthor={true}
+      />
+    )
 
     screen.getByText(funAnimalName(mockUserId))
   })
diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
index 93b5d54..5797f60 100644
--- a/src/components/Message/Message.tsx
+++ b/src/components/Message/Message.tsx
@@ -26,6 +26,7 @@ import './Message.sass'
 
 export interface MessageProps {
   message: IMessage
+  showAuthor: boolean
   userId: string
 }
 
@@ -71,7 +72,7 @@ const componentMap = {
   },
 }
 
-export const Message = ({ message, userId }: MessageProps) => {
+export const Message = ({ message, showAuthor, userId }: MessageProps) => {
   let backgroundColor: string
 
   if (message.authorId === userId) {
@@ -84,15 +85,17 @@ export const Message = ({ message, userId }: MessageProps) => {
 
   return (
     <Box className="Message">
-      <Typography
-        variant="caption"
-        display="block"
-        sx={{
-          textAlign: message.authorId === userId ? 'right' : 'left',
-        }}
-      >
-        <PeerNameDisplay>{message.authorId}</PeerNameDisplay>
-      </Typography>
+      {showAuthor && (
+        <Typography
+          variant="caption"
+          display="block"
+          sx={{
+            textAlign: message.authorId === userId ? 'right' : 'left',
+          }}
+        >
+          <PeerNameDisplay>{message.authorId}</PeerNameDisplay>
+        </Typography>
+      )}
       <Box
         sx={{
           color: 'primary.contrastText',