Implemented logic for changing cell color based on last updated time.

src/components/ItemTable/ItemTable.js

@@ -1,41 +1,41 @@
 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, Typography } from "@material-ui/core";
 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 [cellBackgroundColor, setCellBackgroundColor] = useState("#ffffff");    
-
-
-
+
     const LastUpdatedCell = ({ time }) => {
         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;
-
-        if (timeDelta > day && timeDelta < week && timeDelta < month)//more than one day since last
-         {
-            setCellBackgroundColor("yellow");
-        } else if (timeDelta > week && timeDelta < month) // more than a week since last update
-        {
-            setCellBackgroundColor("purple");
-        } else if (timeDelta > month) //more than a month since last update
-        {
-            setCellBackgroundColor("green");
-        }
-        return(
+
+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 }}>
                 <RelativeTime value={time} />
+            </TableCell>
+
         );
-      };
+    };
 
     const theme = useTheme();
     const useStyles = makeStyles({
@@ -61,7 +61,8 @@ 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();
 
@@ -75,7 +76,7 @@ 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', Cell: ({ value }) => <LastUpdatedCell time={value} /> },
             { Header: 'Department', accessor: 'department' },
             { Header: 'Building', accessor: 'building' },
             { Header: 'Date Received', accessor: 'dateReceived', Cell: ({ value }) => <RelativeTime value={value} /> },
@@ -93,7 +94,7 @@ export default function ItemTable({ data }) {
                             onChange={(event) => setFilter(event.target.value)}
                         />
                     );
-                }
+                },
             },
         },
         useFilters, useFlexLayout, useSortBy,
@@ -102,7 +103,7 @@ 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()}>
@@ -162,13 +163,11 @@ export default function ItemTable({ data }) {
                                 selected={isSelected}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
-                                    <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps(
-                                        {
-                                        style:{backgroundColor: cell.column.id==='lastUpdated' ? cellBackgroundColor : null}
-                                        },
-                                      )}>
-                                        {cell.render("Cell")}
-                                    </TableCell>
+
+                                    cell.render(
+                                        cell.column.id === "lastUpdated" ? <LastUpdatedCell time={cell.value}  {...cell.getCellProps()} /> : <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps()}>{cell.value}</TableCell>
+                                    )
+
                                 ))}
                             </TableRow>
                         );