Heavy refactoring.

Broke `ToDo.jsx` into two separate files. Broke each function into
simpler functions. Hope this makes the whole project more readable.

1 files changed, 175 insertions, 0 deletions

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 (
+        <div className="container mt-3 mb-3">
+            <button
+                type="button"
+                className="btn btn-outline-dark"
+                data-bs-toggle="modal"
+                data-bs-target={trigger_id}
+            >
+                + New To Do
+            </button>
+        </div>
+    );
+}
+
+function new_modal(modal_id, modal_header, modal_body, modal_footer) {
+    return (
+        <div className="modal fade" id={modal_id} tabIndex="-1" role="dialog">
+            <div className="modal-dialog modal-dialog-centered" role="document">
+                <div className="modal-content">
+                    {modal_header}
+                    {modal_body}
+                    {modal_footer}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+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 = (
+        <div className="modal-header">
+            <h5 className="modal-title">Add a new to do</h5>
+            <button
+                type="button"
+                className="close"
+                data-bs-dismiss="modal"
+                aria-label="Close new to do window"
+                onClick={handle_exit_modal}
+            >
+                <span>&times;</span>
+            </button>
+        </div>
+    );
+    var modal_footer = (
+        <div className="modal-footer">
+            <button
+                type="button"
+                className="btn btn-secondary"
+                data-bs-dismiss="modal"
+                onClick={handle_exit_modal}
+            >
+                Cancel
+            </button>
+            <button
+                type="button"
+                className="btn btn-primary"
+                onClick={handle_add_todo}
+                data-bs-dismiss="modal"
+            >
+                Add
+            </button>
+        </div>
+    );
+    var modal_body = (
+        <div className="modal-body">
+            <form>
+                <div className="form-floating mb-3">
+                    <input
+                        className="form-control"
+                        id="new-todo-id"
+                        value={my_last_idx + 1}
+                        disabled
+                    />
+                    <label htmlFor="new-todo-id">ID</label>
+                </div>
+                <div className="form-floating mb-3">
+                    <input
+                        className="form-control"
+                        placeholder="Text"
+                        id="new-todo-text"
+                        onChange={(e) => set_new_text(e.target.value)}
+                    />
+                    <label htmlFor="new-todo-text">Text</label>
+                </div>
+                <div className="input-group mb-3">
+                    <div className="form-floating">
+                        <input
+                            className="form-control"
+                            type="date"
+                            id="new-todo-due-date"
+                            placeholder="Due date"
+                            onChange={(e) => {
+                                set_new_due_date(e.target.value);
+                            }}
+                        />
+                        <label htmlFor="new-todo-due-date">Due Date</label>
+                    </div>
+                </div>
+                <div className="form-check mb-3">
+                    <input
+                        className="form-check-input"
+                        type="checkbox"
+                        id="new-todo-done"
+                        onClick={(e) => set_new_done(e.target.checked)}
+                    />
+                    <label className="form-check-label" htmlFor="new-todo-done">
+                        Completed
+                    </label>
+                </div>
+                <div className="form-floating mb-3">
+                    <select
+                        className="form-select"
+                        id="new-todo-priority"
+                        onChange={(e) => set_new_priority(e.target.value)}
+                    >
+                        <option value="Low" defaultValue>
+                            Low
+                        </option>
+                        <option value="Medium">Medium</option>
+                        <option value="High">High</option>
+                    </select>
+                    <label htmlFor="new-todo-priority">Priority</label>
+                </div>
+            </form>
+        </div>
+    );
+
+    return (
+        <>
+            {new_button("#NewToDo")}
+            {new_modal("NewToDo", modal_header, modal_body, modal_footer)}
+        </>
+    );
+}