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 | 1x 1x 1x 1x 1x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 11x 11x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 1x | import React from "react";
import ChatMessageDisplay from "main/components/Chat/ChatMessageDisplay";
import { useBackend } from "main/utils/useBackend";
// Props for storybook manual injection
const ChatDisplay = ({ commonsId }) => {
const initialMessagePageSize = 100;
const refreshRate = 2000;
// Stryker disable all
const { data: messagesPage } = useBackend(
[`/api/chat/get`],
{
method: "GET",
url: `/api/chat/get`,
params: {
commonsId: commonsId,
page: 0,
size: initialMessagePageSize,
},
},
{ content: [] },
{ 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;
}, {});
return (
<div
style={{
display: "flex",
flexDirection: "column-reverse",
overflowY: "scroll",
maxHeight: "300px",
}}
data-testid="ChatDisplay"
>
{Array.isArray(sortedMessages) &&
sortedMessages.slice(0, initialMessagePageSize).map((message) => (
<ChatMessageDisplay
key={message.id}
message={{
...message,
username: userIdToUsername[message.userId],
}}
/>
))}
</div>
);
};
export default ChatDisplay;
|