75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import Title from "@/components/Title";
|
|
import styles from "./styles.module.scss";
|
|
import Answer from "../../components/Answer";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { actions, selectors } from "@/store";
|
|
import { sleep } from "@/services/date";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { answerTimeOut } from "../../data";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
import { useMemo } from "react";
|
|
import { usePreloadImages } from "@/hooks/preload/images";
|
|
|
|
function HeadOrHeart() {
|
|
const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const { headOrHeart } = useSelector(selectors.selectPalmistryV1Answers);
|
|
usePreloadImages([
|
|
"/v1/palmistry/money-back.svg",
|
|
"/v1/palmistry/hand.svg",
|
|
"/v1/palmistry/1_1.svg",
|
|
"/v1/palmistry/daily.svg",
|
|
"/v1/palmistry/cosmic.svg",
|
|
"/v1/palmistry/calendar.svg",
|
|
"/v1/palmistry/reviews/rebecca.png",
|
|
"/v1/palmistry/reviews/mika.png",
|
|
"/v1/palmistry/reviews/amanda.png",
|
|
"/v1/palmistry/partners.png",
|
|
]);
|
|
|
|
const answers = useMemo(
|
|
() => [
|
|
{
|
|
id: "heart",
|
|
title: translate("/head-or-heart.answer1"),
|
|
},
|
|
{
|
|
id: "head",
|
|
title: translate("/head-or-heart.answer2"),
|
|
},
|
|
{
|
|
id: "both",
|
|
title: translate("/head-or-heart.answer3"),
|
|
},
|
|
],
|
|
[translate]
|
|
);
|
|
|
|
const handleClick = async (id: string) => {
|
|
dispatch(actions.palmistryV1Answers.update({ headOrHeart: id }));
|
|
if (id !== headOrHeart) await sleep(answerTimeOut);
|
|
navigate(routes.client.palmistryV1HeadOrHeartResult());
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Title variant="h2" className={styles.title}>
|
|
{translate("/head-or-heart.title")}
|
|
</Title>
|
|
{answers.map((answers, index) => (
|
|
<Answer
|
|
key={index}
|
|
answer={answers}
|
|
isSelected={headOrHeart === answers.id}
|
|
onClick={() => handleClick(answers.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default HeadOrHeart;
|