From 117b8c82ef02b95d289cd1ad22f226828918a18b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20Oliva?= <adrian.oliva@cimat.mx>
Date: Sun, 28 May 2023 14:02:01 -0600
Subject: 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.
---
 src/ToDo-UI/ListToDo.jsx | 39 +++++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

(limited to 'src/ToDo-UI/ListToDo.jsx')

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,
             })
         );
-- 
cgit v1.2.3

