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 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 29x 2x 31x 29x 2x 31x 30x 22x 22x 30x 1x 31x 31x 26x 5x 31x 29x 2x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 31x 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;
|