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 | 356x 1124x 1124x 1124x 1764x 6744x 1124x 63x 63x 63x 63x | import { ReactElement } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "client/utils/hooks";
import { ProgramType } from "shared/types/models/programItem";
import { setActiveProgramTypes } from "client/views/admin/adminSlice";
import { MultiSelectDropdown } from "client/components/MultiSelectDropdown";
import { saveSession } from "client/utils/localStorage";
import { config } from "shared/config";
interface Props {
id: string;
className?: string;
}
export const ProgramTypeSelection = ({
id,
className,
}: Props): ReactElement => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const activeProgramTypes = useAppSelector(
(state) => state.admin.activeProgramTypes,
);
const options = config.event().activeProgramTypes.map((programType) => ({
value: programType,
title: t(`programTypeSelection.${programType}`),
}));
const setProgramTypes = (programTypes: readonly ProgramType[]): void => {
dispatch(setActiveProgramTypes(programTypes));
saveSession({
admin: { activeProgramTypes: programTypes },
});
};
return (
<MultiSelectDropdown
id={id}
options={options}
selectedValues={activeProgramTypes}
onToggle={(value) => {
const programType = value as ProgramType;
setProgramTypes(
activeProgramTypes.includes(programType)
? activeProgramTypes.filter((selected) => selected !== programType)
: [...activeProgramTypes, programType],
);
}}
onClear={() => {
setProgramTypes([]);
}}
placeholder={t("programTypeSelection.all")}
testId="program-type-filter"
className={className}
/>
);
};
|