74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
import Title from "@/components/Title";
|
|
import styles from "./styles.module.css";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { getRandomArbitrary } from "@/services/random-value";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import { getZodiacSignByDate } from "@/services/zodiac-sign";
|
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { CircularProgressbar } from "react-circular-progressbar";
|
|
|
|
function LoadingInRelationshipPage() {
|
|
const navigate = useNavigate();
|
|
const { birthdate, gender } = useSelector(selectors.selectQuestionnaire);
|
|
const [loadingProgress, setLoadingProgress] = useState(100);
|
|
const intervalRef = useRef<NodeJS.Timeout>();
|
|
const randomValue = useMemo(() => {
|
|
return [getRandomArbitrary(300, 995), getRandomArbitrary(3, 995)];
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
intervalRef.current = setInterval(() => {
|
|
if (loadingProgress <= 0) {
|
|
return handleNext();
|
|
}
|
|
setLoadingProgress((prev) => prev - 1);
|
|
}, 120);
|
|
return () => {
|
|
if (intervalRef.current) clearInterval(intervalRef.current);
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [loadingProgress]);
|
|
|
|
const handleNext = () => {
|
|
navigate(routes.client.problems());
|
|
};
|
|
|
|
return (
|
|
<section className={`${styles.page} page`}>
|
|
<div>
|
|
<Title variant="h1" className={styles.title}>
|
|
We've helped {randomValue[0]},{`${randomValue[1]}`.padStart(3, "0")}{" "}
|
|
other {gender}s with their Sun in{" "}
|
|
<span className={styles.yellow}>
|
|
{getZodiacSignByDate(birthdate)}
|
|
</span>{" "}
|
|
to increase relationship satisfaction and we can't wait to help you
|
|
too!
|
|
</Title>
|
|
<p className={styles.text}>*as of 24 February 2024</p>
|
|
</div>
|
|
{/* <LoadingCircle value={loadingProgress} /> */}
|
|
<div style={{ width: 185, height: 185 }}>
|
|
<CircularProgressbar
|
|
counterClockwise={true}
|
|
styles={{
|
|
path: { stroke: "#fff" },
|
|
trail: { stroke: "#6a3aa2" },
|
|
text: { fill: "#fff", fontSize: "16px" },
|
|
}}
|
|
maxValue={100}
|
|
minValue={0}
|
|
value={loadingProgress}
|
|
text={`${100 - loadingProgress}%`}
|
|
strokeWidth={6}
|
|
/>
|
|
</div>
|
|
<p className={styles["loading-text"]}>Connecting database...</p>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default LoadingInRelationshipPage;
|