From 81a9673271973cd1ff5b389f79b173d1544aa020 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Fri, 7 Apr 2023 10:34:22 -0700
Subject: [PATCH] CEC-4066 move date column (#314)

---
 .../DTCTimeline/DTCTimeline/index.jsx         | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/DTCTimeline/DTCTimeline/index.jsx b/src/components/DTCTimeline/DTCTimeline/index.jsx
index 13c0a6c..058b347 100644
--- a/src/components/DTCTimeline/DTCTimeline/index.jsx
+++ b/src/components/DTCTimeline/DTCTimeline/index.jsx
@@ -1,15 +1,15 @@
 import DateFnsUtils from '@date-io/date-fns';
-import { Button, CircularProgress, Grid, TableFooter, TablePagination, TableCell, Table, TableRow, TableBody} from "@material-ui/core";
+import { Button, CircularProgress, Grid, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow } from "@material-ui/core";
 import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { logger } from "../../../services/monitoring";
 import { DTCTimelineProvider, useDTCTimelineContext } from '../../Contexts/DTCTimelineContext';
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
-import { useLocalStorage } from "../../useLocalStorage";
-import clsx from "clsx";
-import TableHeaderSortable from "../../Table/HeaderSortable";
 import SearchField from '../../Controls/SearchField';
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import { useLocalStorage } from "../../useLocalStorage";
 import useStyles from "../../useStyles";
 
 const MainForm = ({ vin }) => {
@@ -28,6 +28,10 @@ const MainForm = ({ vin }) => {
   const { setMessage } = useStatusContext();
 
   const tableColumns = [
+    {
+      id: "epoch_usec",
+      label: "Date",
+    },
     {
       id: "id",
       label: "Id",
@@ -48,10 +52,6 @@ const MainForm = ({ vin }) => {
       id: "status_byte",
       label: "Status Code",
     },
-    {
-      id: "epoch_usec",
-      label: "Date",
-    },
   ];
 
   const handleSort = (_event, property) => {
@@ -189,6 +189,7 @@ const MainForm = ({ vin }) => {
             <TableBody>
               {(dtcData || []).map((dtc, index) => (
                 <TableRow key={index}>
+                  <TableCell>{formatDate(dtc.epoch_usec)}</TableCell>
                   <TableCell component="th" scope="row">
                     {dtc.id}
                   </TableCell>
@@ -196,7 +197,6 @@ const MainForm = ({ vin }) => {
                   <TableCell>{dtc.ecu_name}</TableCell>
                   <TableCell>{dtc.trouble_code}</TableCell>
                   <TableCell>{dtc.status_byte}</TableCell>
-                  <TableCell>{formatDate(dtc.epoch_usec)}</TableCell>
                 </TableRow>
               ))}
             </TableBody>
@@ -221,7 +221,7 @@ const MainForm = ({ vin }) => {
       </div>
     </div>
   );
-  
+
 };
 
 const DTCTimeline = (props) => (