70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import { useUpdateStep } from "@/components/ChatsPath/hooks/useUpdateStep";
|
|
import routes from "@/routes";
|
|
import { IAnswer } from "@/components/ChatsPath/data";
|
|
import Answers from "@/components/ChatsPath/components/Answers";
|
|
import InputAnswerModal from "@/components/ChatsPath/components/InputAnswerModal";
|
|
import { useState } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { actions, selectors } from "@/store";
|
|
import { yourGoalAnswers } from "@/components/ChatsPath/data/yourGoalAnswers";
|
|
|
|
function YourGoal() {
|
|
useUpdateStep(10);
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const { goal } = useSelector(selectors.selectAnswers);
|
|
|
|
const [answer, setAnswer] = useState("");
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const handleOpen = () => setOpen(true);
|
|
const handleClose = () => setOpen(false);
|
|
|
|
const handleNext = () => {
|
|
navigate(routes.client.chatsQuizSomethingWorrying());
|
|
};
|
|
|
|
const answers: IAnswer[] = yourGoalAnswers[goal]?.map((answer) => {
|
|
return {
|
|
...answer,
|
|
onClick: answer.value === "other" ? handleOpen : handleNext,
|
|
};
|
|
});
|
|
|
|
const handleChangeAnswer = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setAnswer(event.target.value);
|
|
};
|
|
|
|
const handleModalNext = () => {
|
|
dispatch(
|
|
actions.chats.updateAnswers({
|
|
yourGoal: answer,
|
|
})
|
|
);
|
|
handleNext();
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<InputAnswerModal
|
|
open={open}
|
|
onClose={handleClose}
|
|
inputProps={{
|
|
value: answer,
|
|
onChange: handleChangeAnswer,
|
|
}}
|
|
buttonProps={{
|
|
disabled: !answer.length,
|
|
onClick: handleModalNext,
|
|
}}
|
|
/>
|
|
<h2 className={`chats-answers-title`}>What is your goal?</h2>
|
|
<Answers answers={answers} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default YourGoal;
|