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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 1x 1x 1x 2639x 2639x 2634x 5x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 2639x 1x | 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;
|