diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index bb37d7e..d591454 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/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 ( - - + - ); }; @@ -103,7 +107,10 @@ console.log(alpha); return ( - +
{headerGroups.map(headerGroup => ( @@ -165,7 +172,20 @@ console.log(alpha); {row.cells.map(cell => ( cell.render( - cell.column.id === "lastUpdated" ? : {cell.value} + //conditonally renders custom cell component based on cell.column.id prop value + cell.column.id === "lastUpdated" + ? + : + + {cell.value} + ) ))}