86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
import React, {FC, useEffect, useState} from "react"
|
|
import useAxiosTools from "../../hooks/AxiosTools"
|
|
import {toDo} from "../../utilities/types"
|
|
import {Link} from "react-router-dom"
|
|
import useTracker from "../../hooks/TraskerHook"
|
|
import {DraggableSVG, PauseSVG, PlaySVG} from "../SVG"
|
|
|
|
const ToDoIndex: FC<ToDoIndexProps> = ({reload, setReload}) => {
|
|
|
|
const {loading, setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
|
|
const [toDos, setToDos] = useState<toDo[]>([])
|
|
const {currentTimeTracker, startTrackToDo, stopCurrentTimeTrack} = useTracker()
|
|
|
|
useEffect(() => {
|
|
fetchToDos()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (reload && !loading) {
|
|
fetchToDos()
|
|
}
|
|
}, [reload])
|
|
|
|
const fetchToDos = async () => {
|
|
try {
|
|
const res = await axiosGet('api/todos')
|
|
setToDos(res.data)
|
|
} catch (error) {
|
|
errorCatch(error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const toggleCheck = async (toDo: toDo) => {
|
|
console.log(toDo)
|
|
try {
|
|
await axiosPut('api/todos/' + toDo.id, {checked: ! toDo.checked})
|
|
setReload(new Date())
|
|
await fetchToDos()
|
|
} catch (error) {
|
|
errorCatch(error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return <>
|
|
{errorLabel()}
|
|
<ul className="my-5">
|
|
{toDos.map(toDo => <li key={toDo.id} className="flex gap-2">
|
|
<span><DraggableSVG className="w-6" /></span>
|
|
<input type={"checkbox"}
|
|
checked={!!toDo.checked}
|
|
onChange={() =>toggleCheck(toDo)}
|
|
className=""/>
|
|
<Link to={"/todos/" + toDo.id}
|
|
className={`${toDo.checked ? 'line-through' : ''} flex flex-1 justify-between`}>
|
|
<span>{toDo.name}</span>
|
|
<span className="mr-2 text-sm text-gray-400">{toDo.duration.durationify()}</span>
|
|
</Link>
|
|
{toDo.id === currentTimeTracker?.to_do?.id
|
|
? <button className="flex w-7 cursor-pointer items-center justify-center"
|
|
type="button"
|
|
title="Commencer"
|
|
onClick={stopCurrentTimeTrack}>
|
|
<PauseSVG className="w-7"/>
|
|
</button>
|
|
: <button className="flex w-7 cursor-pointer items-center justify-center"
|
|
type="button"
|
|
title="Commencer"
|
|
onClick={() => startTrackToDo(toDo)}>
|
|
<PlaySVG className="w-4"/>
|
|
</button>}
|
|
</li>)}
|
|
</ul>
|
|
</>
|
|
}
|
|
|
|
export default ToDoIndex
|
|
|
|
interface ToDoIndexProps {
|
|
reload: Date | null,
|
|
setReload: (date: Date) => void,
|
|
}
|