From 4584e0f42fa685223bc0b5955c6020ea8d19e4b7 Mon Sep 17 00:00:00 2001 From: Jeremy Kahn Date: Tue, 23 Aug 2022 21:46:07 -0500 Subject: [PATCH] refactor: render Message component --- .../ChatTranscript/ChatTranscript.tsx | 35 ++--------------- src/components/Message/Message.test.tsx | 36 ++++++++++++++++++ src/components/Message/Message.tsx | 38 +++++++++++++++++++ src/components/Message/index.ts | 1 + src/models/chat.ts | 4 +- 5 files changed, 82 insertions(+), 32 deletions(-) create mode 100644 src/components/Message/Message.test.tsx create mode 100644 src/components/Message/Message.tsx create mode 100644 src/components/Message/index.ts diff --git a/src/components/ChatTranscript/ChatTranscript.tsx b/src/components/ChatTranscript/ChatTranscript.tsx index 64dedd8..b6f481a 100644 --- a/src/components/ChatTranscript/ChatTranscript.tsx +++ b/src/components/ChatTranscript/ChatTranscript.tsx @@ -1,9 +1,8 @@ -import Typography from '@mui/material/Typography' - -import { isMessageReceived, UnsentMessage, ReceivedMessage } from 'models/chat' +import { Message as IMessage } from 'models/chat' +import { Message } from 'components/Message' export interface ChatTranscriptProps { - messageLog: Array + messageLog: Array userId: string } @@ -11,33 +10,7 @@ export const ChatTranscript = ({ messageLog, userId }: ChatTranscriptProps) => { return (
{messageLog.map(message => { - let backgroundColor: string - - if (message.authorId === userId) { - backgroundColor = isMessageReceived(message) - ? 'primary.dark' - : 'primary.main' - } else { - backgroundColor = 'grey.700' - } - - return ( -
- - {message.text} - -
- ) + return })}
) diff --git a/src/components/Message/Message.test.tsx b/src/components/Message/Message.test.tsx new file mode 100644 index 0000000..bf5b50a --- /dev/null +++ b/src/components/Message/Message.test.tsx @@ -0,0 +1,36 @@ +import { render, screen } from '@testing-library/react' + +import { ReceivedMessage, UnsentMessage } from 'models/chat' + +import { Message } from './Message' + +const mockUserId = 'user-123' + +const mockUnsentMessage: UnsentMessage = { + id: 'abc123', + text: 'unsent message', + timeSent: 1, + authorId: mockUserId, +} + +const mockReceivedMessage: ReceivedMessage = { + id: 'abc123', + text: 'received message', + timeSent: 1, + authorId: mockUserId, + timeReceived: 2, +} + +describe('Message', () => { + test('renders unsent message text', () => { + render() + + screen.getByText(mockUnsentMessage.text) + }) + + test('renders received message text', () => { + render() + + screen.getByText(mockReceivedMessage.text) + }) +}) diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx new file mode 100644 index 0000000..96c172e --- /dev/null +++ b/src/components/Message/Message.tsx @@ -0,0 +1,38 @@ +import Typography from '@mui/material/Typography' + +import { Message as IMessage, isMessageReceived } from 'models/chat' + +export interface MessageProps { + message: IMessage + userId: string +} + +export const Message = ({ message, userId }: MessageProps) => { + let backgroundColor: string + + if (message.authorId === userId) { + backgroundColor = isMessageReceived(message) + ? 'primary.dark' + : 'primary.main' + } else { + backgroundColor = 'grey.700' + } + + return ( +
+ + {message.text} + +
+ ) +} diff --git a/src/components/Message/index.ts b/src/components/Message/index.ts new file mode 100644 index 0000000..177413f --- /dev/null +++ b/src/components/Message/index.ts @@ -0,0 +1 @@ +export * from './Message' diff --git a/src/models/chat.ts b/src/models/chat.ts index 1cefd5d..f33d918 100644 --- a/src/models/chat.ts +++ b/src/models/chat.ts @@ -10,5 +10,7 @@ export interface ReceivedMessage extends UnsentMessage { } export const isMessageReceived = ( - message: UnsentMessage + message: Message ): message is ReceivedMessage => 'timeReceived' in message + +export type Message = UnsentMessage | ReceivedMessage