79 lines
2.2 KiB
TypeScript
Executable File
79 lines
2.2 KiB
TypeScript
Executable File
import { IAnswer } from "@/data";
|
|
import styles from "./styles.module.css";
|
|
import Answer from "@/components/Answer";
|
|
import { useState } from "react";
|
|
import MainButton from "@/components/MainButton";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { actions, selectors } from "@/store";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
|
|
interface IMultiplyAnswersProps {
|
|
answers: IAnswer[];
|
|
}
|
|
|
|
function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
|
|
const { t } = useTranslation();
|
|
const dispatch = useDispatch();
|
|
const navigate = useNavigate();
|
|
const { currentlyAffecting } = useSelector(selectors.selectQuestionnaire);
|
|
const [selectedAnswers, setSelectedAnswers] = useState<string[]>(
|
|
currentlyAffecting?.split("$") || []
|
|
);
|
|
|
|
const handleClick = (answer: IAnswer) => {
|
|
if (selectedAnswers.includes(answer.id)) {
|
|
return setSelectedAnswers((prevState) =>
|
|
prevState.filter((item) => item !== answer.id)
|
|
);
|
|
}
|
|
if (answer.id === "none_of_these") {
|
|
return setSelectedAnswers([answer.id]);
|
|
}
|
|
if (
|
|
selectedAnswers.includes("none_of_these") &&
|
|
answer.id !== "none_of_these"
|
|
) {
|
|
return;
|
|
}
|
|
return setSelectedAnswers((prevState) => [...prevState, answer.id]);
|
|
};
|
|
|
|
const handleNext = () => {
|
|
dispatch(
|
|
actions.questionnaire.update({
|
|
currentlyAffecting: selectedAnswers.join("$"),
|
|
})
|
|
);
|
|
navigate(`${routes.client.questionnaire()}/relationships/partnerPriority`);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{answers.map((answer, index) => (
|
|
<Answer
|
|
key={index}
|
|
answer={answer}
|
|
disabled={
|
|
selectedAnswers.includes("none_of_these") &&
|
|
answer.id !== "none_of_these"
|
|
}
|
|
type="multiply"
|
|
active={selectedAnswers.includes(answer.id)}
|
|
onClick={() => handleClick(answer)}
|
|
/>
|
|
))}
|
|
<MainButton
|
|
className={styles.button}
|
|
onClick={handleNext}
|
|
disabled={!selectedAnswers.length}
|
|
>
|
|
{t("next")}
|
|
</MainButton>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default MultiplyAnswers;
|