implemented logic that sets color of lastUpdated cell based on time o…

…f items last update.

src/components/ItemTable/ItemTable.js

@@ -1,7 +1,8 @@
 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, Typography } 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/"
@@ -10,30 +11,33 @@ import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 export default function ItemTable({ data }) {
     const [selectedRow, setSelecetedRow] = useState({ queue: null, number: null });
 
-    const LastUpdatedCell = ({ time }) => {
+    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 = 7 * day;
-        const month = 4 * week;
+        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]
+        }
 
-let alpha = "rgba(255, 0, 0, " + lastUpdated/now + ")";
-console.log(alpha);
-
-
-        let backgroundColor = "white"
-
-        timeDelta > month ? backgroundColor = alpha :
-        timeDelta > week ? backgroundColor = alpha :
-        timeDelta > day ? backgroundColor = alpha :
-                         backgroundColor = "white"
         return (
-
-            <TableCell style={{ backgroundColor: backgroundColor }} classes={{ root: classes.columnBorders }}>
+            <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
+            >
                 <RelativeTime value={time} />
             </TableCell>
-
         );
     };
 
@@ -103,7 +107,10 @@ console.log(alpha);
 
     return (
         <TableContainer component={Paper} >
-            <Table {...getTableProps} aria-label="Table of Queue Items" size="small" >
+            <Table {...getTableProps}
+                aria-label="Table of Queue Items"
+                size="small"
+            >
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
@@ -165,7 +172,20 @@ console.log(alpha);
                                 {row.cells.map(cell => (
 
                                     cell.render(
-                                        cell.column.id === "lastUpdated" ? <LastUpdatedCell time={cell.value}  {...cell.getCellProps()} /> : <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps()}>{cell.value}</TableCell>
+                                        //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 }}
+                                            />
+                                            :
+                                            <TableCell
+                                                {...cell.getCellProps()}
+                                                classes={{ root: classes.columnBorders }}
+                                            >
+                                                {cell.value}
+                                            </TableCell>
                                     )
 
                                 ))}