Запрос к API по условию (хуки)
Компонент использует условный рендеринг. При отправке формы (компонент Block) отправляется POST запрос на сервер и затем запускается таймер. По истечении времени таймера опять рендерится форма (Block).
Каждые 5 секунд компонент отправляет GET запрос. Из-за этого у меня таймер подлагивает каждые 5 секунд.
Подскажите, как сделать запрос к API когда таймер не запущен и прекращать запрос, когда таймер срабатывать. Ну и соответственно после истечении времени опять возобновить запросы.
Мой код
function Queue() {
const calculateTimeLeft = () => {
const stamp = blockData.stamp;
const getDate = new Date(stamp);
let minutes = getDate.getMinutes();
getDate.setMinutes(minutes + blockData.duration);
const difference = +new Date(getDate) - +new Date();
let timeLeft = {};
if (difference > 0) {
timeLeft = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60)
};
}
return timeLeft;
};
const [blockData, getBlockDate] = useState([]);
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
useEffect(() => {
const timer = setTimeout(() => {
setTimeLeft(calculateTimeLeft());
}, 1000);
return () => clearTimeout(timer);
});
useEffect(() => {
function getBlock() {
axios.get(URLs.baseUrl + URLs.block, { headers: authHeader() })
.then(res => {
console.log(res);
getBlockDate(res.data);
})
.catch(err => {
console.log(err);
})
}
getBlock();
const interval = setInterval(() => getBlock(), 5000);
return () => {
clearInterval(interval);
}
}, []);
const timerComponents = [];
Object.keys(timeLeft).forEach((interval, index) => {
if (!timeLeft[interval]) {
return;
}
timerComponents.push(
<span key={index}>{timeLeft[interval]} {" "}</span>
);
});
return (
<React.Fragment>
<div className="form__block">
{timerComponents.length ? timerComponents : <Block/>}
</div>
</div>
</React.Fragment>
);
}