60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import React, {useEffect, useState} from "react"
|
|
import useTracker from "../../hooks/TraskerHook"
|
|
import {Link} from "react-router-dom"
|
|
import {StopSVG} from "../SVG"
|
|
import TimeTrackerEdit from "./TimeTrackerEdit"
|
|
import {Modal} from "../Modals"
|
|
import {timeTracker} from "../../utilities/types"
|
|
|
|
const Tracker = () => {
|
|
|
|
const [timer, setTimer] = useState('')
|
|
const {currentTimeTracker, setCurrentTimeTracker, stopCurrentTimeTrack} = useTracker()
|
|
const [showTrackers, setShowTrackers] = useState<timeTracker|null>(null)
|
|
const [reload, setReload] = useState<timeTracker|null>(null)
|
|
|
|
useEffect(() => {
|
|
setTimer(formatTimer(currentTimeTracker?.start_at))
|
|
}, [currentTimeTracker])
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => setTimer(formatTimer(currentTimeTracker?.start_at)), 1000)
|
|
}, [timer])
|
|
|
|
useEffect(() => {
|
|
if (reload) {
|
|
setCurrentTimeTracker(reload)
|
|
setShowTrackers(null)
|
|
}
|
|
}, [reload])
|
|
|
|
const formatTimer = (startAt: string|null|undefined) => {
|
|
if (!startAt) {
|
|
return '--:--'
|
|
}
|
|
const timer = Math.floor(((new Date()).getTime() - (new Date(startAt)).getTime()) / 1000)
|
|
return Number(timer).durationify()
|
|
}
|
|
|
|
return <div>
|
|
{currentTimeTracker
|
|
? <div className="flex gap-2">
|
|
<Link to={`/todos/${currentTimeTracker?.to_do?.id}`} className="font-bold">
|
|
{currentTimeTracker?.to_do?.name}
|
|
</Link>
|
|
<button type="button" onClick={() => setShowTrackers(currentTimeTracker)}>{timer}</button>
|
|
<button onClick={stopCurrentTimeTrack} className="flex items-center">
|
|
<StopSVG className="w-6" />
|
|
</button>
|
|
</div>
|
|
: <div>--:--</div>
|
|
}
|
|
|
|
<Modal show={!!showTrackers} closeModal={() => setShowTrackers(null)}>
|
|
{showTrackers && <TimeTrackerEdit timeTracker={showTrackers} setReload={setReload} />}
|
|
</Modal>
|
|
</div>
|
|
}
|
|
|
|
export default Tracker
|