63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { useNavigation, useSubmit } from "react-router";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import clsx from "clsx";
|
|
|
|
interface Props {
|
|
status: string;
|
|
statusToPoll: string;
|
|
intervalInSeconds?: number;
|
|
className?: string;
|
|
}
|
|
export default function PollButton({ status, statusToPoll, intervalInSeconds = 10, className }: Props) {
|
|
const navigation = useNavigation();
|
|
const submit = useSubmit();
|
|
const { t } = useTranslation();
|
|
|
|
const [countdown, setCountdown] = useState(intervalInSeconds);
|
|
|
|
useEffect(() => {
|
|
let countdownIntervalId: NodeJS.Timeout;
|
|
let refreshIntervalId: NodeJS.Timeout;
|
|
|
|
if (status === statusToPoll) {
|
|
setCountdown(intervalInSeconds);
|
|
countdownIntervalId = setInterval(() => {
|
|
setCountdown((currentCountdown) => (currentCountdown > 1 ? currentCountdown - 1 : intervalInSeconds));
|
|
}, 1000);
|
|
|
|
refreshIntervalId = setInterval(() => {
|
|
submit(null, {
|
|
method: "get",
|
|
});
|
|
}, intervalInSeconds * 1000);
|
|
}
|
|
|
|
return () => {
|
|
if (countdownIntervalId) {
|
|
clearInterval(countdownIntervalId);
|
|
}
|
|
if (refreshIntervalId) {
|
|
clearInterval(refreshIntervalId);
|
|
}
|
|
};
|
|
}, [intervalInSeconds, status, statusToPoll, submit]);
|
|
|
|
return (
|
|
<div>
|
|
<button
|
|
type="button"
|
|
className={clsx("underline", className)}
|
|
onClick={() => {
|
|
submit(null, {
|
|
method: "get",
|
|
});
|
|
setCountdown(intervalInSeconds);
|
|
}}
|
|
>
|
|
{navigation.state !== "idle" ? t("shared.refreshing") : <span>{t("shared.refreshingIn", { seconds: countdown })}</span>}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|