Spaces:
Build error
Build error
File size: 1,750 Bytes
3382f47 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
import React, { useState, useEffect } from "react";
import tw from "tailwind-styled-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
interface RunButtonProps {
testRun: () => Promise<void>;
isLoading: boolean;
cutoff?: string;
isMock: boolean;
}
const RunButton: React.FC<RunButtonProps> = ({
testRun,
isLoading,
cutoff,
isMock,
}) => {
const intCutoff = cutoff ? parseInt(cutoff) : null;
const [timeElapsed, setTimeElapsed] = useState<number>(0);
useEffect(() => {
let interval: NodeJS.Timeout | null = null;
if (isLoading) {
interval = setInterval(() => {
setTimeElapsed((prevTime) => prevTime + 1);
}, 1000);
} else {
if (interval !== null) {
clearInterval(interval);
}
setTimeElapsed(0); // Reset the timer when not loading
}
return () => {
if (interval !== null) {
clearInterval(interval);
}
};
}, [isLoading]);
const timeUntilCutoff = intCutoff ? intCutoff - timeElapsed : null;
return (
<>
<RunButtonWrapper onClick={testRun}>
{!isLoading ? (
"Run Task"
) : (
<FontAwesomeIcon size="lg" icon={faCircleNotch} spin />
)}
</RunButtonWrapper>
{cutoff && isLoading && (
<>
{isMock ? (
<p>Time elapsed: {timeElapsed} seconds</p>
) : (
<p>Time until cutoff: {timeUntilCutoff} seconds</p>
)}
</>
)}
</>
);
};
export default RunButton;
const RunButtonWrapper = tw.button`
border
mt-4
py-1
px-3
w-28
rounded
flex
items-center
justify-center
`;
|