66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
import React, {useEffect, useState} from "react"
|
|
import useAxiosTools from "../hooks/AxiosTools"
|
|
import {timeTracker} from "../utilities/types"
|
|
import {EditSVG, PlaySVG} from "../components/SVG"
|
|
import useTracker from "../hooks/TraskerHook"
|
|
import {Modal} from "../components/Modals"
|
|
import TimeTrackerEdit from "../components/TimeTrackers/TimeTrackerEdit"
|
|
import {Link} from "react-router-dom"
|
|
|
|
const TimeTrackersIndex = () => {
|
|
|
|
const {loading, setLoading, errorCatch, errorLabel, axiosGet} = useAxiosTools(true)
|
|
const [timeTrackers, setTimeTrackers] = useState<timeTracker[]>([])
|
|
const [showTrackers, setShowTrackers] = useState<timeTracker|null>(null)
|
|
const [reload, setReload] = useState<timeTracker|null>(null)
|
|
const {startTrackToDo} = useTracker()
|
|
|
|
useEffect(() => {
|
|
fetchTimeTrackers()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
setShowTrackers(null)
|
|
fetchTimeTrackers()
|
|
}, [reload])
|
|
|
|
const fetchTimeTrackers = async () => {
|
|
try {
|
|
const res = await axiosGet('api/time-trackers')
|
|
setTimeTrackers(res.data)
|
|
} catch (error) {
|
|
errorCatch(error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return <div className="p-5">
|
|
{errorLabel()}
|
|
<ul>
|
|
{timeTrackers.map(tracker => <li key={tracker.id} className="flex justify-between gap-5 odd:bg-blue-950">
|
|
<span className="w-24 text-center">{tracker.start_at ? (new Date(tracker.start_at)).toSmallFrDate() : ''}</span>
|
|
<span className="w-24 text-center">{(new Date(tracker.end_at)).toSmallFrDate()}</span>
|
|
<Link to={"/todos/" + tracker.to_do?.id} className={`flex-1 ${tracker.to_do?.checked ? 'line-through' : ''}`}>{tracker.to_do.name}</Link>
|
|
<span className="flex gap-2">
|
|
{!tracker?.to_do?.checked && <button className="flex w-7 cursor-pointer items-center justify-center"
|
|
type="button"
|
|
title="Commencer"
|
|
onClick={() => startTrackToDo(tracker.to_do)}>
|
|
<PlaySVG className="w-4"/>
|
|
</button>}
|
|
<button onClick={() => setShowTrackers(tracker)}>
|
|
<EditSVG className="w-5"/>
|
|
</button>
|
|
</span>
|
|
</li>)}
|
|
</ul>
|
|
|
|
<Modal show={!!showTrackers} closeModal={() => setShowTrackers(null)}>
|
|
{showTrackers && <TimeTrackerEdit timeTracker={showTrackers} setReload={setReload} />}
|
|
</Modal>
|
|
</div>
|
|
}
|
|
|
|
export default TimeTrackersIndex
|