commit 8cb67965e363a9ea602a51d6bdee1c4d1e067c54
parent 39d23e482e2909b80753202d45a12527249c37cf
Author: Adrián Oliva <[email protected]>
Date: Thu, 18 May 2023 13:53:06 -0600
Now we can change the done state.
Diffstat:
2 files changed, 20 insertions(+), 2 deletions(-)
diff --git 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
@@ -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;
