Lab4 finish

package.json

@@ -1,15 +1,18 @@
 {
   "name": "swpp-p3-react-tutorial",
   "version": "0.1.0",
-  "private": true,
+  "private": false,
+  "proxy": "http://127.0.0.1:8000",
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "13.5.0",
     "@types/jest": "27.5.2",
     "@types/node": "16.11.56",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
+    "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "6.3.0",

src/components/Todo/Todo.tsx

@@ -2,18 +2,22 @@ import "./Todo.css";
 
 interface IProps {
   title: string;
-  clicked?: React.MouseEventHandler<HTMLDivElement>; // Defined by React
+  clickDetail?: React.MouseEventHandler<HTMLDivElement>; // Defined by React
+  clickDone?: () => void;
+  clickDelete?: () => void;
   done: boolean;
-}
+  }
 
 const Todo = (props: IProps) => {
   return (
     <div className="Todo">
-      <div className={`text ${props.done && "done"}`} onClick={props.clicked}>
+      <div className={`text ${props.done && "done"}`} onClick={props.clickDetail} >
         {props.title}
       </div>
       {props.done && <div className="done-mark">&#x2713;</div>}
+      <button onClick={props.clickDone}>{(props.done) ? 'Undone' : 'Done'}</button>
+      <button onClick={props.clickDelete}>Delete</button>
     </div>
-  );
-};
+     );
+    };
 export default Todo;

src/components/TodoDetail/TodoDetail.tsx

@@ -1,20 +1,36 @@
 import "./TodoDetail.css";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router";
+import { AppDispatch } from "../../store";
+import { selectTodo, fetchTodo } from "../../store/slices/todo";
 
 type Props = {
   title: string;
   content: string;
 };
 
+
+
 const TodoDetail = (props: Props) => {
+const { id } = useParams();
+const dispatch = useDispatch();
+const todoState = useSelector(selectTodo);
+useEffect(() => {
+  dispatch(fetchTodo(Number(id)));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+
   return (
     <div className="TodoDetail">
       <div className="row">
         <div className="left">Name:</div>
-        <div className="right">{props.title}</div>
+        <div className="right">{todoState.selectedTodo?.title}</div>
       </div>
       <div className="row">
         <div className="left">Content:</div>
-        <div className="right">{props.content}</div>
+        <div className="right">{todoState.selectedTodo?.content}</div>
       </div>
     </div>
   );

src/containers/TodoList/NewTodo/NewTodo.tsx

@@ -1,12 +1,17 @@
 import { useState } from "react";
 import { Navigate } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { todoActions } from "../../../store/slices/todo";
+import { AppDispatch } from "../../../store";
+import { postTodo } from "../../../store/slices/todo";
 // import { useNavigate } from "react-router-dom";
 import "./NewTodo.css";
 
 export default function NewTodo() {
   const [title, setTitle] = useState<string>("");
   const [content, setContent] = useState<string>("");
   const [submitted, setSubmitted] = useState<boolean>(false);
+  const dispatch = useDispatch()
 
   // const navigate = useNavigate()
   // const postTodoHandler = () => {
@@ -16,11 +21,15 @@ export default function NewTodo() {
   //   navigate('/todos')
   // };
 
-  const postTodoHandler = () => {
+  const postTodoHandler = async () => {
     const data = { title: title, content: content };
-    alert("Submitted\n" + data.title + "\n" + data.content);
+    const result = await dispatch(postTodo(data));
+    if (result.payload) {
     setSubmitted(true);
-  };
+    } else {
+    alert("Error on post Todo");
+    }
+    };
 
   if (submitted) {
     return <Navigate to="/todos" />;