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 | 4x 20x 20x 20x 20x 30x 20x 15x 15x 20x 32x | 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, currentUser }) => {
const initialMessagePageSize = 10;
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", border: "1px solid lightgray", borderRadius: "5px" }} data-testid="ChatDisplay" >
{Array.isArray(sortedMessages) && sortedMessages.slice(0, initialMessagePageSize).map((message) => (
<ChatMessageDisplay
key={message.id}
message={{ ...message, username: userIdToUsername[message.userId] }}
currentUser={currentUser}
/>
))}
</div>
);
};
export default ChatDisplay; |