diff options
| -rw-r--r-- | src/ToDo.jsx | 11 | ||||
| -rw-r--r-- | src/features/todo/reducer.js | 11 |
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; |