Forammting fixes, removed uneccessary overrides, fixed date received …

…render,
ECN · Dec 3, 2020 · c418a5a · c418a5a
1 parent 6b67902
commit c418a5a
Showing 1 changed file with 27 additions and 19 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -10,7 +10,6 @@ import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 
 export default function ItemTable({ data }) {
     const [selectedRow, setSelecetedRow] = useState({ queue: null, number: null });
-
     const LastUpdatedCell = ({ time, reactTableCellProps, classes }) => {
         const lastUpdated = new Date(time).getTime();
         const now = new Date().getTime();
@@ -33,8 +32,10 @@ export default function ItemTable({ data }) {
         return (
             <TableCell
                 classes={classes}
-                {...reactTableCellProps} //expands table cell props to allow access to style props
-                style={{ ...reactTableCellProps.style, backgroundColor: backgroundColor }} //expands style prop of table cell to allow addtion of custom styling without losing default styling
+                // Expands table cell props to allow access to style props.
+                {...reactTableCellProps}
+                // Expands style prop of table cell to allow addtion of custom styling without losing default styling.
+                style={{ ...reactTableCellProps.style, backgroundColor: backgroundColor }}
             >
                 <RelativeTime value={time} />
             </TableCell>
@@ -66,7 +67,6 @@ export default function ItemTable({ data }) {
             borderLeftStyle: "solid",
             borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500]
         },
-
     });
     const classes = useStyles();
 
@@ -80,10 +80,10 @@ export default function ItemTable({ data }) {
             { Header: 'Subject', accessor: 'subject' },
             { Header: 'Status', accessor: 'status', },
             { Header: 'Priority', accessor: 'priority' },
-            { Header: 'Last Updated', accessor: 'lastUpdated', Cell: ({ value }) => <LastUpdatedCell time={value} /> },
+            { Header: 'Last Updated', accessor: 'lastUpdated', },
             { Header: 'Department', accessor: 'department' },
             { Header: 'Building', accessor: 'building' },
-            { Header: 'Date Received', accessor: 'dateReceived', Cell: ({ value }) => <RelativeTime value={value} /> },
+            { Header: 'Date Received', accessor: 'dateReceived', },
         ], []);
 
     const tableInstance = useTable(
@@ -107,7 +107,8 @@ export default function ItemTable({ data }) {
 
     return (
         <TableContainer component={Paper} >
-            <Table {...getTableProps}
+            <Table
+                {...getTableProps}
                 aria-label="Table of Queue Items"
                 size="small"
             >
@@ -168,26 +169,33 @@ export default function ItemTable({ data }) {
                                 }}
                                 classes={{ root: isSelected ? classes.rowSelected : classes.bandedRows }}
                                 selected={isSelected}
-                                {...row.getRowProps()} >
+                                {...row.getRowProps()}
+                            >
                                 {row.cells.map(cell => (
 
                                     cell.render(
-                                        //conditonally renders custom cell component based on cell.column.id prop value
+                                        // Conditonally renders custom cell component based on cell.column.id prop value.
                                         cell.column.id === "lastUpdated"
-                                            ? <LastUpdatedCell
+                                            ? (<LastUpdatedCell
                                                 time={cell.value}
                                                 reactTableCellProps={cell.getCellProps()}
                                                 classes={{ root: classes.columnBorders }}
-                                            />
-                                            :
-                                            <TableCell
-                                                {...cell.getCellProps()}
-                                                classes={{ root: classes.columnBorders }}
-                                            >
-                                                {cell.value}
-                                            </TableCell>
+                                            />) :
+                                            cell.column.id === "dateReceived"
+                                                ? (<TableCell
+                                                    {...cell.getCellProps()}
+                                                    classes={{ root: classes.columnBorders }}
+                                                >
+                                                    <RelativeTime value={cell.value} />
+                                                </TableCell>)
+                                                :
+                                                <TableCell
+                                                    {...cell.getCellProps()}
+                                                    classes={{ root: classes.columnBorders }}
+                                                >
+                                                    {cell.value}
+                                                </TableCell>
                                     )
-
                                 ))}
                             </TableRow>
                         );