From 6e6492b70efa72305340e910c449cbdd7ad5bab3 Mon Sep 17 00:00:00 2001
From: Tyler Jordan Wright <wrigh393@w2vm1.ecn.purdue.edu>
Date: Mon, 23 Nov 2020 13:31:00 -0500
Subject: [PATCH] Added background state varible and created lastUpdatedCell
 component to control cell color based on date of last update

---
 src/components/ItemTable/ItemTable.js | 36 +++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 505617f..e4017d3 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -10,6 +10,34 @@ import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 export default function ItemTable({ data }) {
     const [selectedRow, setSelecetedRow] = useState({ queue: null, number: null });
     
+    const [background, setBackground] = useState("#ffffff");    
+    
+    const setStyle = (background) => {
+        setBackground(background);
+      };
+   
+    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;
+    
+        setStyle("red");
+    
+        if (timeDelta > day && timeDelta < week && timeDelta < month) {
+            setStyle("yellow");
+        } else if (timeDelta > week && timeDelta < month) {
+            setStyle("purple");
+        } else if (timeDelta > month) {
+            setStyle("green");
+        }
+        return(
+                <RelativeTime value={time} />
+        );
+      };
+
     const theme = useTheme();
     const useStyles = makeStyles({
         // Fully visible for active icons
@@ -48,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 }) => <RelativeTime value={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} /> },
@@ -135,7 +163,11 @@ export default function ItemTable({ data }) {
                                 selected={isSelected}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
-                                    <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps()}>
+                                    <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps(
+                                        {
+                                        style:{backgroundColor: cell.column.id==='lastUpdated' ? background : null}
+                                        },
+                                      )}>
                                         {cell.render("Cell")}
                                     </TableCell>
                                 ))}