80 lines
2.5 KiB
TypeScript
80 lines
2.5 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 {Simulate} from "react-dom/test-utils";
|
|
import load = Simulate.load;
|
|
import {DraggableSVG, PlaySVG} from "../SVG";
|
|
|
|
const ToDoIndex: FC<ToDoIndexProps> = ({reload, setReload}) => {
|
|
|
|
const {loading, setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
|
|
const [toDos, setToDos] = useState<toDo[]>([])
|
|
const {startTrackToDo} = 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-1 flex justify-between`}>
|
|
<span>{toDo.name}</span>
|
|
<span className="text-gray-400 text-md mr-2">{toDo.duration} s</span>
|
|
</Link>
|
|
{!toDo.checked && <span className="cursor-pointer flex items-center"
|
|
title="Commencer"
|
|
onClick={() => startTrackToDo(toDo)}>
|
|
<PlaySVG className="w-4" />
|
|
</span>}
|
|
</li>)}
|
|
</ul>
|
|
</>
|
|
}
|
|
|
|
export default ToDoIndex
|
|
|
|
interface ToDoIndexProps {
|
|
reload: Date|null,
|
|
setReload: (date: Date) => void,
|
|
}
|