From 36941e4aeb02b4487e9e82c0c9b45e8175dabca7 Mon Sep 17 00:00:00 2001
From: padamsen_fisker <padamsen@fiskerinc.com>
Date: Thu, 30 May 2024 16:38:22 -0400
Subject: [PATCH] CEC-6042 - Add offset to Portal timestamps

---
 .../App/__snapshots__/App.test.js.snap        | 24 ++++++++--------
 .../__snapshots__/CarUpdatesTab.test.jsx.snap |  4 +--
 .../DigitalTwinTab.test.jsx.snap              |  2 +-
 .../__snapshots__/ECUsTab.test.jsx.snap       |  4 +--
 .../Contexts/CANSignalsContext.test.jsx       |  2 +-
 .../CarUpdateStatusTable.test.jsx.snap        | 10 +++----
 src/components/Controls/TRexLogs/index.jsx    |  5 ++--
 .../List/__snapshots__/index.test.jsx.snap    |  6 ++--
 src/utils/dates.js                            | 28 +++++++++++++++++--
 9 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index d55323c..aff1803 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -2857,7 +2857,7 @@ exports[`App Route /issue-info authenticated 1`] = `
                           Created
                         </b>
                         : 
-                        12/9/2022 11:16:38 PM
+                        12/09/2022 23:16:38+00:00
                       </p>
                       <img
                         alt="Issue images"
@@ -3692,7 +3692,7 @@ exports[`App Route /issues authenticated 1`] = `
                       <td
                         class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                       >
-                        12/9/2022 11:16:38 PM
+                        12/09/2022 23:16:38+00:00
                       </td>
                     </tr>
                     <tr
@@ -3725,7 +3725,7 @@ exports[`App Route /issues authenticated 1`] = `
                       <td
                         class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                       >
-                        12/9/2022 11:16:38 PM
+                        12/09/2022 23:16:38+00:00
                       </td>
                     </tr>
                   </tbody>
@@ -4492,7 +4492,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
                     class="MuiTypography-root MuiTypography-body2"
                   >
                     Created 
-                    7/1/2021 10:40:07 PM
+                    07/01/2021 22:40:07+00:00
                     .
                   </p>
                   <div
@@ -5875,12 +5875,12 @@ exports[`App Route /package-status authenticated 1`] = `
                       <td
                         class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                       >
-                        7/1/2021 10:40:07 PM
+                        07/01/2021 22:40:07+00:00
                       </td>
                       <td
                         class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                       >
-                        7/12/2021 6:22:13 PM
+                        07/12/2021 18:22:13+00:00
                       </td>
                     </tr>
                     <tr
@@ -5941,12 +5941,12 @@ exports[`App Route /package-status authenticated 1`] = `
                       <td
                         class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                       >
-                        7/1/2021 10:40:07 PM
+                        07/01/2021 22:40:07+00:00
                       </td>
                       <td
                         class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                       >
-                        7/12/2021 6:22:13 PM
+                        07/12/2021 18:22:13+00:00
                       </td>
                     </tr>
                     <tr
@@ -6007,12 +6007,12 @@ exports[`App Route /package-status authenticated 1`] = `
                       <td
                         class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                       >
-                        7/1/2021 10:40:07 PM
+                        07/01/2021 22:40:07+00:00
                       </td>
                       <td
                         class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                       >
-                        7/12/2021 6:22:13 PM
+                        07/12/2021 18:22:13+00:00
                       </td>
                     </tr>
                   </tbody>
@@ -7190,12 +7190,12 @@ exports[`App Route /packages authenticated 1`] = `
                     <td
                       class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                     >
-                      7/1/2021 10:40:07 PM
+                      07/01/2021 22:40:07+00:00
                     </td>
                     <td
                       class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                     >
-                      7/12/2021 6:22:13 PM
+                      07/12/2021 18:22:13+00:00
                     </td>
                     <td
                       class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
diff --git a/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
index 2350de1..9bc45de 100644
--- a/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
@@ -315,7 +315,7 @@ exports[`CarUpdatesTab Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    1/13/2023 2:11:33 AM
+                    01/13/2023 02:11:33+00:00
                   </td>
                 </tr>
                 <tr
