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 | 356x 4x 4x 4x 9x 4x 4x 4x 1x 4x 4x 1x | import { Fragment, ReactElement } from "react";
import { useNavigate } from "react-router";
import { useTranslation } from "react-i18next";
import { capitalize, groupBy } from "remeda";
import { getWeekdayAndTime } from "shared/utils/timeFormatter";
import { ProgramItem } from "shared/types/models/programItem";
import { useAppDispatch, useAppSelector } from "client/utils/hooks";
import { updateFavorite } from "client/utils/favorite";
import { TertiaryButton } from "client/components/TertiaryButton";
import {
MyProgramButtonContainer,
MyProgramGameTitle,
MyProgramList,
MyProgramListItem,
MyProgramTime,
} from "client/views/my-program-items/components/shared";
import { AppRoute } from "client/app/AppRoutes";
interface Props {
favoriteProgramItems: readonly ProgramItem[];
}
export const FavoritesByStartTimes = ({
favoriteProgramItems,
}: Props): ReactElement => {
const { t } = useTranslation();
const navigate = useNavigate();
const dispatch = useAppDispatch();
const username = useAppSelector((state) => state.login.username);
const groupedFavoriteProgramItems = groupBy(
favoriteProgramItems,
(favoriteProgramItem) => favoriteProgramItem.startTime,
);
const removeFavorite = async (programItem: ProgramItem): Promise<void> => {
await updateFavorite({
programItem,
action: "del",
favoriteProgramItems,
username,
dispatch,
});
};
return (
<>
{Object.entries(groupedFavoriteProgramItems).map(
([startTime, programItems]) => (
<Fragment key={startTime}>
<MyProgramTime>
{capitalize(getWeekdayAndTime(startTime))}
</MyProgramTime>
<MyProgramList>
{programItems.map((programItem) => (
<MyProgramListItem key={programItem.programItemId}>
<MyProgramGameTitle data-testid="program-item-title">
{programItem.title}
</MyProgramGameTitle>
<MyProgramButtonContainer>
<TertiaryButton
icon="circle-arrow-right"
onClick={async () => {
await navigate(
`${AppRoute.PROGRAM_ITEM}/${programItem.programItemId}`,
);
}}
>
{t("button.showInfo")}
</TertiaryButton>
<TertiaryButton
onClick={async () => {
await removeFavorite(programItem);
}}
icon={["far", "heart"]}
>
{t("button.unfavorite")}
</TertiaryButton>
</MyProgramButtonContainer>
</MyProgramListItem>
))}
</MyProgramList>
</Fragment>
),
)}
</>
);
};
|