110 lines
3.1 KiB
TypeScript
110 lines
3.1 KiB
TypeScript
import { Navigate, useNavigate, useParams } from "react-router-dom";
|
|
import styles from "./styles.module.scss";
|
|
import routes from "@/routes";
|
|
import Title from "@/components/Title";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { sleep } from "@/services/date";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
import { useSession } from "@/hooks/session/useSession";
|
|
import { ESourceAuthorization } from "@/api/resources/User";
|
|
|
|
function RelateFollowing() {
|
|
const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
|
|
const { updateSession } = useSession();
|
|
const navigate = useNavigate();
|
|
const { questionId } = useParams();
|
|
const [activeButton, setActiveButton] = useState<number | null>();
|
|
|
|
const questions: {
|
|
id:
|
|
| "time_alone"
|
|
| "own_company"
|
|
| "socializing_in_groups"
|
|
| "loneliness_avoid"
|
|
| "activities_independently";
|
|
title: string;
|
|
}[] = useMemo(
|
|
() => [
|
|
{
|
|
id: "time_alone",
|
|
title: translate("/relate-following.question1"),
|
|
},
|
|
{
|
|
id: "own_company",
|
|
title: translate("/relate-following.question2"),
|
|
},
|
|
{
|
|
id: "socializing_in_groups",
|
|
title: translate("/relate-following.question3"),
|
|
},
|
|
{
|
|
id: "loneliness_avoid",
|
|
title: translate("/relate-following.question4"),
|
|
},
|
|
{
|
|
id: "activities_independently",
|
|
title: translate("/relate-following.question5"),
|
|
},
|
|
],
|
|
[translate]
|
|
);
|
|
useEffect(() => {
|
|
setActiveButton(null);
|
|
}, [questionId]);
|
|
|
|
if (!questionId)
|
|
return <Navigate to={`${routes.client.palmistryV1RelateFollowing()}/1`} />;
|
|
|
|
const handleClick = async (answerIndex: number) => {
|
|
setActiveButton(answerIndex);
|
|
await updateSession(
|
|
{
|
|
answers: {
|
|
[questions[parseInt(questionId) - 1].id]: answerIndex + 1,
|
|
},
|
|
},
|
|
ESourceAuthorization["aura.palmistry.new"]
|
|
);
|
|
await sleep(400);
|
|
if (Number(questionId) < questions.length) {
|
|
return navigate(
|
|
`${routes.client.palmistryV1RelateFollowing()}/${
|
|
Number(questionId) + 1
|
|
}`
|
|
);
|
|
}
|
|
return navigate(routes.client.palmistryV1LetScan());
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Title variant="h2" className={styles.title}>
|
|
{translate("/relate-following.title")}
|
|
</Title>
|
|
<p className={styles.question}>
|
|
<q>{questions[parseInt(questionId) - 1].title}</q>
|
|
</p>
|
|
<div className={styles["buttons-container"]}>
|
|
{Array.from({ length: 5 }).map((_, index) => (
|
|
<button
|
|
key={index}
|
|
className={`${styles.button} ${
|
|
activeButton === index ? styles.selected : ""
|
|
}`}
|
|
onClick={() => handleClick(index)}
|
|
>
|
|
{index + 1}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className={styles["buttons-text-container"]}>
|
|
<span>{translate("/relate-following.strongly_disagree")}</span>
|
|
<span>{translate("/relate-following.strongly_agree")}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default RelateFollowing;
|