48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import React, {useEffect, useState} from "react"
|
|
import useTracker from "../../hooks/TraskerHook"
|
|
import {Link} from "react-router-dom";
|
|
import {StopSVG} from "../SVG";
|
|
|
|
const Tracker = () => {
|
|
|
|
const [timer, setTimer] = useState('')
|
|
const {currentTimeTracker, stopCurrentTimeTrack} = useTracker()
|
|
|
|
useEffect(() => {
|
|
setTimer(formatTimer(currentTimeTracker?.start_at))
|
|
}, [currentTimeTracker])
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => setTimer(formatTimer(currentTimeTracker?.start_at)), 1000)
|
|
}, [timer]);
|
|
|
|
const formatTimer = (startAt: string|null|undefined) => {
|
|
if (!startAt) {
|
|
return '--:--'
|
|
}
|
|
let timer = Math.floor(((new Date()).getTime() - (new Date(startAt)).getTime()) / 1000)
|
|
return timer.durationify()
|
|
// let hours = Math.floor(timer / 3600)
|
|
// let minutes = Math.floor((timer - hours * 3600) / 60)
|
|
// let secondes = timer - hours * 3600 - minutes * 60
|
|
// return `${hours}:${String(minutes).padStart(2, '0')}:${String(secondes).padStart(2, '0')}`
|
|
}
|
|
|
|
return <div>
|
|
{currentTimeTracker
|
|
? <div className="flex gap-2">
|
|
<Link to={`/todos/${currentTimeTracker?.to_do?.id}`} className="font-bold">
|
|
{currentTimeTracker?.to_do?.name}
|
|
</Link>
|
|
<span>{timer}</span>
|
|
<button onClick={stopCurrentTimeTrack} className="flex items-center">
|
|
<StopSVG className="w-6" />
|
|
</button>
|
|
</div>
|
|
: <div>--:--</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
export default Tracker
|