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 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 32x 2x 34x 32x 2x 34x 33x 22x 22x 33x 1x 34x 34x 29x 5x 34x 32x 2x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 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;
|