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 | 356x 57x 57x 2x 2x 2x 2x 57x 2x 2x 2x 2x 1x | import { ReactElement } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import styled from "styled-components";
import { sortBy } from "remeda";
import { ProgramItem } from "shared/types/models/programItem";
import { SignupQuestion } from "shared/types/models/settings";
import { getWeekdayAndTime } from "shared/utils/timeFormatter";
import { AppRoute } from "client/app/AppRoutes";
interface Props {
signupQuestions: readonly SignupQuestion[];
programItems: readonly ProgramItem[];
}
export const SignupQuestionList = ({
signupQuestions,
programItems,
}: Props): ReactElement => {
const { t } = useTranslation();
const signupQuestionsWithProgramItems = signupQuestions.flatMap(
(privateSignupQuestion) => {
const matchingProgramItem = programItems.find(
(programItem) =>
programItem.programItemId === privateSignupQuestion.programItemId,
);
Iif (!matchingProgramItem) {
return [];
}
return { ...privateSignupQuestion, programItem: matchingProgramItem };
},
);
const sortedSignupQuestions = sortBy(
signupQuestionsWithProgramItems,
(signupQuestion) => signupQuestion.programItem.startTime,
(signupQuestion) => signupQuestion.programItem.title.toLocaleLowerCase(),
);
return (
<div>
<h3>{t("signupQuestions")}</h3>
<ul>
{signupQuestions.length === 0 && <span>{t("noSignupQuestions")}</span>}
{sortedSignupQuestions.flatMap((signupQuestion) => {
const foundProgramItem = programItems.find(
(programItem) =>
programItem.programItemId === signupQuestion.programItemId,
);
Iif (!foundProgramItem) {
return [];
}
return (
<li
key={`${signupQuestion.programItemId}-${signupQuestion.questionFi}`}
>
<Link
to={`${AppRoute.PROGRAM_ITEM}/${signupQuestion.programItemId}`}
>
{foundProgramItem.title}
</Link>
<span>
: {signupQuestion.questionFi} / {signupQuestion.questionEn}
</span>{" "}
{signupQuestion.selectOptions.length > 0 && (
<span>
(
{signupQuestion.selectOptions
.map((option) => `${option.optionFi} / ${option.optionEn}`)
.join(", ")}
)
</span>
)}{" "}
{signupQuestion.private && <BoldText>({t("private")})</BoldText>}{" "}
- {t(`programType.${foundProgramItem.programType}`)} -{" "}
<span>{getWeekdayAndTime(foundProgramItem.startTime)}</span>
</li>
);
})}
</ul>
</div>
);
};
const BoldText = styled.span`
font-weight: 600;
`;
|