110 lines
3.4 KiB
TypeScript
110 lines
3.4 KiB
TypeScript
import Title from "@/components/Title";
|
|
import styles from "./styles.module.scss";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import { CircularProgressbar } from "react-circular-progressbar";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { sleep } from "@/services/date";
|
|
import { images } from "../../data";
|
|
|
|
function Processing() {
|
|
const navigate = useNavigate();
|
|
const { username } = useSelector(selectors.selectUser);
|
|
const [loadingProgress, setLoadingProgress] = useState(0);
|
|
|
|
const handleNext = useCallback(() => {
|
|
navigate(routes.client.chatsCategories());
|
|
}, [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]);
|
|
|
|
return (
|
|
<section className={styles.container}>
|
|
<Title className={styles.title} variant="h2">
|
|
<span>{username}, you are all set,</span> now we are creating your
|
|
profile
|
|
</Title>
|
|
|
|
<svg className={styles["svg-defs"]}>
|
|
<defs>
|
|
<linearGradient
|
|
id="paint0_linear"
|
|
x1="45"
|
|
y2="-9.5"
|
|
x2="53.1842"
|
|
y1="40"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop offset="4.19%" stopColor="#3639A2"></stop>
|
|
<stop offset="49.79%" stopColor="#6D4BCD"></stop>
|
|
<stop offset="81.72%" stopColor="#9D5BE9"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
<div className={styles["progress-container"]}>
|
|
<div className={styles["background-gradient"]} />
|
|
<CircularProgressbar
|
|
// counterClockwise={true}
|
|
className={styles["progress-bar"]}
|
|
styles={{
|
|
path: { stroke: "url(#paint0_linear)" },
|
|
trail: { stroke: "#D2D1F9" },
|
|
text: { fill: "#fff", fontSize: "12px" },
|
|
}}
|
|
maxValue={100}
|
|
minValue={0}
|
|
value={loadingProgress}
|
|
text={`${loadingProgress}%`}
|
|
strokeWidth={8}
|
|
/>
|
|
</div>
|
|
|
|
<ul className={styles.list}>
|
|
<li className={styles.item}>
|
|
<div className={styles.circle}>
|
|
<img src={images("done.webp")} alt="done" width="22" height="16" />
|
|
</div>
|
|
Analyzing your answers...
|
|
</li>
|
|
<li className={styles.item}>
|
|
<div className={styles.circle}>
|
|
<img src={images("done.webp")} alt="done" width="22" height="16" />
|
|
</div>
|
|
Fetching a list of available psychics...
|
|
</li>
|
|
<li className={styles.item}>
|
|
<div className={styles.circle}>
|
|
<img src={images("done.webp")} alt="done" width="22" height="16" />
|
|
</div>
|
|
Matching you to the best psychics...
|
|
</li>
|
|
<li className={styles.item}>
|
|
<div className={styles.circle}>
|
|
<img src={images("done.webp")} alt="done" width="22" height="16" />
|
|
</div>
|
|
Personalizing your experience...
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default Processing;
|