From ff4cc46041251972634a28c1f780541fd105aadc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20Oliva?= Date: Fri, 19 May 2023 15:19:11 -0600 Subject: Edit button almost done. Noticed some bugs. Will patch on later commits. --- index.html | 14 +++ src/ToDo.jsx | 286 ++++++++++++++++++++++++++++++++++--------- src/features/todo/reducer.js | 15 ++- 3 files changed, 259 insertions(+), 56 deletions(-) diff --git a/index.html b/index.html index 13bc1aa..f69b7bc 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,20 @@ }) }) +
diff --git a/src/ToDo.jsx b/src/ToDo.jsx index 3644db3..f502689 100644 --- a/src/ToDo.jsx +++ b/src/ToDo.jsx @@ -4,6 +4,7 @@ import { add_todo, change_done, remove_todo, + edit_todo, select_todos, select_last_index, } from "./features/todo/reducer"; @@ -190,70 +191,245 @@ export function ListToDos() { const my_todos = useSelector(select_todos); const dispatch = useDispatch(); + const [edit_id, set_edit_id] = useState(-1); + const [edit_text, set_edit_text] = useState(""); + const [edit_due_date, set_edit_due_date] = useState(""); + const [edit_done, set_edit_done] = useState(false); + const [edit_priority, set_edit_priority] = useState("Low"); + + function handle_open_modal(id, text, due_date, done, priority) { + set_edit_id(id); + set_edit_text(text); + set_edit_due_date(due_date); + set_edit_done(done); + set_edit_priority(priority); + } + function handle_exit_modal() { + // https://stackoverflow.com/questions/27826381/clearing-form-input-fields-in-bootstrap + $("form").get(0).reset(); // Reset form + + set_edit_id(-1); + set_edit_text(""); + set_edit_done(false); + set_edit_priority("Low"); + } + return ( -
- - - - - - - - - - - - {my_todos.map((item) => ( - - - - - - - - ))} - -
#NamePriorityDue DateActions
-
+ <> +
+ + + + + + + + + + + + {my_todos.map((item) => ( + + + + + + + + ))} + +
#NamePriorityDue DateActions
+
+ + dispatch( + change_done({ + id: item.id, + done: e.target.checked, + }) + ) + } + > +
+ 		{item.text}{item.priority}{item.due_date} +
+ + +
+
+
+ +
{item.text}{item.priority}{item.due_date} -
- -
+
+ +
-
-
+ + +
+ + +
+ + + + ); } diff --git a/src/features/todo/reducer.js b/src/features/todo/reducer.js index f12f740..a13810b 100644 --- a/src/features/todo/reducer.js +++ b/src/features/todo/reducer.js @@ -36,10 +36,23 @@ export const todo_slice = createSlice({ (todo) => todo.id != action.payload ); }, + + edit_todo: (state, action) => { + let selected_todo = state.todos.findIndex( + (x) => x.id == action.payload.id + ); + if (selected_todo == -1) return; + + state.todos[selected_todo].text = action.payload.text; + state.todos[selected_todo].due_date = action.payload.due_date; + state.todos[selected_todo].done = action.payload.done; + state.todos[selected_todo].priority = action.payload.priority; + }, }, }); -export const { add_todo, change_done, remove_todo } = todo_slice.actions; +export const { add_todo, change_done, remove_todo, edit_todo } = + todo_slice.actions; export const select_todos = (state) => state.todo_list.todos; export const select_last_index = (state) => state.todo_list.last_id; -- cgit v1.2.3