75 lines
2.1 KiB
TypeScript
75 lines
2.1 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;
|
|
|
|
const ToDoIndex: FC<ToDoIndexProps> = ({reload}) => {
|
|
|
|
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})
|
|
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>Move</span>
|
|
<input type={"checkbox"}
|
|
checked={toDo.checked}
|
|
onChange={() =>toggleCheck(toDo)}
|
|
className=""/>
|
|
<Link to={"/todos/" + toDo.id}
|
|
className={`${toDo.checked ? 'line-through' : ''} flex-1`}>
|
|
{toDo.name}
|
|
</Link>
|
|
{!toDo.checked && <span className="cursor-pointer"
|
|
onClick={() => startTrackToDo(toDo)}>
|
|
Play
|
|
</span>}
|
|
</li>)}
|
|
</ul>
|
|
</>
|
|
}
|
|
|
|
export default ToDoIndex
|
|
|
|
interface ToDoIndexProps {
|
|
reload: Date|null,
|
|
}
|