Skip to content

Commit

Permalink
Created ItemTableCell and LastUpdated cell components for refactoring…
Browse files Browse the repository at this point in the history 
… ItemTable
  • Loading branch information
@wrigh393
wrigh393 committed Dec 16, 2020
1 parent c418a5a commit 4c57b61
Show file tree
Hide file tree
Showing 7 changed files with 103 additions and 40 deletions.
79 changes: 39 additions & 40 deletions src/components/ItemTable/ItemTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,40 +7,42 @@ import { useHistory } from "react-router-dom";
import RelativeTime from "react-relative-time";
import ItemTableFilter from "../ItemTableFilter/"
import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
import ItemTableCell from "../ItemTableCell";
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;
// 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]
}
// 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>
);
};
// 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({
Expand Down Expand Up @@ -71,7 +73,6 @@ export default function ItemTable({ data }) {
const classes = useStyles();

const history = useHistory();

const columns = React.useMemo(
() => [
{ Header: 'Queue', accessor: 'queue', },
Expand Down Expand Up @@ -179,22 +180,20 @@ export default function ItemTable({ data }) {
? (<LastUpdatedCell
time={cell.value}
reactTableCellProps={cell.getCellProps()}
classes={{ root: classes.columnBorders }}
/>) :

/>) :
cell.column.id === "dateReceived"
? (<TableCell
{...cell.getCellProps()}
classes={{ root: classes.columnBorders }}
? (<ItemTableCell
reactTableCellProps={cell.getCellProps()}
>
<RelativeTime value={cell.value} />
</TableCell>)
</ItemTableCell>)
:
<TableCell
{...cell.getCellProps()}
classes={{ root: classes.columnBorders }}
<ItemTableCell
reactTableCellProps={cell.getCellProps()}
>
{cell.value}
</TableCell>
</ItemTableCell>
)
))}
</TableRow>
Expand Down
22 changes: 22 additions & 0 deletions src/components/ItemTableCell/ItemTableCell.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { makeStyles, TableCell, useTheme } from '@material-ui/core'
import React from 'react'

export default function ItemTableCell({ reactTableCellProps, children, style }) {

const theme = useTheme();

const useStyles = makeStyles({
columnBorders: {
borderLeftWidth: "1px",
borderLeftStyle: "solid",
borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500]
},
})

const classes = useStyles();
return (
<TableCell {...reactTableCellProps} classes={{ root: classes.columnBorders }}>
{children}
</TableCell>
);
}
Empty file added src/components/ItemTableCell/ItemTableCell.md
View file
Empty file.
3 changes: 3 additions & 0 deletions src/components/ItemTableCell/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import ItemTableCell from "./ItemTableCell";

export default ItemTableCell;
36 changes: 36 additions & 0 deletions src/components/LastUpdatedCell.js/LastUpdatedCell.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React from 'react'
import { red } from '@material-ui/core/colors';
import RelativeTime from 'react-relative-time';
import ItemTableCell from '../ItemTableCell';

export default function 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 (
<ItemTableCell
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} />
</ItemTableCell>
);
}
Empty file added src/components/LastUpdatedCell.js/LastUpdatedCell.md
View file
Empty file.
3 changes: 3 additions & 0 deletions src/components/LastUpdatedCell.js/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import LastUpdatedCell from "./ItemTableCell";

export default LastUpdatedCell;

0 comments on commit 4c57b61

Please sign in to comment.