49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { useNavigate } from 'react-router-dom'
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import routes from '@/routes'
|
|
import styles from './styles.module.css'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
|
|
|
|
function BreathCircle(): JSX.Element {
|
|
const { translate } = useTranslations()
|
|
const navigate = useNavigate()
|
|
const [text, setText] = useState(translate(''))
|
|
const [counter, setCounter] = useState(0)
|
|
const handleNext = () => navigate(routes.client.breathResult())
|
|
|
|
|
|
useEffect(() => {
|
|
Promise.resolve()
|
|
.then(() => {
|
|
setText(translate('breathIn'))
|
|
return sleep(4000)
|
|
})
|
|
.then(() => {
|
|
setText(translate('hold'))
|
|
return sleep(2000)
|
|
})
|
|
.then(() => {
|
|
setText(translate('breathOut'))
|
|
return sleep(4000)
|
|
})
|
|
.then(() => {
|
|
setCounter((prevState) => prevState + 1)
|
|
if (counter === 5) {
|
|
handleNext()
|
|
}
|
|
})
|
|
}, [counter])
|
|
|
|
return (
|
|
<div className={styles['outer-circle']}>
|
|
<div className={styles['inner-circle']}>
|
|
{text}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BreathCircle
|