Chat ChatMessageDisplay.js

100% Statements 7/7

100% Branches 6/6

100% Functions 1/1

100% Lines 7/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32  
 
 
6x
 
56x
 
56x
 
56x
56x
 
56x
 
56x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Card } from 'react-bootstrap';
import { useCurrentUser } from "main/utils/currentUser";
 
const ChatMessageDisplay = ({ message }) => {
 
  const username = message?.username || "Anonymous";
 
  const formattedTimestamp = message?.timestamp ? message.timestamp.replace('T', ' ').split('.')[0] : '';
 
  const { data: currentUser } = useCurrentUser();
  const currentUserId = currentUser.root?.user.id;
 
  const testId = `ChatMessageDisplay-${message?.id}`;
  
  return (
    <Card data-testid={testId} bg={currentUserId === message?.userId ? 'primary' : 'secondary'} text={'white'}>
      <Card.Body>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Card.Title data-testid={`${testId}-User`} style={{ margin: 0 }}>
            {username}
          </Card.Title>
          <Card.Subtitle data-testid={`${testId}-Date`} style={{ margin: 0 }}>
            {formattedTimestamp}
          </Card.Subtitle>
        </div>
        <Card.Text data-testid={`${testId}-Message`}>{message?.message}</Card.Text>
      </Card.Body>
    </Card>
  );
};
 
export default ChatMessageDisplay;