Fetch data from todo and add checkbox handle

frontend/src/components/EisenhowerMatrix/Eisenhower.jsx

@@ -1,13 +1,20 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi";
+import { readTodoTasks } from "../../api/TaskApi";
+import axiosInstance from "../../api/configs/AxiosConfig";
 
 function EachBlog({ name, colorCode, contentList, icon }) {
-  const [tasks, setTasks] = useState(contentList);
+  const handleCheckboxChange = async (index) => {
+    const updatedTasks = [...contentList];
+    const taskId = updatedTasks[index].id;
 
-  const handleCheckboxChange = index => {
-    const updatedTasks = [...tasks];
-    updatedTasks[index].checked = !updatedTasks[index].checked;
-    setTasks(updatedTasks);
+    try {
+      await axiosInstance.patch(`todo/${taskId}/`, { completed: true });
+
+      updatedTasks[index].completed = true;
+    } catch (error) {
+      console.error('Error updating task:', error);
+    }
   };
 
   return (
@@ -18,20 +25,24 @@ function EachBlog({ name, colorCode, contentList, icon }) {
       </div>
       <hr className="my-3 h-0.5 border-t-0 bg-gray-300 opacity-100 dark:opacity-50" />
       <div className="space-y-2">
-        {tasks.length === 0 ? (
-          <p className="text-gray-500 text-center">No tasks</p>
-        ) : (
-          tasks.map((item, index) => (
+        {contentList && contentList.length > 0 ? (
+          contentList.map((item, index) => (
             <div key={index} className="flex items-start">
               <input
                 type="checkbox"
-                checked={item.checked}
+                checked={item.completed}
                 className="checkbox mt-1 mr-2"
                 onChange={() => handleCheckboxChange(index)}
               />
-              <label className="cursor-pointer">{item.text}</label>
+              <label
+                className={`cursor-pointer ${item.completed ? 'line-through text-gray-500' : ''}`}
+              >
+                {item.title}
+              </label>
             </div>
           ))
+        ) : (
+          <p className="text-gray-500 text-center">No tasks</p>
         )}
       </div>
     </div>
@@ -39,38 +50,53 @@ function EachBlog({ name, colorCode, contentList, icon }) {
 }
 
 function Eisenhower() {
-  const contentList_ui = [
-    { text: "Complete report for the meeting", checked: true },
-    { text: "Review project proposal", checked: false },
-    { text: "Submit expense report", checked: false },
-    { text: "Complete report for the meeting", checked: true },
-    { text: "Review project proposal", checked: false },
-    { text: "Submit expense report", checked: false },
-    { text: "Complete report for the meeting", checked: true },
-    { text: "Review project proposal", checked: false },
-    { text: "Submit expense report", checked: false },
-  ];
+  const [tasks, setTasks] = useState([]);
 
-  const contentList_uni = [];
-  const contentList_nui = [];
-  const contentList_nuni = [];
+  useEffect(() => {
+    readTodoTasks()
+      .then(data => {
+        console.log(data)
+        const contentList_ui = data.filter(task => task.priority === 1);
+        const contentList_uni = data.filter(task => task.priority === 2);
+        const contentList_nui = data.filter(task => task.priority === 3);
+        const contentList_nuni = data.filter(task => task.priority === 4);
+
+        setTasks({
+          contentList_ui,
+          contentList_uni,
+          contentList_nui,
+          contentList_nuni,
+        });
+      })
+      .catch(error => console.error("Error fetching tasks:", error));
+  }, []);
 
   return (
     <div className="bg-slate-100 text-left p-4 w-full">
       <div className="grid grid-rows-2 grid-cols-2 gap-2">
-        <EachBlog name="Urgent & Important" colorCode="#ff5f68" icon={<FiAlertCircle />} contentList={contentList_ui} />
-        <EachBlog name="Urgent & Not important" colorCode="#ffb000" icon={<FiClock />} contentList={contentList_uni} />
+        <EachBlog
+          name="Urgent & Important"
+          colorCode="#ff5f68"
+          icon={<FiAlertCircle />}
+          contentList={tasks.contentList_ui}
+        />
+        <EachBlog
+          name="Urgent & Not important"
+          colorCode="#ffb000"
+          icon={<FiClock />}
+          contentList={tasks.contentList_uni}
+        />
         <EachBlog
           name="Not urgent & Important"
           colorCode="#4772fa"
           icon={<FiCheckCircle />}
-          contentList={contentList_nui}
+          contentList={tasks.contentList_nui}
         />
         <EachBlog
           name="Not urgent & Not important"
           colorCode="#0cce9c"
           icon={<FiXCircle />}
-          contentList={contentList_nuni}
+          contentList={tasks.contentList_nuni}
         />
       </div>
     </div>