first commit

resources/js/components/toDos/ToDoIndex.tsx

@@ -0,0 +1,74 @@
+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,
+}