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 | 356x 485x 485x 485x 244x 17x 244x | import { ReactElement, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { sortBy, unique } from "remeda";
import { DirectSignupsByStartTimes } from "./DirectSignupsByStartTimes";
import { RaisedCard } from "client/components/RaisedCard";
import {
EmptyContentContainer,
MyProgramHeader,
MyProgramSecondaryText,
ShowAllButton,
} from "client/views/my-program-items/components/shared";
import { DirectSignupWithProgramItem } from "client/views/my-program-items/myProgramItemsSlice";
interface Props {
directSignups: readonly DirectSignupWithProgramItem[];
showAllProgramItems: boolean;
setShowAllProgramItems: (showAllProgramItems: boolean) => void;
}
export const MyDirectSignupsList = ({
directSignups,
showAllProgramItems,
setShowAllProgramItems,
}: Props): ReactElement => {
const { t } = useTranslation();
const [startTimes, setStartTimes] = useState<string[]>([]);
useEffect(() => {
const directSignupStartTimes = directSignups.map(
(directSignup) => directSignup.programItem.startTime,
);
// eslint-disable-next-line react-hooks/set-state-in-effect
setStartTimes(directSignupStartTimes);
}, [directSignups]);
return (
<RaisedCard data-testid="direct-signup-program-items-list">
<MyProgramHeader>{t("directSignups")}</MyProgramHeader>
{startTimes.length === 0 && (
<EmptyContentContainer>
<MyProgramSecondaryText>
{t(
showAllProgramItems ? "noDirectSignups" : "noFutureDirectSignups",
)}
</MyProgramSecondaryText>
{!showAllProgramItems && (
<ShowAllButton
onClick={() => setShowAllProgramItems(!showAllProgramItems)}
>
{t("showAllProgramItems")}
</ShowAllButton>
)}
</EmptyContentContainer>
)}
{startTimes.length > 0 && (
<DirectSignupsByStartTimes
directSignups={sortBy(
directSignups,
(directSignup) => directSignup.signedToStartTime,
)}
startTimes={unique(startTimes).sort((a, b) => a.localeCompare(b))}
/>
)}
</RaisedCard>
);
};
|