NewToDo.jsx (5923B) - raw

      1 import React, { useState } from "react";
      2 import { useSelector, useDispatch } from "react-redux";
      3 import {
      4     add_todo,
      5     sort_todo,
      6     refresh_filtered_todos,
      7     select_last_index,
      8 } from "../features/todo/reducer";
      9 
     10 function new_button(trigger_id) {
     11     return (
     12         <div className="container mt-3 mb-3">
     13             <button
     14                 type="button"
     15                 className="btn btn-outline-dark"
     16                 data-bs-toggle="modal"
     17                 data-bs-target={trigger_id}
     18             >
     19                 + New To Do
     20             </button>
     21         </div>
     22     );
     23 }
     24 
     25 function new_modal(modal_id, modal_header, modal_body, modal_footer) {
     26     return (
     27         <div className="modal fade" id={modal_id} tabIndex="-1" role="dialog">
     28             <div className="modal-dialog modal-dialog-centered" role="document">
     29                 <div className="modal-content">
     30                     {modal_header}
     31                     {modal_body}
     32                     {modal_footer}
     33                 </div>
     34             </div>
     35         </div>
     36     );
     37 }
     38 
     39 export function NewToDo() {
     40     const my_last_idx = useSelector(select_last_index);
     41 
     42     const dispatch = useDispatch();
     43     const [new_text, set_new_text] = useState("");
     44     const [new_due_date, set_new_due_date] = useState("");
     45     const [new_done, set_new_done] = useState(false);
     46     const [new_priority, set_new_priority] = useState("Low");
     47 
     48     function handle_exit_modal() {
     49         // https://stackoverflow.com/questions/27826381/clearing-form-input-fields-in-bootstrap
     50         $("form").get(0).reset(); // Reset form
     51 
     52         set_new_text("");
     53         set_new_due_date("");
     54         set_new_done(false);
     55         set_new_priority("Low");
     56     }
     57     function handle_add_todo() {
     58         dispatch(
     59             add_todo({
     60                 text: new_text,
     61                 due_date: new_due_date,
     62                 done: new_done,
     63                 priority: new_priority,
     64                 creation_date: new Date().toString(),
     65             })
     66         );
     67         dispatch(sort_todo());
     68         dispatch(refresh_filtered_todos());
     69         handle_exit_modal();
     70     }
     71 
     72     // Define modal to add a new to do.
     73     var modal_header = (
     74         <div className="modal-header">
     75             <h5 className="modal-title">Add a new to do</h5>
     76             <button
     77                 type="button"
     78                 className="close"
     79                 data-bs-dismiss="modal"
     80                 aria-label="Close new to do window"
     81                 onClick={handle_exit_modal}
     82             >
     83                 <span>&times;</span>
     84             </button>
     85         </div>
     86     );
     87     var modal_footer = (
     88         <div className="modal-footer">
     89             <button
     90                 type="button"
     91                 className="btn btn-secondary"
     92                 data-bs-dismiss="modal"
     93                 onClick={handle_exit_modal}
     94             >
     95                 Cancel
     96             </button>
     97             <button
     98                 type="button"
     99                 className="btn btn-primary"
    100                 onClick={handle_add_todo}
    101                 data-bs-dismiss="modal"
    102             >
    103                 Add
    104             </button>
    105         </div>
    106     );
    107     var modal_body = (
    108         <div className="modal-body">
    109             <form>
    110                 <div className="form-floating mb-3">
    111                     <input
    112                         className="form-control"
    113                         id="new-todo-id"
    114                         value={my_last_idx + 1}
    115                         disabled
    116                     />
    117                     <label htmlFor="new-todo-id">ID</label>
    118                 </div>
    119                 <div className="form-floating mb-3">
    120                     <input
    121                         className="form-control"
    122                         placeholder="Text"
    123                         id="new-todo-text"
    124                         onChange={(e) => set_new_text(e.target.value)}
    125                     />
    126                     <label htmlFor="new-todo-text">Text</label>
    127                 </div>
    128                 <div className="input-group mb-3">
    129                     <div className="form-floating">
    130                         <input
    131                             className="form-control"
    132                             type="date"
    133                             id="new-todo-due-date"
    134                             placeholder="Due date"
    135                             onChange={(e) => {
    136                                 set_new_due_date(e.target.value);
    137                             }}
    138                         />
    139                         <label htmlFor="new-todo-due-date">Due Date</label>
    140                     </div>
    141                 </div>
    142                 <div className="form-check mb-3">
    143                     <input
    144                         className="form-check-input"
    145                         type="checkbox"
    146                         id="new-todo-done"
    147                         onClick={(e) => set_new_done(e.target.checked)}
    148                     />
    149                     <label className="form-check-label" htmlFor="new-todo-done">
    150                         Completed
    151                     </label>
    152                 </div>
    153                 <div className="form-floating mb-3">
    154                     <select
    155                         className="form-select"
    156                         id="new-todo-priority"
    157                         onChange={(e) => set_new_priority(e.target.value)}
    158                     >
    159                         <option value="Low" defaultValue>
    160                             Low
    161                         </option>
    162                         <option value="Medium">Medium</option>
    163                         <option value="High">High</option>
    164                     </select>
    165                     <label htmlFor="new-todo-priority">Priority</label>
    166                 </div>
    167             </form>
    168         </div>
    169     );
    170 
    171     return (
    172         <>
    173             {new_button("#NewToDo")}
    174             {new_modal("NewToDo", modal_header, modal_body, modal_footer)}
    175         </>
    176     );
    177 }