add finish todos list

resources/js/components/toDos/ToDoFinish.tsx

@@ -0,0 +1,55 @@
+import React, {FC, useEffect, useState} from "react"
+import useAxiosTools from "../../hooks/AxiosTools";
+import {toDo} from "../../utilities/types";
+
+const ToDoFinish: FC<ToDoFinishProps>  = ({reload}) => {
+
+    const [showTodos, setShowTodos] = useState(false)
+    const {loading, setLoading, errorCatch, errorLabel, axiosGet} = useAxiosTools(true)
+    const [toDos, setToDos] = useState<toDo[]>([])
+
+    useEffect(() => {
+        if (showTodos) {
+            setLoading(true)
+            fetchFinishToDos()
+        }
+    }, [reload])
+
+    const handleShow = () => {
+        if (! showTodos) {
+            setLoading(true)
+            fetchFinishToDos()
+        }
+        setShowTodos(!showTodos)
+    }
+
+    const fetchFinishToDos = async () => {
+        try {
+            const res = await axiosGet('api/todos/finished')
+            setToDos(res.data)
+        } catch (error) {
+            errorCatch(error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return <div>
+        <button className="flex justify-between w-full bg-blue-700 px-2 py-1 rounded cursor-pointer"
+                onClick={handleShow}>
+            <h2 className="inline">Tâches terminées</h2>
+            <span>Show</span>
+        </button>
+
+        {errorLabel()}
+        {showTodos && <ul className="list-disc ml-5">
+        {toDos.map(toDo => <li key={toDo.id}>{toDo.checked ? (new Date(toDo.checked)).toSmallFrDate() : ''} {toDo.name}</li>)}
+        </ul>}
+    </div>
+}
+
+export default ToDoFinish
+
+interface ToDoFinishProps {
+    reload: Date|null,
+}

resources/js/components/toDos/ToDoIndex.tsx

@@ -6,7 +6,7 @@ import useTracker from "../../hooks/TraskerHook";
 import {Simulate} from "react-dom/test-utils";
 import load = Simulate.load;
 
-const ToDoIndex: FC<ToDoIndexProps> = ({reload}) => {
+const ToDoIndex: FC<ToDoIndexProps> = ({reload, setReload}) => {
 
     const {loading, setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
     const [toDos, setToDos] = useState<toDo[]>([])
@@ -37,6 +37,7 @@ const ToDoIndex: FC<ToDoIndexProps> = ({reload}) => {
         console.log(toDo)
         try {
             await axiosPut('api/todos/' + toDo.id, {checked: ! toDo.checked})
+            setReload(new Date())
             await fetchToDos()
         } catch (error) {
             errorCatch(error)
@@ -51,7 +52,7 @@ const ToDoIndex: FC<ToDoIndexProps> = ({reload}) => {
             {toDos.map(toDo => <li key={toDo.id} className="flex gap-2">
                 <span>Move</span>
                 <input type={"checkbox"}
-                       checked={toDo.checked}
+                       checked={!!toDo.checked}
                        onChange={() =>toggleCheck(toDo)}
                        className=""/>
                 <Link to={"/todos/" + toDo.id}
@@ -71,4 +72,5 @@ export default ToDoIndex
 
 interface ToDoIndexProps {
     reload: Date|null,
+    setReload: (date: Date) => void,
 }

resources/js/pages/Home.tsx

@@ -2,6 +2,7 @@ import React, {useState} from "react"
 import useAuthUser from "../hooks/AuthUser";
 import ToDoStore from "../components/toDos/ToDoStore";
 import ToDoIndex from "../components/toDos/ToDoIndex";
+import ToDoFinish from "../components/toDos/ToDoFinish";
 
 const Home = () => {
 
@@ -12,7 +13,8 @@ const Home = () => {
         {authUser &&
             <div className="px-5 pt-10">
                 <ToDoStore setReload={setReload} />
-                <ToDoIndex reload={reload} />
+                <ToDoIndex reload={reload} setReload={setReload} />
+                <ToDoFinish reload={reload} />
             </div>
         }
     </div>

resources/js/utilities/types.ts

@@ -2,7 +2,7 @@ export interface toDo {
     id: number,
     user_id: number,
     name: string,
-    checked: boolean,
+    checked: string|null,
     description?: string,
 }