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 94 95 96 97 98 99 100 101 102 | 356x 1x 1x 1x 1x 1x | import { ReactElement } from "react";
import { useTranslation } from "react-i18next";
import dayjs from "dayjs";
import { Link } from "react-router";
import styled from "styled-components";
import { sortBy } from "remeda";
import { getTimeNow } from "client/utils/getTimeNow";
import { useAppSelector } from "client/utils/hooks";
import {
selectActiveProgramItems,
selectHiddenProgramItems,
selectProgramTypeForTexts,
} from "client/views/admin/adminSlice";
import { AppRoute } from "client/app/AppRoutes";
import { InfoText } from "client/components/InfoText";
export const RevolvingDoorProgramItemsInfo = (): ReactElement => {
const { t } = useTranslation();
const activeProgramItems = useAppSelector(selectActiveProgramItems);
const hiddenProgramItems = useAppSelector(selectHiddenProgramItems);
const programTypeForTexts = useAppSelector(selectProgramTypeForTexts);
const hiddenProgramItemsIds = new Set(
hiddenProgramItems.map((p) => p.programItemId),
);
const timeNow = getTimeNow();
const runningRevolvingDoorProgramItems = sortBy(
activeProgramItems.filter((programItem) => {
return (
programItem.revolvingDoor &&
!hiddenProgramItemsIds.has(programItem.programItemId) &&
dayjs(programItem.startTime).isBefore(timeNow) &&
dayjs(programItem.endTime).isAfter(timeNow)
);
}),
(programItem) => programItem.title,
);
return (
<Container>
<InfoText>
{t("revolvingDoorInstruction", {
PROGRAM_TYPE: t(`programTypeIllative.${programTypeForTexts}`),
PROGRAM_TYPE2: t(`programTypeInessive.${programTypeForTexts}`),
})}
</InfoText>
{/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
{!runningRevolvingDoorProgramItems ||
runningRevolvingDoorProgramItems.length === 0 ? (
<NoProgramItemsInfoText>
{t("noRunningRevolvingDoorProgramItems", {
PROGRAM_TYPE: t(
`programTypePartitivePlural.${programTypeForTexts}`,
),
})}
</NoProgramItemsInfoText>
) : (
<div>
<h3>
{t("currentlyRunningRevolvingDoor", {
PROGRAM_TYPE: t(`programTypePlural.${programTypeForTexts}`),
})}
</h3>
{runningRevolvingDoorProgramItems.map((programItem) => (
<div key={programItem.programItemId}>
<Link
to={`${AppRoute.PROGRAM_ITEM}/${programItem.programItemId}`}
>
{programItem.title}
</Link>{" "}
<ProgramItemListShortDescription>
{programItem.shortDescription}
</ProgramItemListShortDescription>
</div>
))}
</div>
)}
</Container>
);
};
const ProgramItemListShortDescription = styled.p`
font-size: ${(props) => props.theme.fontSizeSmall};
margin: 4px 0 8px 8px;
`;
const Container = styled.div`
display: grid;
background: #fafafa;
@media (max-width: ${(props) => props.theme.breakpointPhone}) {
margin-left: 0;
margin-right: 0;
}
`;
const NoProgramItemsInfoText = styled.span`
margin-bottom: 8px;
`;
|