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/App.jsx | 4 +- src/ToDo-UI/ListToDo.jsx | 320 +++++++++++++++++++++++++++++++ src/ToDo-UI/NewToDo.jsx | 175 +++++++++++++++++ src/ToDo.jsx | 476 ----------------------------------------------- 4 files changed, 497 insertions(+), 478 deletions(-) create mode 100644 src/ToDo-UI/ListToDo.jsx create mode 100644 src/ToDo-UI/NewToDo.jsx delete mode 100644 src/ToDo.jsx diff --git a/src/App.jsx b/src/App.jsx index 80d3151..138c6b8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,6 @@ import React from "react"; -// import { Counter } from "./features/counter/Counter"; -import { NewToDo, ListToDos } from "./ToDo"; +import { NewToDo } from "./ToDo-UI/NewToDo"; +import { ListToDos } from "./ToDo-UI/ListToDo"; function App() { return ( 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)} + + ); +} diff --git a/src/ToDo.jsx b/src/ToDo.jsx deleted file mode 100644 index c64e073..0000000 --- a/src/ToDo.jsx +++ /dev/null @@ -1,476 +0,0 @@ -import React, { useState } from "react"; -import { useSelector, useDispatch } from "react-redux"; -import { - add_todo, - change_done, - remove_todo, - edit_todo, - set_sort_todo, - sort_todo, - select_todos, - select_last_index, - select_current_sorting, -} from "./features/todo/reducer"; - -export function NewToDo() { - const my_todos = useSelector(select_todos); - 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"); - } - - return ( - <> -
- -
- - - - ); -} - -function sort_table_header(prefix, current_sorting) { - if (prefix.toLowerCase().startsWith(current_sorting.substr(0, 3))) { - switch (current_sorting.substr(-1)) { - case "^": - return ( - <> - {prefix} ↑ - - ); - case "v": - return ( - <> - {prefix} ↓ - - ); - } - } else { - return ( - <> - {prefix} ⁛ - - ); - } -} - -export function ListToDos() { - const my_todos = useSelector(select_todos); - const my_sorting = useSelector(select_current_sorting); - 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) => ( - - - - - - - - ))} - -
DoneName { - dispatch( - set_sort_todo({ - where_clicked: "priority", - }) - ), - dispatch(sort_todo()); - }} - > - {sort_table_header("Priority", my_sorting)} - { - dispatch( - set_sort_todo({ - where_clicked: "due_date", - }) - ), - dispatch(sort_todo()); - }} - > - {sort_table_header("Due Date", my_sorting)} - Actions
-
- - dispatch( - change_done({ - id: item.id, - done: e.target.checked, - }) - ) - } - > -
- 		{item.text}{item.priority}{item.due_date} -
- - -
-
-
- - - - ); -} -- cgit v1.2.3