Use RelativeTime component for time values in ItemTable

ECN · Oct 28, 2020 · 7779ad4 · 7779ad4
1 parent 997f9b9
commit 7779ad4
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -1,9 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
-import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel
-    , Paper, Grid, useTheme, } from "@material-ui/core";
+import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel,
+    Paper, Grid, useTheme } from "@material-ui/core";
 import { useHistory } from "react-router-dom";
+import RelativeTime from "react-relative-time";
 import ItemTableFilter from "../ItemTableFilter/"
 
 export default function ItemTable({ data, onRowClick }) {
@@ -36,10 +37,10 @@ export default function ItemTable({ data, onRowClick }) {
             { Header: 'Subject', accessor: 'subject' },
             { Header: 'Status', accessor: 'status', },
             { Header: 'Priority', accessor: 'priority' },
-            { Header: 'Last Updated', accessor: 'lastUpdated' },
+            { Header: 'Last Updated', accessor: 'lastUpdated', Cell: ({ value }) => <RelativeTime value={value} /> },
             { Header: 'Department', accessor: 'department' },
             { Header: 'Building', accessor: 'building' },
-            { Header: 'Date Received', accessor: 'dateReceived' },
+            { Header: 'Date Received', accessor: 'dateReceived', Cell: ({ value }) => <RelativeTime value={value} /> },
         ], []);
 
     const tableInstance = useTable(
@@ -75,7 +76,6 @@ export default function ItemTable({ data, onRowClick }) {
                                                 {column.render("Filter")}
                                             </Grid>
                                             <Grid item sm={2} alignItems='center' justify='center'>
-
                                                 <TableSortLabel {...column.getSortByToggleProps()}
                                                     active={column.isSorted ? true : false}
                                                     disableRipple={false}
@@ -96,8 +96,8 @@ export default function ItemTable({ data, onRowClick }) {
                     {rows.map((row, i) => {
                         prepareRow(row);
                         return (
-                            <TableRow 
-                                onClick={ () => history.push(`/${row.original.queue}/${row.original.number}`) }
+                            <TableRow
+                                onClick={() => history.push(`/${row.original.queue}/${row.original.number}`)}
                                 className={classes.bandedRows} {...row.getRowProps()}>
                                 {row.cells.map(cell => (
                                     <TableCell {...cell.getCellProps()}>