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 | 1x 1x 1x 1x 87x 87x 73x 73x 14x 3x 3x 3x 3x 3x 14x 17x 17x 14x 14x 14x 17x 17x 17x 17x 17x 17x 6x 11x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 14x | import React, { useState } from "react";
import { Button } from "react-bootstrap";
const MAX_ANNOUNCEMENT_LENGTH = 120;
export default function CurrentAnnouncements({ announcements }) {
const [expanded, setExpanded] = useState({});
if (!announcements || announcements.length === 0) {
return null;
}
const toggleExpanded = (id) => {
setExpanded((oldExpanded) => ({
...oldExpanded,
[id]: !oldExpanded[id],
}));
};
const getAnnouncementText = (announcement) => {
return announcement.announcementText || announcement.message || "";
};
return (
<div data-testid="CurrentAnnouncements" className="mb-3">
{announcements.map((announcement) => {
const isExpanded = expanded[announcement.id];
const announcementText = getAnnouncementText(announcement);
const shouldCollapse =
announcementText.length > MAX_ANNOUNCEMENT_LENGTH;
const displayedText =
shouldCollapse && !isExpanded
? `${announcementText.substring(0, MAX_ANNOUNCEMENT_LENGTH)}...`
: announcementText;
return (
<div
key={announcement.id}
className="mb-2"
data-testid={`CurrentAnnouncements-announcement-${announcement.id}`}
>
<div>{displayedText}</div>
{shouldCollapse && (
<Button
variant="link"
className="p-0"
onClick={() => toggleExpanded(announcement.id)}
data-testid={`CurrentAnnouncements-toggle-${announcement.id}`}
>
{isExpanded ? "Show less" : "Show more"}
</Button>
)}
</div>
);
})}
</div>
);
}
|