44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import React, {useEffect, useState} from "react"
|
|
import useTracker from "../hooks/TraskerHook"
|
|
import {Link} from "react-router-dom";
|
|
|
|
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)
|
|
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}`}>
|
|
{currentTimeTracker.to_do.name}
|
|
</Link>
|
|
<span>{timer}</span>
|
|
<button onClick={stopCurrentTimeTrack}>Stop</button>
|
|
</div>
|
|
: <div>--:--</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
export default Tracker
|