@@ -334,7 +334,7 @@ exports[`CarUpdatesTab Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    1/13/2023 2:11:33 AM
+                    01/13/2023 02:11:33+00:00
                   </td>
                 </tr>
               </tbody>
diff --git a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
index 7865d21..0a9f5cc 100644
--- a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
@@ -212,7 +212,7 @@ exports[`DigitalTwinTab Render 1`] = `
                   Updated At
                 </b>
                 : 
-                7/26/2022 12:26:38 AM
+                07/26/2022 00:26:38+00:00
               </p>
             </div>
             <div
diff --git a/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap
index 7cedf5a..84b819e 100644
--- a/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap
@@ -546,7 +546,7 @@ exports[`ECUsTab Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 >
-                  7/14/2021 8:09:40 PM
+                  07/14/2021 20:09:40+00:00
                 </td>
                 <td
                   class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
@@ -659,7 +659,7 @@ exports[`ECUsTab Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 >
-                  7/14/2021 8:09:40 PM
+                  07/14/2021 20:09:40+00:00
                 </td>
                 <td
                   class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
diff --git a/src/components/Contexts/CANSignalsContext.test.jsx b/src/components/Contexts/CANSignalsContext.test.jsx
index 13be103..783a466 100644
--- a/src/components/Contexts/CANSignalsContext.test.jsx
+++ b/src/components/Contexts/CANSignalsContext.test.jsx
@@ -69,7 +69,7 @@ describe("CANSignalsContext", () => {
 
 const expectedSignalsData = [
   {
-    timestamp: "7/14/2021 8:09:40 PM",
+    timestamp: "07/14/2021 20:09:40+00:00",
     signal: "signal",
     value: 123
   },
diff --git a/src/components/Controls/CarUpdateStatusTable/__snapshots__/CarUpdateStatusTable.test.jsx.snap b/src/components/Controls/CarUpdateStatusTable/__snapshots__/CarUpdateStatusTable.test.jsx.snap
index 1e588b0..03ac0f1 100644
--- a/src/components/Controls/CarUpdateStatusTable/__snapshots__/CarUpdateStatusTable.test.jsx.snap
+++ b/src/components/Controls/CarUpdateStatusTable/__snapshots__/CarUpdateStatusTable.test.jsx.snap
@@ -117,7 +117,7 @@ exports[`CarUpdateStatusTable Render 1`] = `
           <td
             class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
           >
-            8/23/2021 5:06:38 PM
+            08/23/2021 17:06:38+00:00
           </td>
           <td
             class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -137,7 +137,7 @@ exports[`CarUpdateStatusTable Render 1`] = `
           <td
             class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
           >
-            8/23/2021 5:06:38 PM
+            08/23/2021 17:06:38+00:00
           </td>
           <td
             class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -159,7 +159,7 @@ exports[`CarUpdateStatusTable Render 1`] = `
           <td
             class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
           >
-            8/23/2021 5:06:38 PM
+            08/23/2021 17:06:38+00:00
           </td>
           <td
             class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -181,7 +181,7 @@ exports[`CarUpdateStatusTable Render 1`] = `
           <td
             class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
           >
-            8/23/2021 5:06:38 PM
+            08/23/2021 17:06:38+00:00
           </td>
           <td
             class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -203,7 +203,7 @@ exports[`CarUpdateStatusTable Render 1`] = `
           <td
             class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
           >
-            8/23/2021 5:06:38 PM
+            08/23/2021 17:06:38+00:00
           </td>
           <td
             class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
diff --git a/src/components/Controls/TRexLogs/index.jsx b/src/components/Controls/TRexLogs/index.jsx
index d1b44f7..9d0bf8a 100644
--- a/src/components/Controls/TRexLogs/index.jsx
+++ b/src/components/Controls/TRexLogs/index.jsx
@@ -24,6 +24,7 @@ import api from "../../../services/vehiclesAPI";
 import DateFnsUtils from '@date-io/date-fns';
 import { TableHead } from "@mui/material";
 import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
 import { useStatusContext } from "../../Contexts/StatusContext";
 
 const tableColumns = [
@@ -314,8 +315,8 @@ const TRexLogsTable = ({ vin, token, classes }) => {
           {getFilteredLogs(logs).slice(-getDesiredSize(), (pageIndex === 0 ? undefined : -(pageSize * pageIndex))).reverse().map((log, i) => (
             <TableRow key={log.trex_timestamp + log.cloud_timestamp} >
               <TableCell align="center">{log.level}</TableCell>
-              <TableCell align="center" style={{ wordBreak: "break-all" }}>{log.trex_timestamp}</TableCell>
-              <TableCell align="center" style={{ wordBreak: "break-all" }}>{log.cloud_timestamp}</TableCell>
+              <TableCell align="center" style={{ wordBreak: "break-all" }}>{LocalDateTimeString(log.trex_timestamp)}</TableCell>
+              <TableCell align="center" style={{ wordBreak: "break-all" }}>{LocalDateTimeString(log.cloud_timestamp)}</TableCell>
               <TableCell align="center">{log.line_number}</TableCell>
               <TableCell align="center" style={{ wordBreak: "break-all" }}>{log.filename}</TableCell>
               <TableCell align="left" style={{ wordBreak: "break-all" }}>{log.msg}</TableCell>
diff --git a/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap b/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
index 7691935..068bbbd 100644
--- a/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
+++ b/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
@@ -285,7 +285,7 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 >
-                  7/14/2021 8:09:40 PM
+                  07/14/2021 20:09:40+00:00
                 </td>
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -341,7 +341,7 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 >
-                  7/16/2021 10:09:40 PM
+                  07/16/2021 22:09:40+00:00
                 </td>
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -397,7 +397,7 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 >
-                  7/16/2021 10:09:40 PM
+                  07/16/2021 22:09:40+00:00
                 </td>
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
diff --git a/src/utils/dates.js b/src/utils/dates.js
index 02e70af..36df1f7 100644
--- a/src/utils/dates.js
+++ b/src/utils/dates.js
@@ -9,6 +9,30 @@ export const tsLocalDateTimeString = (timestamp) => {
 
 export const LocalDateTimeString = (datestring) => {
   if (!datestring) return "";
-  const date = new Date(datestring.replace(" ", "T"));
-  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+
+  // adapted from https://www.30secondsofcode.org/js/s/iso-format-date-with-timezone/
+
+  // Pad a number to 2 digits
+  const pad = n => `${Math.floor(Math.abs(n))}`.padStart(2, '0');
+
+  // Get timezone offset in ISO format (+hh:mm or -hh:mm)
+  const getTzOffset = date => {
+    const tzOffset = -date.getTimezoneOffset();
+    const diff = tzOffset >= 0 ? '+' : '-';
+    return diff + pad(tzOffset / 60) + ':' + pad(tzOffset % 60);
+  };
+
+  const toISOStringWithTimezone = date => {
+    return pad(date.getMonth() + 1) +
+      '/' + pad(date.getDate()) +
+      '/' + pad(date.getFullYear()) +
+      ' ' + pad(date.getHours()) +
+      ':' + pad(date.getMinutes()) +
+      ':' + pad(date.getSeconds()) +
+      getTzOffset(date);
+  };
+
+  return toISOStringWithTimezone(
+    new Date(datestring.replace(" ", "T"))
+  );
 };