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 | 356x 248x 248x 248x | import { ReactElement } from "react";
import { useTranslation } from "react-i18next";
import { sortBy } from "remeda";
import { LotterySignupsByStartTimes } from "./LotterySignupsByStartTimes";
import { RaisedCard } from "client/components/RaisedCard";
import { useAppSelector } from "client/utils/hooks";
import {
EmptyContentContainer,
MyProgramHeader,
MyProgramSecondaryText,
ShowAllButton,
} from "client/views/my-program-items/components/shared";
import { selectGroupMembers } from "client/views/group/groupSlice";
import { LotterySignupWithProgramItem } from "client/views/my-program-items/myProgramItemsSlice";
interface Props {
lotterySignups: readonly LotterySignupWithProgramItem[];
isGroupCreator: boolean;
isGroupMember: boolean;
showAllProgramItems: boolean;
setShowAllProgramItems: (showAllProgramItems: boolean) => void;
}
export const MyLotterySignupsList = ({
lotterySignups,
isGroupCreator,
isGroupMember,
showAllProgramItems,
setShowAllProgramItems,
}: Props): ReactElement => {
const { t } = useTranslation();
const groupMembers = useAppSelector(selectGroupMembers);
const sortedLotterySignups = sortBy(
lotterySignups,
(lotterySignup) => lotterySignup.programItem.startTime,
(lotterySignup) => lotterySignup.priority,
);
return (
<RaisedCard data-testid="lottery-signup-program-items-list">
<MyProgramHeader>{t("lotterySignups")}</MyProgramHeader>
{!isGroupCreator && isGroupMember && <p>{t("group.inGroupSignups")}</p>}
{isGroupCreator && groupMembers.length > 0 && (
<p>{t("group.groupCreatorSignups")}</p>
)}
{lotterySignups.length === 0 && (
<EmptyContentContainer>
<MyProgramSecondaryText>
{t(
showAllProgramItems
? "noLotterySignups"
: "noFutureLotterySignups",
)}
</MyProgramSecondaryText>
{!showAllProgramItems && (
<ShowAllButton
onClick={() => setShowAllProgramItems(!showAllProgramItems)}
>
{t("showAllProgramItems")}
</ShowAllButton>
)}
</EmptyContentContainer>
)}
{lotterySignups.length > 0 && (
<LotterySignupsByStartTimes lotterySignups={sortedLotterySignups} />
)}
</RaisedCard>
);
};
|