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 | 356x 254x 254x 1x | import { ReactElement } from "react";
import { useTranslation } from "react-i18next";
import { sortBy } from "remeda";
import { FavoritesByStartTimes } from "./FavoritesByStartTimes";
import { ProgramItem } from "shared/types/models/programItem";
import { RaisedCard } from "client/components/RaisedCard";
import {
EmptyContentContainer,
MyProgramHeader,
MyProgramSecondaryText,
ShowAllButton,
} from "client/views/my-program-items/components/shared";
interface Props {
favoriteProgramItems: readonly ProgramItem[];
showAllProgramItems: boolean;
setShowAllProgramItems: (showAllProgramItems: boolean) => void;
}
export const MyFavoritesList = ({
favoriteProgramItems,
showAllProgramItems,
setShowAllProgramItems,
}: Props): ReactElement => {
const { t } = useTranslation();
const sortedFavoriteProgramItems: readonly ProgramItem[] = sortBy(
favoriteProgramItems,
(favoriteProgramItem) => favoriteProgramItem.startTime,
(favoriteProgramItem) => favoriteProgramItem.title.toLowerCase(),
);
return (
<RaisedCard data-testid="favorite-program-items-list">
<MyProgramHeader>{t("favoriteProgramItems")}</MyProgramHeader>
<div>
{favoriteProgramItems.length === 0 && (
<EmptyContentContainer>
<MyProgramSecondaryText>
{t(
showAllProgramItems
? "noFavoriteProgramItems"
: "noFutureFavoriteProgramItems",
)}
</MyProgramSecondaryText>
{!showAllProgramItems && (
<ShowAllButton
onClick={() => setShowAllProgramItems(!showAllProgramItems)}
>
{t("showAllProgramItems")}
</ShowAllButton>
)}
</EmptyContentContainer>
)}
{favoriteProgramItems.length > 0 && (
<FavoritesByStartTimes
favoriteProgramItems={sortedFavoriteProgramItems}
/>
)}
</div>
</RaisedCard>
);
};
|