Now we can change the done state.

2 files changed, 20 insertions, 2 deletions

diff --git a/src/ToDo.jsx b/src/ToDo.jsx
index f6eb68c..1dbfad7 100644
--- a/src/ToDo.jsx
+++ b/src/ToDo.jsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import {
     add_todo,
+    change_done,
     select_todos,
     select_last_index,
 } from "./features/todo/reducer";
@@ -186,6 +187,7 @@ export function NewToDo() {
 
 export function ListToDos() {
     const my_todos = useSelector(select_todos);
+    const dispatch = useDispatch();
 
     return (
         <div className="container">
@@ -209,7 +211,14 @@ export function ListToDos() {
                                         type="checkbox"
                                         checked={item.done}
                                         id="flexCheckChecked"
-                                        disabled
+                                        onChange={(e) =>
+                                            dispatch(
+                                                change_done({
+                                                    id: item.id,
+                                                    done: e.target.checked,
+                                                })
+                                            )
+                                        }
                                     ></input>
                                 </div>
                             </th>
diff --git a/src/features/todo/reducer.js b/src/features/todo/reducer.js
index 0e17412..daba8bc 100644
--- a/src/features/todo/reducer.js
+++ b/src/features/todo/reducer.js
@@ -21,10 +21,19 @@ export const todo_slice = createSlice({
                 },
             ];
         },
+
+        change_done: (state, action) => {
+            let selected_todo = state.todos.findIndex(
+                (x) => x.id == action.payload.id
+            );
+            if (selected_todo == -1) return;
+
+            state.todos[selected_todo].done = action.payload.done;
+        },
     },
 });
 
-export const { add_todo } = todo_slice.actions;
+export const { add_todo, change_done } = todo_slice.actions;
 
 export const select_todos = (state) => state.todo_list.todos;
 export const select_last_index = (state) => state.todo_list.last_id;