Enhancement lastUpdated cell styling

src/components/ItemTable/ItemTable.js

@@ -1,15 +1,47 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
-import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme, } from "@material-ui/core";
+import { red } from '@material-ui/core/colors';
 import { useHistory } from "react-router-dom";
 import RelativeTime from "react-relative-time";
 import ItemTableFilter from "../ItemTableFilter/"
 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();
+        const timeDelta = now - lastUpdated;
+        const day = 24 * 60 * 60 * 1000;
+        const week = day * 7;
+        const month = week * 4;
+
+        let backgroundColor = "white";
+        if (timeDelta > day && timeDelta <= week) {
+            backgroundColor = red[100]
+        }
+        else if (timeDelta > week && timeDelta <= month) {
+            backgroundColor = red[300]
+        }
+        else if (timeDelta > month) {
+            backgroundColor = red[500]
+        }
+
+        return (
+            <TableCell
+                classes={classes}
+                // 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>
+        );
+    };
+
     const theme = useTheme();
     const useStyles = makeStyles({
         // Fully visible for active icons
@@ -34,7 +66,7 @@ export default function ItemTable({ data }) {
             borderLeftWidth: "1px",
             borderLeftStyle: "solid",
             borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500]
-        }
+        },
     });
     const classes = useStyles();
 
@@ -48,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 }) => <RelativeTime value={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(
@@ -66,7 +98,7 @@ export default function ItemTable({ data }) {
                             onChange={(event) => setFilter(event.target.value)}
                         />
                     );
-                }
+                },
             },
         },
         useFilters, useFlexLayout, useSortBy,
@@ -75,7 +107,11 @@ export default function ItemTable({ data }) {
 
     return (
         <TableContainer component={Paper} >
-            <Table {...getTableProps} aria-label="Table of Queue Items" >
+            <Table
+                {...getTableProps}
+                aria-label="Table of Queue Items"
+                size="small"
+            >
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
@@ -133,11 +169,33 @@ export default function ItemTable({ data }) {
                                 }}
                                 classes={{ root: isSelected ? classes.rowSelected : classes.bandedRows }}
                                 selected={isSelected}
-                                {...row.getRowProps()} >
+                                {...row.getRowProps()}
+                            >
                                 {row.cells.map(cell => (
-                                    <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps()}>
-                                        {cell.render("Cell")}
-                                    </TableCell>
+
+                                    cell.render(
+                                        // Conditonally renders custom cell component based on cell.column.id prop value.
+                                        cell.column.id === "lastUpdated"
+                                            ? (<LastUpdatedCell
+                                                time={cell.value}
+                                                reactTableCellProps={cell.getCellProps()}
+                                                classes={{ root: classes.columnBorders }}
+                                            />) :
+                                            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>
                         );