Added background state varible and created lastUpdatedCell component …

…to control cell color based on date of last update
ECN · Nov 23, 2020 · 6e6492b · 6e6492b
1 parent 3872dbe
commit 6e6492b
Showing 1 changed file with 34 additions and 2 deletions.
diff --git 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>
                                 ))}