From f3852c1f5bea14e72e200389759f123b880ccfec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20Oliva?= Date: Sun, 21 May 2023 17:58:01 -0600 Subject: Heavy refactoring. Broke `ToDo.jsx` into two separate files. Broke each function into simpler functions. Hope this makes the whole project more readable. --- src/ToDo-UI/ListToDo.jsx | 320 +++++++++++++++++++++++++++++++++++++++++++++++ src/ToDo-UI/NewToDo.jsx | 175 ++++++++++++++++++++++++++ 2 files changed, 495 insertions(+) create mode 100644 src/ToDo-UI/ListToDo.jsx create mode 100644 src/ToDo-UI/NewToDo.jsx (limited to 'src/ToDo-UI') diff --git a/src/ToDo-UI/ListToDo.jsx b/src/ToDo-UI/ListToDo.jsx new file mode 100644 index 0000000..eed6e02 --- /dev/null +++ b/src/ToDo-UI/ListToDo.jsx @@ -0,0 +1,320 @@ +import React, { useState } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { + change_done, + remove_todo, + edit_todo, + set_sort_todo, + sort_todo, + select_todos, + select_current_sorting, +} from "../features/todo/reducer"; + +function sort_table_header(prefix, current_sorting) { + if (prefix.toLowerCase().startsWith(current_sorting.substr(0, 3))) { + switch (current_sorting.substr(-1)) { + case "^": + // Write Prefix and an arrow pointing up. + return ( + <> + {prefix} ↑ + + ); + case "v": + // Write Prefix and an arrow pointing down. + return ( + <> + {prefix} ↓ + + ); + } + } else { + // Write Prefix and four dots. No sorting. + return ( + <> + {prefix} ⁛ + + ); + } +} + +function list_of_todos(edit_button, delete_button) { + const dispatch = useDispatch(); + const my_todos = useSelector(select_todos); + const my_sorting = useSelector(select_current_sorting); + + function handle_sort_todos(where_clicked) { + dispatch( + set_sort_todo({ + where_clicked: where_clicked, + }) + ); + dispatch(sort_todo()); + } + + // Table contents + var table_head = ( + + + Done + Name + handle_sort_todos("priority")}> + {sort_table_header("Priority", my_sorting)} + + { + handle_sort_todos("due_date"); + }} + > + {sort_table_header("Due Date", my_sorting)} + + Actions + + + ); + + var table_body = ( + + {my_todos.map((item) => ( + + +
+ + dispatch( + change_done({ + id: item.id, + done: e.target.checked, + }) + ) + } + > +
+ + {item.text} + {item.priority} + {item.due_date} + +
+ {edit_button(item)} + {delete_button(item)} +
+ + + ))} + + ); + + return ( +
+ + {table_head} + {table_body} +
+
+ ); +} + +function new_modal(modal_id, modal_header, modal_body, modal_footer) { + return ( + + ); +} + +export function ListToDos() { + 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"); + } + function handle_edit_todo() { + dispatch( + edit_todo({ + id: edit_id, + text: edit_text, + due_date: edit_due_date, + done: edit_done, + priority: edit_priority, + }) + ); + dispatch(sort_todo()); + handle_exit_modal(); + } + + // Define Edit and Remove buttons + function edit_button(item) { + return ( + + ); + } + function delete_button(item) { + return ( + + ); + } + + // Define modal to edit a to do. + var modal_header = ( +
+
Edit a to do
+ +
+ ); + var modal_footer = ( +
+ + +
+ ); + var modal_body = ( +
+
+
+ + +
+
+ set_edit_text(e.target.value)} + /> + +
+
+
+ { + set_edit_due_date(e.target.value); + }} + /> + +
+
+
+ set_edit_done(e.target.checked)} + checked={edit_done} + /> + +
+
+ + +
+
+
+ ); + + return ( + <> + {list_of_todos(edit_button, delete_button)} + {new_modal("EditToDo", modal_header, modal_body, modal_footer)} + + ); +} diff --git a/src/ToDo-UI/NewToDo.jsx b/src/ToDo-UI/NewToDo.jsx new file mode 100644 index 0000000..28d80dc --- /dev/null +++ b/src/ToDo-UI/NewToDo.jsx @@ -0,0 +1,175 @@ +import React, { useState } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { + add_todo, + sort_todo, + select_last_index, +} from "../features/todo/reducer"; + +function new_button(trigger_id) { + return ( +
+ +
+ ); +} + +function new_modal(modal_id, modal_header, modal_body, modal_footer) { + return ( + + ); +} + +export function NewToDo() { + const my_last_idx = useSelector(select_last_index); + + const dispatch = useDispatch(); + const [new_text, set_new_text] = useState(""); + const [new_due_date, set_new_due_date] = useState(""); + const [new_done, set_new_done] = useState(false); + const [new_priority, set_new_priority] = useState("Low"); + + function handle_exit_modal() { + // https://stackoverflow.com/questions/27826381/clearing-form-input-fields-in-bootstrap + $("form").get(0).reset(); // Reset form + + set_new_text(""); + set_new_due_date(""); + set_new_done(false); + set_new_priority("Low"); + } + function handle_add_todo() { + dispatch( + add_todo({ + text: new_text, + due_date: new_due_date, + done: new_done, + priority: new_priority, + creation_date: new Date().toString(), + }) + ); + dispatch(sort_todo()); + handle_exit_modal(); + } + + // Define modal to add a new to do. + var modal_header = ( +
+
Add a new to do
+ +
+ ); + var modal_footer = ( +
+ + +
+ ); + var modal_body = ( +
+
+
+ + +
+
+ set_new_text(e.target.value)} + /> + +
+
+
+ { + set_new_due_date(e.target.value); + }} + /> + +
+
+
+ set_new_done(e.target.checked)} + /> + +
+
+ + +
+
+
+ ); + + return ( + <> + {new_button("#NewToDo")} + {new_modal("NewToDo", modal_header, modal_body, modal_footer)} + + ); +} -- cgit v1.2.3