Add checkbox false handle

This commit is contained in:
sosokker 2023-11-21 12:36:10 +07:00
parent 5c78ffd5f3
commit 11601df6a3

View File

@ -4,16 +4,24 @@ import { readTodoTasks } from "../../api/TaskApi";
import axiosInstance from "../../api/configs/AxiosConfig"; import axiosInstance from "../../api/configs/AxiosConfig";
function EachBlog({ name, colorCode, contentList, icon }) { function EachBlog({ name, colorCode, contentList, icon }) {
const handleCheckboxChange = async (index) => { const [tasks, setTasks] = useState(contentList);
const updatedTasks = [...contentList];
const taskId = updatedTasks[index].id;
const handleCheckboxChange = async index => {
try { try {
await axiosInstance.patch(`todo/${taskId}/`, { completed: true }); setTasks(contentList)
updatedTasks[index].completed = true; const updatedTasks = [...tasks];
const taskId = updatedTasks[index].id;
const response = await axiosInstance.patch(`todo/${taskId}/`, {
completed: !updatedTasks[index].completed,
});
updatedTasks[index].completed = response.data.completed;
setTasks(updatedTasks);
} catch (error) { } catch (error) {
console.error('Error updating task:', error); console.error("Error updating task:", error);
} }
}; };
@ -34,9 +42,7 @@ function EachBlog({ name, colorCode, contentList, icon }) {
className="checkbox mt-1 mr-2" className="checkbox mt-1 mr-2"
onChange={() => handleCheckboxChange(index)} onChange={() => handleCheckboxChange(index)}
/> />
<label <label className={`cursor-pointer ${item.completed ? "line-through text-gray-500" : ""}`}>
className={`cursor-pointer ${item.completed ? 'line-through text-gray-500' : ''}`}
>
{item.title} {item.title}
</label> </label>
</div> </div>
@ -55,7 +61,7 @@ function Eisenhower() {
useEffect(() => { useEffect(() => {
readTodoTasks() readTodoTasks()
.then(data => { .then(data => {
console.log(data) console.log(data);
const contentList_ui = data.filter(task => task.priority === 1); const contentList_ui = data.filter(task => task.priority === 1);
const contentList_uni = data.filter(task => task.priority === 2); const contentList_uni = data.filter(task => task.priority === 2);
const contentList_nui = data.filter(task => task.priority === 3); const contentList_nui = data.filter(task => task.priority === 3);
@ -72,7 +78,7 @@ function Eisenhower() {
}, []); }, []);
return ( return (
<div className="bg-slate-100 text-left p-4 w-full"> <div className="bg-slate-100 text-left p-4 w-full h-max">
<div className="grid grid-rows-2 grid-cols-2 gap-2"> <div className="grid grid-rows-2 grid-cols-2 gap-2">
<EachBlog <EachBlog
name="Urgent & Important" name="Urgent & Important"