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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 1x 1x 1x 1x 1x 1x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 23x 23x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 1x | import React from "react";
import { Link } from "react-router";
import ChatMessageDisplay from "main/components/Chat/ChatMessageDisplay";
import { useBackend } from "main/utils/useBackend";
// Props for storybook manual injection
const ChatDisplay = ({ commonsId, refreshRate: refreshRateProp }) => {
const initialMessagePageSize = 10;
// Stryker disable all
const refreshRate = refreshRateProp ?? 2000;
const { data: messagesPage } = useBackend(
[`/api/chat/get`],
{
method: "GET",
url: `/api/chat/get`,
params: {
commonsId: commonsId,
page: 0,
size: initialMessagePageSize,
},
},
{ content: [], totalElements: 0 }, // added totalElements to track total msg count
{ refetchInterval: refreshRate },
);
const { data: userCommonsList } = useBackend(
[`/api/usercommons/commons/all`],
{
method: "GET",
url: "/api/usercommons/commons/all",
params: {
commonsId: commonsId,
},
},
[],
{ refetchInterval: refreshRate },
);
// Stryker restore all
const sortedMessages = messagesPage.content.sort((a, b) => b.id - a.id);
const userIdToUsername = userCommonsList.reduce((acc, user) => {
acc[user.userId] = user.username;
return acc;
}, {});
const totalElements = messagesPage.totalElements || 0;
const hasMoreMessages = totalElements >= initialMessagePageSize;
return (
<div data-testid="ChatDisplay">
{hasMoreMessages && (
<div
style={{
padding: "8px",
textAlign: "center",
backgroundColor: "#f8f9fa",
borderBottom: "1px solid #dee2e6",
}}
data-testid="ChatDisplay-viewAll"
>
<Link to={`/chat/${commonsId}`}>
View all {totalElements} messages
</Link>
</div>
)}
<div
style={{
display: "flex",
flexDirection: "column-reverse",
overflowY: "scroll",
maxHeight: "300px",
}}
>
{Array.isArray(sortedMessages) &&
sortedMessages.slice(0, initialMessagePageSize).map((message) => (
<ChatMessageDisplay
key={message.id}
message={{
...message,
username: userIdToUsername[message.userId],
}}
/>
))}
</div>
</div>
);
};
export default ChatDisplay;
|