Changed date format.

On the user end it displays in a human readable way. On the database it
is saved in ISO format. A lot of changes had to be made to control it.

3 files changed, 51 insertions, 9 deletions

diff --git a/src/App.jsx b/src/App.jsx
index 832db93..6f1b14f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -14,14 +14,19 @@ function App() {
     const dispatch = useDispatch();
     function handler(data) {
         data.map((todo) => {
+            const due_date = new Date(todo.dueDate);
+            const offset = due_date.getTimezoneOffset();
+
             dispatch(
                 set_todo({
                     id: todo.id,
                     text: todo.text,
                     due_date:
                         todo.dueDate != null
-                            ? todo.dueDate.substring(0, 16)
-                            : todo.dueDate,
+                            ? new Date(due_date - offset * 60 * 1000)
+                                  .toISOString()
+                                  .slice(0, -1)
+                            : "",
                     done: todo.done,
                     priority: todo.priority,
                     creation_date: todo.creationDate,
diff --git a/src/ToDo-UI/ListToDo.jsx b/src/ToDo-UI/ListToDo.jsx
index c777f8f..781f4cd 100644
--- a/src/ToDo-UI/ListToDo.jsx
+++ b/src/ToDo-UI/ListToDo.jsx
@@ -64,6 +64,14 @@ function list_of_todos(edit_button, delete_button) {
     const set_done_api = set_done_function();
     const set_undone_api = set_undone_function();
 
+    const date_options = {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    };
+
     // Table contents
     var table_head = (
         <thead>
@@ -114,7 +122,14 @@ function list_of_todos(edit_button, delete_button) {
                     </th>
                     <td>{item.text}</td>
                     <td>{item.priority}</td>
-                    <td>{item.due_date}</td>
+                    <td>
+                        {item.due_date.length == 0
+                            ? ""
+                            : new Date(item.due_date).toLocaleString(
+                                  undefined, // <- Select locale of computer.
+                                  date_options
+                              )}
+                    </td>
                     <td>
                         <div className="btn-group btn-group-sm" role="group">
                             {edit_button(item)}
@@ -164,7 +179,17 @@ export function ListToDos() {
     function handle_open_modal(id, text, due_date, done, priority) {
         set_edit_id(id);
         set_edit_text(text);
-        set_edit_due_date(due_date);
+        if (due_date.length == 0) {
+            set_edit_due_date("");
+        } else {
+            due_date = new Date(due_date);
+            const offset = due_date.getTimezoneOffset();
+            set_edit_due_date(
+                new Date(due_date - offset * 60 * 1000) // Ignore the timezone offset.
+                    .toISOString() // Convert to ISO format (YYYY-MM-DDTHH:mm:ss.sssZ)
+                    .slice(0, -1) // Get rid of the Z at the end.
+            );
+        }
         set_edit_priority(priority);
     }
     function handle_exit_modal() {
@@ -179,14 +204,20 @@ export function ListToDos() {
         edit_todo_api({
             id: edit_id,
             text: edit_text,
-            due_date: edit_due_date,
+            due_date:
+                edit_due_date.length == 0
+                    ? new Date(0)
+                    : new Date(edit_due_date).toISOString(),
             priority: edit_priority,
         });
         dispatch(
             edit_todo({
                 id: edit_id,
                 text: edit_text,
-                due_date: edit_due_date,
+                due_date:
+                    edit_due_date.length == 0
+                        ? ""
+                        : new Date(edit_due_date).toISOString(),
                 priority: edit_priority,
             })
         );
diff --git a/src/ToDo-UI/NewToDo.jsx b/src/ToDo-UI/NewToDo.jsx
index 8c926b2..dc062db 100644
--- a/src/ToDo-UI/NewToDo.jsx
+++ b/src/ToDo-UI/NewToDo.jsx
@@ -59,15 +59,21 @@ export function NewToDo() {
     function handle_add_todo() {
         new_todo_api({
             text: new_text,
-            due_date: new_due_date,
+            due_date:
+                new_due_date.length == 0
+                    ? ""
+                    : new Date(new_due_date).toISOString(),
             priority: new_priority,
         });
         dispatch(
             add_todo({
                 text: new_text,
-                due_date: new_due_date,
+                due_date:
+                    new_due_date.length == 0
+                        ? ""
+                        : new Date(new_due_date).toISOString(),
                 priority: new_priority,
-                creation_date: new Date().toString(),
+                creation_date: new Date().toISOString(),
             })
         );
         dispatch(sort_todo());