Fixed background color not displaying in LastUpdatedCell component

ECN · Dec 17, 2020 · ae03e13 · ae03e13
1 parent 4c57b61
commit ae03e13
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 34 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -12,37 +12,7 @@ import LastUpdatedCell from "../LastUpdatedCell.js/LastUpdatedCell";
 
 export default function ItemTable({ data }) {
     const [selectedRow, setSelecetedRow] = useState({ queue: null, number: null });
-    // 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 = 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]
-    //     }
-
-    //     return (
-    //         <TableCell
-    //             classes={classes}
-    //             // Expands table cell props to allow access to style props.
-    //             {...reactTableCellProps}
-    //             // Expands style prop of table cell to allow addtion of custom styling without losing default styling.
-    //             style={{ ...reactTableCellProps.style, backgroundColor: backgroundColor }}
-    //         >
-    //             <RelativeTime value={time} />
-    //         </TableCell>
-    //     );
-    // };
 
     const theme = useTheme();
     const useStyles = makeStyles({
@@ -107,7 +77,7 @@ export default function ItemTable({ data }) {
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
     return (
-        <TableContainer component={Paper} >
+        <TableContainer component={Paper}>
             <Table
                 {...getTableProps}
                 aria-label="Table of Queue Items"

diff --git a/src/components/ItemTableCell/ItemTableCell.js b/src/components/ItemTableCell/ItemTableCell.js
@@ -1,7 +1,8 @@
-import { makeStyles, TableCell, useTheme } from '@material-ui/core'
 import React from 'react'
+import PropTypes from "prop-types";
+import { makeStyles, TableCell, useTheme } from '@material-ui/core'
 
-export default function ItemTableCell({ reactTableCellProps, children, style }) {
+export default function ItemTableCell({ reactTableCellProps, backgroundColor, children }) {
 
     const theme = useTheme();
 
@@ -15,8 +16,24 @@ export default function ItemTableCell({ reactTableCellProps, children, style })
 
     const classes = useStyles();
     return (
-        <TableCell {...reactTableCellProps} classes={{ root: classes.columnBorders }}>
+        <TableCell style={{backgroundColor:backgroundColor}}  {...reactTableCellProps} classes={{ root: classes.columnBorders }}>
             {children}
         </TableCell>
     );
 }
+
+ItemTableCell.propTypes = {
+	/** Props passed from ItemTable. */
+	"reactTableProps": PropTypes.object,
+	/** Sets background color*/
+	"backgroundColor": PropTypes.string,
+	/** Child object passed to display cell data. */
+	"children": PropTypes.object,
+
+};
+
+ItemTableCell.defaultProps = {
+	"reactTableProps": {},
+	"backgroundColor": "",
+	"children": {},
+};
diff --git a/src/components/LastUpdatedCell.js/LastUpdatedCell.js b/src/components/LastUpdatedCell.js/LastUpdatedCell.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from "prop-types";
 import { red } from '@material-ui/core/colors';
 import RelativeTime from 'react-relative-time';
 import ItemTableCell from '../ItemTableCell';
@@ -29,8 +30,25 @@ export default function  LastUpdatedCell ({ time, reactTableCellProps, classes }
                 {...reactTableCellProps}
                 // Expands style prop of table cell to allow addtion of custom styling without losing default styling.
                 style={{...reactTableCellProps.style, backgroundColor: backgroundColor }}
+                backgroundColor={backgroundColor}
             >
                 <RelativeTime value={time} />
             </ItemTableCell>
         );
 }
+
+LastUpdatedCell.propTypes = {
+	/** Time value in ISO8601. */
+	"time": PropTypes.string,
+	/** Props passed from ItemTable. */
+	"reactTableProps": PropTypes.object,
+	/**Object that passes classes to the component. */
+	"classes": PropTypes.object,
+
+};
+
+LastUpdatedCell.defaultProps = {
+	"time": "",
+	"reactTableProps": {},
+	"classes": {},
+};