138 lines
5.1 KiB
TypeScript
138 lines
5.1 KiB
TypeScript
import styles from "./styles.module.scss";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
import Title from "@/components/Title";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { sleep } from "@/services/date";
|
|
import { CircularProgressbar } from "react-circular-progressbar";
|
|
import routes from "@/routes";
|
|
import { usePreloadImages } from "@/hooks/preload/images";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import { getZodiacSignByDate } from "@/services/zodiac-sign";
|
|
|
|
const POINTS_COUNT = 13;
|
|
const TOTAL_ANIMATION_TIME = 24600;
|
|
|
|
function YourAnalysis() {
|
|
const navigate = useNavigate();
|
|
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
|
|
const [loadingProgress, setLoadingProgress] = useState(0);
|
|
const listRef = useRef<Array<HTMLParagraphElement | null>>([]);
|
|
|
|
const { gender, birthdate } = useSelector(selectors.selectQuestionnaire);
|
|
const zodiacSign = getZodiacSignByDate(birthdate);
|
|
usePreloadImages([
|
|
`/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`
|
|
]);
|
|
|
|
const [listHeight, setListHeight] = useState(0);
|
|
|
|
useEffect(() => {
|
|
let maxHeight = 0;
|
|
listRef.current.forEach((item) => {
|
|
if (item?.offsetHeight && item.offsetHeight > maxHeight) {
|
|
maxHeight = item.offsetHeight;
|
|
}
|
|
});
|
|
setListHeight(maxHeight);
|
|
}, [listRef]);
|
|
|
|
// const [currentPoint, setCurrentPoint] = useState(0);
|
|
|
|
const handleNext = useCallback(() => {
|
|
navigate(routes.client.compatibilityV4PalmsInformation());
|
|
}, [navigate]);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
if (loadingProgress >= 100) {
|
|
await sleep(2000);
|
|
return handleNext();
|
|
}
|
|
if (loadingProgress === 51) {
|
|
await sleep(1500);
|
|
} else if (loadingProgress === 73) {
|
|
await sleep(1500);
|
|
} else {
|
|
await sleep(200);
|
|
}
|
|
setLoadingProgress((value) => value + 1);
|
|
})();
|
|
}, [handleNext, loadingProgress]);
|
|
|
|
// const getPointsHeight = useCallback(() => {
|
|
// return listRef.current.slice(currentPoint, currentPoint + 4).reduce((acc, curr) => {
|
|
// return acc + (curr?.offsetHeight || 0) + 32;
|
|
// }, 0) - 32;
|
|
// }, [currentPoint]);
|
|
|
|
// useEffect(() => {
|
|
// (async () => {
|
|
// await sleep(TOTAL_ANIMATION_TIME / (POINTS_COUNT - 1));
|
|
// setCurrentPoint((value) => {
|
|
// if (value >= POINTS_COUNT - 4) {
|
|
// return value;
|
|
// }
|
|
// return value + 1;
|
|
// });
|
|
// })()
|
|
// }, [currentPoint])
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles["progress-container"]}>
|
|
<CircularProgressbar
|
|
// counterClockwise={true}
|
|
className={styles["progress-bar"]}
|
|
styles={{
|
|
path: { stroke: "#1A6697", strokeWidth: "8px" },
|
|
trail: { stroke: "#fff", strokeWidth: "8px" },
|
|
text: { fill: "#1A6697", fontSize: "14px" },
|
|
}}
|
|
maxValue={100}
|
|
minValue={0}
|
|
value={loadingProgress}
|
|
text={`${loadingProgress}%`}
|
|
strokeWidth={8}
|
|
/>
|
|
</div>
|
|
<Title variant="h2" className={styles.title}>
|
|
{translate("/your-analysis.title")}
|
|
</Title>
|
|
<div className={styles.list} style={{
|
|
// height: `${getPointsHeight()}px`
|
|
height: `${listHeight}px`
|
|
}}>
|
|
{Array.from(Array(POINTS_COUNT).keys()).map((index) => (
|
|
<p
|
|
key={index}
|
|
className={styles.item}
|
|
ref={(el) => listRef.current[index] = el}
|
|
style={{
|
|
// marginTop: (() => {
|
|
// if (index < currentPoint) {
|
|
// return `${-(listRef.current[index]?.offsetHeight || 0) - 32}px`
|
|
// }
|
|
// return "0px"
|
|
// })(),,
|
|
animationDuration: `${TOTAL_ANIMATION_TIME / (POINTS_COUNT)}ms`,
|
|
animationDelay: `${index * (TOTAL_ANIMATION_TIME / (POINTS_COUNT))}ms`
|
|
}}
|
|
>
|
|
{translate(`/your-analysis.point${index + 1}`)}
|
|
<span
|
|
className={styles.line}
|
|
style={{
|
|
animationDuration: `${TOTAL_ANIMATION_TIME / (POINTS_COUNT)}ms`
|
|
}}
|
|
/>
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default YourAnalysis |