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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 1x 1x 1x 1x 1x 1x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 30x 2x 32x 30x 2x 32x 31x 22x 22x 31x 1x 32x 32x 27x 5x 32x 30x 2x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 32x 1x | import React from "react";
import ChatMessageDisplay from "main/components/Chat/ChatMessageDisplay";
import { useBackend } from "main/utils/useBackend";
import { Link } from "react-router";
// Props for storybook manual injection
const ChatDisplay = ({ commonsId }) => {
const initialMessagePageSize = 10;
const refreshRate = 2000;
const { data: messagesPage } = useBackend(
[
`/api/chat/get?page=0&size=${initialMessagePageSize}&commonsId=${commonsId}`,
],
{
method: "GET",
url: `/api/chat/get`,
params: {
commonsId: commonsId,
page: 0,
size: initialMessagePageSize,
},
},
{ content: [], totalElements: 0 },
{ refetchInterval: refreshRate },
);
const { data: userCommonsList } = useBackend(
[`/api/usercommons/commons/all`],
{
method: "GET",
url: "/api/usercommons/commons/all",
params: {
commonsId: commonsId,
},
},
[],
{ refetchInterval: refreshRate },
);
const messageContent = Array.isArray(messagesPage?.content)
? messagesPage.content
: undefined;
const sortedMessages = Array.isArray(messageContent)
? [...messageContent].sort((a, b) => b.id - a.id)
: null;
const userIdToUsername = Array.isArray(userCommonsList)
? userCommonsList.reduce((acc, user) => {
acc[user.userId] = user.username || "";
return acc;
}, {})
: {};
const totalElements =
typeof messagesPage?.totalElements === "number"
? messagesPage.totalElements
: undefined;
const messageCount = Array.isArray(sortedMessages)
? sortedMessages.length
: 0;
const showHistoryLink =
(totalElements ?? messageCount) > initialMessagePageSize;
const historyLink = `/chat/${commonsId}`;
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>
{showHistoryLink && (
<div
style={{
textAlign: "center",
padding: "0.75rem 0 0.25rem",
fontSize: "0.9rem",
color: "#0d6efd",
}}
data-testid="ChatDisplay-HistoryLink"
>
<Link to={historyLink} style={{ textDecoration: "none" }}>
View full chat history
</Link>
</div>
)}
</>
);
};
export default ChatDisplay;
|