From 6e6492b70efa72305340e910c449cbdd7ad5bab3 Mon Sep 17 00:00:00 2001 From: Tyler Jordan Wright Date: Mon, 23 Nov 2020 13:31:00 -0500 Subject: [PATCH 01/21] 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( + + ); + }; + 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 }) => }, + { Header: 'Last Updated', accessor: 'lastUpdated', Cell: ({ value }) => }, { Header: 'Department', accessor: 'department' }, { Header: 'Building', accessor: 'building' }, { Header: 'Date Received', accessor: 'dateReceived', Cell: ({ value }) => }, @@ -135,7 +163,11 @@ export default function ItemTable({ data }) { selected={isSelected} {...row.getRowProps()} > {row.cells.map(cell => ( - + {cell.render("Cell")} ))} From a6d81321764222fea9a043b43e7e72ab95c61588 Mon Sep 17 00:00:00 2001 From: Tyler Jordan Wright Date: Wed, 25 Nov 2020 12:59:14 -0500 Subject: [PATCH 02/21] Removed uncesscary function and variables. Changed name of the state variable to make more specific and clear. --- src/components/ItemTable/ItemTable.js | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index e4017d3..7812195 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -10,11 +10,9 @@ 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 [cellBackgroundColor, setCellBackgroundColor] = useState("#ffffff"); - const setStyle = (background) => { - setBackground(background); - }; + const LastUpdatedCell = ({ time }) => { const lastUpdated = new Date(time).getTime(); @@ -24,14 +22,15 @@ export default function ItemTable({ data }) { 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"); + if (timeDelta > day && timeDelta < week && timeDelta < month)//more than one day since last + { + setCellBackgroundColor("yellow"); + } else if (timeDelta > week && timeDelta < month) // more than a week since last update + { + setCellBackgroundColor("purple"); + } else if (timeDelta > month) //more than a month since last update + { + setCellBackgroundColor("green"); } return( @@ -165,7 +164,7 @@ export default function ItemTable({ data }) { {row.cells.map(cell => ( {cell.render("Cell")} From ab75000531e6f12240ba745e0ab73f638770c547 Mon Sep 17 00:00:00 2001 From: Tyler Jordan Wright Date: Wed, 2 Dec 2020 17:24:15 -0500 Subject: [PATCH 03/21] Implemented logic for changing cell color based on last updated time. --- src/components/ItemTable/ItemTable.js | 59 +++++++++++++-------------- 1 file changed, 29 insertions(+), 30 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 7812195..bb37d7e 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -1,7 +1,7 @@ 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 } from "@material-ui/core"; +import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme, Typography } from "@material-ui/core"; import { useHistory } from "react-router-dom"; import RelativeTime from "react-relative-time"; import ItemTableFilter from "../ItemTableFilter/" @@ -9,11 +9,7 @@ import { ArrowDownward, ArrowUpward } from "@material-ui/icons"; export default function ItemTable({ data }) { const [selectedRow, setSelecetedRow] = useState({ queue: null, number: null }); - - const [cellBackgroundColor, setCellBackgroundColor] = useState("#ffffff"); - - - + const LastUpdatedCell = ({ time }) => { const lastUpdated = new Date(time).getTime(); const now = new Date().getTime(); @@ -21,21 +17,25 @@ export default function ItemTable({ data }) { const day = 24 * 60 * 60 * 1000; const week = 7 * day; const month = 4 * week; - - if (timeDelta > day && timeDelta < week && timeDelta < month)//more than one day since last - { - setCellBackgroundColor("yellow"); - } else if (timeDelta > week && timeDelta < month) // more than a week since last update - { - setCellBackgroundColor("purple"); - } else if (timeDelta > month) //more than a month since last update - { - setCellBackgroundColor("green"); - } - return( + +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 ( + + + + ); - }; + }; const theme = useTheme(); const useStyles = makeStyles({ @@ -61,7 +61,8 @@ export default function ItemTable({ data }) { borderLeftWidth: "1px", borderLeftStyle: "solid", borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500] - } + }, + }); const classes = useStyles(); @@ -75,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 }) => }, + { Header: 'Last Updated', accessor: 'lastUpdated', Cell: ({ value }) => }, { Header: 'Department', accessor: 'department' }, { Header: 'Building', accessor: 'building' }, { Header: 'Date Received', accessor: 'dateReceived', Cell: ({ value }) => }, @@ -93,7 +94,7 @@ export default function ItemTable({ data }) { onChange={(event) => setFilter(event.target.value)} /> ); - } + }, }, }, useFilters, useFlexLayout, useSortBy, @@ -102,7 +103,7 @@ export default function ItemTable({ data }) { return ( - +
{headerGroups.map(headerGroup => ( @@ -162,13 +163,11 @@ export default function ItemTable({ data }) { selected={isSelected} {...row.getRowProps()} > {row.cells.map(cell => ( - - {cell.render("Cell")} - + + cell.render( + cell.column.id === "lastUpdated" ? : {cell.value} + ) + ))} ); From 6b6790242c8db7112de489ea9159035ec44577b9 Mon Sep 17 00:00:00 2001 From: Tyler Jordan Wright Date: Wed, 2 Dec 2020 20:16:42 -0500 Subject: [PATCH 04/21] implemented logic that sets color of lastUpdated cell based on time of items last update. --- src/components/ItemTable/ItemTable.js | 58 ++++++++++++++++++--------- 1 file changed, 39 insertions(+), 19 deletions(-) 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} + ) ))} From c418a5adf658e12fa5e8480fceaaedb4c2c3f705 Mon Sep 17 00:00:00 2001 From: Tyler Jordan Wright Date: Wed, 2 Dec 2020 22:05:32 -0500 Subject: [PATCH 05/21] Forammting fixes, removed uneccessary overrides, fixed date received render, --- src/components/ItemTable/ItemTable.js | 46 ++++++++++++++++----------- 1 file changed, 27 insertions(+), 19 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index d591454..044a310 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -10,7 +10,6 @@ import { ArrowDownward, ArrowUpward } from "@material-ui/icons"; 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(); @@ -33,8 +32,10 @@ export default function ItemTable({ data }) { return ( @@ -66,7 +67,6 @@ export default function ItemTable({ data }) { borderLeftStyle: "solid", borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500] }, - }); const classes = useStyles(); @@ -80,10 +80,10 @@ export default function ItemTable({ data }) { { Header: 'Subject', accessor: 'subject' }, { Header: 'Status', accessor: 'status', }, { Header: 'Priority', accessor: 'priority' }, - { Header: 'Last Updated', accessor: 'lastUpdated', Cell: ({ value }) => }, + { Header: 'Last Updated', accessor: 'lastUpdated', }, { Header: 'Department', accessor: 'department' }, { Header: 'Building', accessor: 'building' }, - { Header: 'Date Received', accessor: 'dateReceived', Cell: ({ value }) => }, + { Header: 'Date Received', accessor: 'dateReceived', }, ], []); const tableInstance = useTable( @@ -107,7 +107,8 @@ export default function ItemTable({ data }) { return ( -
@@ -168,26 +169,33 @@ export default function ItemTable({ data }) { }} classes={{ root: isSelected ? classes.rowSelected : classes.bandedRows }} selected={isSelected} - {...row.getRowProps()} > + {...row.getRowProps()} + > {row.cells.map(cell => ( cell.render( - //conditonally renders custom cell component based on cell.column.id prop value + // Conditonally renders custom cell component based on cell.column.id prop value. cell.column.id === "lastUpdated" - ? - : - - {cell.value} - + />) : + cell.column.id === "dateReceived" + ? ( + + ) + : + + {cell.value} + ) - ))} ); From 4c57b614c7e9a403898c56d582f5e4f723e4cd2e Mon Sep 17 00:00:00 2001 From: wrigh393 Date: Wed, 16 Dec 2020 14:38:24 -0500 Subject: [PATCH 06/21] Created ItemTableCell and LastUpdated cell components for refactoring ItemTable --- src/components/ItemTable/ItemTable.js | 79 +++++++++---------- src/components/ItemTableCell/ItemTableCell.js | 22 ++++++ src/components/ItemTableCell/ItemTableCell.md | 0 src/components/ItemTableCell/index.js | 3 + .../LastUpdatedCell.js/LastUpdatedCell.js | 36 +++++++++ .../LastUpdatedCell.js/LastUpdatedCell.md | 0 src/components/LastUpdatedCell.js/index.js | 3 + 7 files changed, 103 insertions(+), 40 deletions(-) create mode 100644 src/components/ItemTableCell/ItemTableCell.js create mode 100644 src/components/ItemTableCell/ItemTableCell.md create mode 100644 src/components/ItemTableCell/index.js create mode 100644 src/components/LastUpdatedCell.js/LastUpdatedCell.js create mode 100644 src/components/LastUpdatedCell.js/LastUpdatedCell.md create mode 100644 src/components/LastUpdatedCell.js/index.js diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 044a310..c333551 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -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 ( - - - - ); - }; + // return ( + // + // + // + // ); + // }; const theme = useTheme(); const useStyles = makeStyles({ @@ -71,7 +73,6 @@ export default function ItemTable({ data }) { const classes = useStyles(); const history = useHistory(); - const columns = React.useMemo( () => [ { Header: 'Queue', accessor: 'queue', }, @@ -179,22 +180,20 @@ export default function ItemTable({ data }) { ? () : + + />) : cell.column.id === "dateReceived" - ? ( - ) + ) : - {cell.value} - + ) ))} diff --git a/src/components/ItemTableCell/ItemTableCell.js b/src/components/ItemTableCell/ItemTableCell.js new file mode 100644 index 0000000..7f93273 --- /dev/null +++ b/src/components/ItemTableCell/ItemTableCell.js @@ -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 ( + + {children} + + ); +} diff --git a/src/components/ItemTableCell/ItemTableCell.md b/src/components/ItemTableCell/ItemTableCell.md new file mode 100644 index 0000000..e69de29 diff --git a/src/components/ItemTableCell/index.js b/src/components/ItemTableCell/index.js new file mode 100644 index 0000000..a358a7b --- /dev/null +++ b/src/components/ItemTableCell/index.js @@ -0,0 +1,3 @@ +import ItemTableCell from "./ItemTableCell"; + +export default ItemTableCell; \ No newline at end of file diff --git a/src/components/LastUpdatedCell.js/LastUpdatedCell.js b/src/components/LastUpdatedCell.js/LastUpdatedCell.js new file mode 100644 index 0000000..27effae --- /dev/null +++ b/src/components/LastUpdatedCell.js/LastUpdatedCell.js @@ -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 ( + + + + ); +} diff --git a/src/components/LastUpdatedCell.js/LastUpdatedCell.md b/src/components/LastUpdatedCell.js/LastUpdatedCell.md new file mode 100644 index 0000000..e69de29 diff --git a/src/components/LastUpdatedCell.js/index.js b/src/components/LastUpdatedCell.js/index.js new file mode 100644 index 0000000..42d1ac9 --- /dev/null +++ b/src/components/LastUpdatedCell.js/index.js @@ -0,0 +1,3 @@ +import LastUpdatedCell from "./ItemTableCell"; + +export default LastUpdatedCell; \ No newline at end of file From ae03e1378e2a8be02147bf978f266926d8671e8f Mon Sep 17 00:00:00 2001 From: wrigh393 Date: Thu, 17 Dec 2020 12:20:11 -0500 Subject: [PATCH 07/21] Fixed background color not displaying in LastUpdatedCell component --- src/components/ItemTable/ItemTable.js | 32 +------------------ src/components/ItemTableCell/ItemTableCell.js | 23 +++++++++++-- .../LastUpdatedCell.js/LastUpdatedCell.js | 18 +++++++++++ 3 files changed, 39 insertions(+), 34 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index c333551..b6a16df 100644 --- 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 ( - // - // - // - // ); - // }; const theme = useTheme(); const useStyles = makeStyles({ @@ -107,7 +77,7 @@ export default function ItemTable({ data }) { const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance; return ( - +
+ {children} ); } + +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": {}, +}; \ No newline at end of file diff --git a/src/components/LastUpdatedCell.js/LastUpdatedCell.js b/src/components/LastUpdatedCell.js/LastUpdatedCell.js index 27effae..48e0c7e 100644 --- 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} > ); } + +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": {}, +}; \ No newline at end of file From 8ac1d92dbafbc3e84d178a7231c657617dc8a7e1 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 30 Dec 2020 15:13:54 -0500 Subject: [PATCH 08/21] Update Python requirements to fix Flask_JWT_Extended and PyJWT (cherry picked from commit 47e071538ddbe100db93ec4a8059b166d9ebd2e5) --- api/requirements.txt | 39 +++++++++++++++++++-------------------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/api/requirements.txt b/api/requirements.txt index 8a009e1..cc3692a 100644 --- a/api/requirements.txt +++ b/api/requirements.txt @@ -1,20 +1,19 @@ -aniso8601==8.0.0 -astroid==2.4.2 -click==7.1.2 -Flask==1.1.2 -Flask-RESTful==0.3.8 -gunicorn==20.0.4 -isort==4.3.21 -itsdangerous==1.1.0 -Jinja2==2.11.2 -lazy-object-proxy==1.4.3 -MarkupSafe==1.1.1 -mccabe==0.6.1 -pylint==2.5.3 -python-dateutil==2.8.1 -pytz==2020.1 -six==1.15.0 -toml==0.10.1 -typed-ast==1.4.1 -Werkzeug==1.0.1 -wrapt==1.12.1 +# See: https://pip.pypa.io/en/stable/reference/pip_install/#example-requirements-file + +# General Utilities +gunicorn +pipdeptree +pylint + +# API +python-dotenv +Flask-RESTful +python-dateutil +Flask-JWT-Extended +# Prevent upgrade to 2.x until Flask-JWT-Extended is updated to support it +PyJWT == 1.* + +# API Documentation +mkdocs +mkdocs-material +mkautodoc From 7110cdacc6763430772915151b1c20b8bfdc1347 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 30 Dec 2020 17:14:23 -0500 Subject: [PATCH 09/21] Update venv-manager to allow 60 second for requirement installation (cherry picked from commit 5dd1da95824946384fa097c7040c6c7d83943151) --- utils/venv-manager.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/utils/venv-manager.py b/utils/venv-manager.py index 72ecd3b..3bb15ce 100644 --- a/utils/venv-manager.py +++ b/utils/venv-manager.py @@ -79,7 +79,7 @@ def get_args() -> argparse.Namespace: return parser.parse_args() -def run_logged_subprocess(command: Union[str, list], timeout: int = 10, shell: bool = True) -> tuple: +def run_logged_subprocess(command: Union[str, list], timeout: int = 60, shell: bool = True) -> tuple: """Executes a shell command using subprocess with logging. stderr is redirected to stdout and stdout is pipped to logger. @@ -96,7 +96,7 @@ def run_logged_subprocess(command: Union[str, list], timeout: int = 10, shell: b Args: command (Union): The command to run. If shell=False, pass a list with the first item being the command and the subsequent items being arguments. If shell=True, pass a string as you would type it into a shell. - timeout (int): The number of seconds to wait for a program before killing it + timeout (int): The number of seconds to wait for a program before killing it. Defaults to 60. Returns: tuple: With the first value being the return code and second being the combined stdout+stderr From f36ac8e28e1cb32923bc335dae038cc22aaceabe Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 20 Jan 2021 11:49:52 -0500 Subject: [PATCH 10/21] Moved ternary statements to swtich statement for readability --- src/components/ItemTable/ItemTable.js | 51 +++++++++++++-------------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index b6a16df..cb918f4 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -2,7 +2,6 @@ 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, } 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/" @@ -13,7 +12,6 @@ import LastUpdatedCell from "../LastUpdatedCell.js/LastUpdatedCell"; export default function ItemTable({ data }) { const [selectedRow, setSelecetedRow] = useState({ queue: null, number: null }); - const theme = useTheme(); const useStyles = makeStyles({ // Fully visible for active icons @@ -129,7 +127,7 @@ export default function ItemTable({ data }) { ))} - {rows.map((row, i) => { + {rows.map((row) => { prepareRow(row); let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number return ( @@ -143,29 +141,30 @@ export default function ItemTable({ data }) { {...row.getRowProps()} > {row.cells.map(cell => ( - - cell.render( - // Conditonally renders custom cell component based on cell.column.id prop value. - cell.column.id === "lastUpdated" - ? () : - cell.column.id === "dateReceived" - ? ( - - ) - : - - {cell.value} - - ) - ))} + cell.render(_ => { + switch (cell.column.id) { + case "dateReceived": + return ( + + + + ); + case "lastUpdated": + return ( + + ); + default: + return ( + + {cell.value} + + ); + } + }) + ))}; ); })} From 375b679b2df684986bc14bb4b6cdafbb0e3b9ca5 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 20 Jan 2021 13:01:49 -0500 Subject: [PATCH 11/21] Formatting --- src/components/ItemTableCell/ItemTableCell.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/ItemTableCell/ItemTableCell.js b/src/components/ItemTableCell/ItemTableCell.js index 5561bc7..15197ee 100644 --- a/src/components/ItemTableCell/ItemTableCell.js +++ b/src/components/ItemTableCell/ItemTableCell.js @@ -16,24 +16,24 @@ export default function ItemTableCell({ reactTableCellProps, backgroundColor, ch const classes = useStyles(); return ( - + {children} ); } 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, + /** 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": {}, + "reactTableProps": {}, + "backgroundColor": "", + "children": {}, }; \ No newline at end of file From 55de97334b4200af76fb68bfe35d257de8c927e1 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 20 Jan 2021 15:07:01 -0500 Subject: [PATCH 12/21] Rename reactTableProps to TableCellProps --- src/components/ItemTable/ItemTable.js | 4 ++-- src/components/ItemTableCell/ItemTableCell.js | 15 +++++++++------ 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index cb918f4..81f7475 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -145,7 +145,7 @@ export default function ItemTable({ data }) { switch (cell.column.id) { case "dateReceived": return ( - + ); @@ -158,7 +158,7 @@ export default function ItemTable({ data }) { ); default: return ( - + {cell.value} ); diff --git a/src/components/ItemTableCell/ItemTableCell.js b/src/components/ItemTableCell/ItemTableCell.js index 15197ee..c2c906a 100644 --- a/src/components/ItemTableCell/ItemTableCell.js +++ b/src/components/ItemTableCell/ItemTableCell.js @@ -2,12 +2,11 @@ import React from 'react' import PropTypes from "prop-types"; import { makeStyles, TableCell, useTheme } from '@material-ui/core' -export default function ItemTableCell({ reactTableCellProps, backgroundColor, children }) { - +export default function ItemTableCell({ backgroundColor, children, TableCellProps }) { const theme = useTheme(); - const useStyles = makeStyles({ columnBorders: { + // Add column borders borderLeftWidth: "1px", borderLeftStyle: "solid", borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500] @@ -16,19 +15,23 @@ export default function ItemTableCell({ reactTableCellProps, backgroundColor, ch const classes = useStyles(); return ( - + {children} ); } 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, + /** Props applied to the TableCell component. */ + "TableCellProps": PropTypes.object }; From fc608a6ea2df1af0f05b6cf345446a8ed4425345 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 20 Jan 2021 15:11:33 -0500 Subject: [PATCH 13/21] Renamed folder and update exports --- src/components/ItemTable/ItemTable.js | 2 +- src/components/LastUpdatedCell.js/index.js | 3 --- .../{LastUpdatedCell.js => LastUpdatedCell}/LastUpdatedCell.js | 0 .../{LastUpdatedCell.js => LastUpdatedCell}/LastUpdatedCell.md | 0 src/components/LastUpdatedCell/index.js | 3 +++ 5 files changed, 4 insertions(+), 4 deletions(-) delete mode 100644 src/components/LastUpdatedCell.js/index.js rename src/components/{LastUpdatedCell.js => LastUpdatedCell}/LastUpdatedCell.js (100%) rename src/components/{LastUpdatedCell.js => LastUpdatedCell}/LastUpdatedCell.md (100%) create mode 100644 src/components/LastUpdatedCell/index.js diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 81f7475..6df2fdd 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -7,7 +7,7 @@ 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"; +import LastUpdatedCell from "../LastUpdatedCell/"; export default function ItemTable({ data }) { const [selectedRow, setSelecetedRow] = useState({ queue: null, number: null }); diff --git a/src/components/LastUpdatedCell.js/index.js b/src/components/LastUpdatedCell.js/index.js deleted file mode 100644 index 42d1ac9..0000000 --- a/src/components/LastUpdatedCell.js/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import LastUpdatedCell from "./ItemTableCell"; - -export default LastUpdatedCell; \ No newline at end of file diff --git a/src/components/LastUpdatedCell.js/LastUpdatedCell.js b/src/components/LastUpdatedCell/LastUpdatedCell.js similarity index 100% rename from src/components/LastUpdatedCell.js/LastUpdatedCell.js rename to src/components/LastUpdatedCell/LastUpdatedCell.js diff --git a/src/components/LastUpdatedCell.js/LastUpdatedCell.md b/src/components/LastUpdatedCell/LastUpdatedCell.md similarity index 100% rename from src/components/LastUpdatedCell.js/LastUpdatedCell.md rename to src/components/LastUpdatedCell/LastUpdatedCell.md diff --git a/src/components/LastUpdatedCell/index.js b/src/components/LastUpdatedCell/index.js new file mode 100644 index 0000000..35380d3 --- /dev/null +++ b/src/components/LastUpdatedCell/index.js @@ -0,0 +1,3 @@ +import LastUpdatedCell from "./LastUpdatedCell"; + +export default LastUpdatedCell; \ No newline at end of file From 0c3f1bbf1d5888df058f990a128bc41874c8344b Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 20 Jan 2021 15:12:36 -0500 Subject: [PATCH 14/21] Formatting --- .../LastUpdatedCell/LastUpdatedCell.js | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/src/components/LastUpdatedCell/LastUpdatedCell.js b/src/components/LastUpdatedCell/LastUpdatedCell.js index 48e0c7e..8ffc778 100644 --- a/src/components/LastUpdatedCell/LastUpdatedCell.js +++ b/src/components/LastUpdatedCell/LastUpdatedCell.js @@ -4,51 +4,51 @@ 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; +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] - } + 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 ( - - - - ); + return ( + + + + ); } 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, + /** 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": {}, + "time": "", + "reactTableProps": {}, + "classes": {}, }; \ No newline at end of file From 813438a4d5f8521d3fa9a39d412f580665a7dc86 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 20 Jan 2021 21:17:07 -0500 Subject: [PATCH 15/21] Remove unused backgroundColor prop --- src/components/ItemTableCell/ItemTableCell.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/ItemTableCell/ItemTableCell.js b/src/components/ItemTableCell/ItemTableCell.js index c2c906a..cf13a74 100644 --- a/src/components/ItemTableCell/ItemTableCell.js +++ b/src/components/ItemTableCell/ItemTableCell.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from "prop-types"; import { makeStyles, TableCell, useTheme } from '@material-ui/core' -export default function ItemTableCell({ backgroundColor, children, TableCellProps }) { +export default function ItemTableCell({ children, TableCellProps }) { const theme = useTheme(); const useStyles = makeStyles({ columnBorders: { @@ -16,7 +16,6 @@ export default function ItemTableCell({ backgroundColor, children, TableCellProp const classes = useStyles(); return ( @@ -26,17 +25,13 @@ export default function ItemTableCell({ backgroundColor, children, TableCellProp } ItemTableCell.propTypes = { - /** Sets background color*/ - "backgroundColor": PropTypes.string, /** Child object passed to display cell data. */ "children": PropTypes.object, /** Props applied to the TableCell component. */ "TableCellProps": PropTypes.object - }; ItemTableCell.defaultProps = { - "reactTableProps": {}, - "backgroundColor": "", "children": {}, + "TableCellProps": {}, }; \ No newline at end of file From 672b0f9101514c0196f0cefd547baac208b75350 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Thu, 21 Jan 2021 11:55:40 -0500 Subject: [PATCH 16/21] Refactir timeToBackgroundColor and inject background color into props --- .../LastUpdatedCell/LastUpdatedCell.js | 50 ++++++++++++------- 1 file changed, 33 insertions(+), 17 deletions(-) diff --git a/src/components/LastUpdatedCell/LastUpdatedCell.js b/src/components/LastUpdatedCell/LastUpdatedCell.js index 8ffc778..9bce6b4 100644 --- a/src/components/LastUpdatedCell/LastUpdatedCell.js +++ b/src/components/LastUpdatedCell/LastUpdatedCell.js @@ -4,51 +4,67 @@ import { red } from '@material-ui/core/colors'; import RelativeTime from 'react-relative-time'; import ItemTableCell from '../ItemTableCell'; -export default function LastUpdatedCell({ time, reactTableCellProps, classes }) { +/** + * Returns a color showing how old an item is. + * @param {string} time ISO 8601 formatted time string. + * @example + * // Returns "#e57373" + * timeToBackgroundColor("2021-01-04T11:47:00-0500") + * @returns {string} Hex color code. + */ +const timeToBackgroundColor = (time) => { 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"; + + // 1-6 days old if (timeDelta > day && timeDelta <= week) { - backgroundColor = red[100] + backgroundColor = red[100]; } + // 7-28 days old else if (timeDelta > week && timeDelta <= month) { - backgroundColor = red[300] + backgroundColor = red[300]; } + // 29+ days old else if (timeDelta > month) { - backgroundColor = red[500] + backgroundColor = red[500]; } + return backgroundColor; +} + +export default function LastUpdatedCell({ time, reactTableCellProps }) { + // Insert the calculated background color into props so it isn't overriden. + // Inspired by: https://github.com/mui-org/material-ui/issues/19479 + reactTableCellProps = { + ...reactTableCellProps, + style: { + ...reactTableCellProps.style, + backgroundColor: timeToBackgroundColor(time) + } + }; + return ( - + ); -} +}; 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": {}, }; \ No newline at end of file From 86b75a1a980118e875ba27a118f5f74ff344ad57 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Thu, 21 Jan 2021 12:01:25 -0500 Subject: [PATCH 17/21] Rename reactTableProps to ItemTableCellProps --- src/components/ItemTable/ItemTable.js | 2 +- .../LastUpdatedCell/LastUpdatedCell.js | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 6df2fdd..f05fc5f 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -153,7 +153,7 @@ export default function ItemTable({ data }) { return ( ); default: diff --git a/src/components/LastUpdatedCell/LastUpdatedCell.js b/src/components/LastUpdatedCell/LastUpdatedCell.js index 9bce6b4..6fbbc81 100644 --- a/src/components/LastUpdatedCell/LastUpdatedCell.js +++ b/src/components/LastUpdatedCell/LastUpdatedCell.js @@ -39,32 +39,32 @@ const timeToBackgroundColor = (time) => { return backgroundColor; } -export default function LastUpdatedCell({ time, reactTableCellProps }) { +export default function LastUpdatedCell({ time, ItemTableCellProps }) { // Insert the calculated background color into props so it isn't overriden. // Inspired by: https://github.com/mui-org/material-ui/issues/19479 - reactTableCellProps = { - ...reactTableCellProps, + ItemTableCellProps = { + ...ItemTableCellProps, style: { - ...reactTableCellProps.style, + ...ItemTableCellProps.style, backgroundColor: timeToBackgroundColor(time) } }; return ( - + ); }; LastUpdatedCell.propTypes = { - /** Time value in ISO8601. */ + /** ISO 8601 formatted time string. */ "time": PropTypes.string, - /** Props passed from ItemTable. */ - "reactTableProps": PropTypes.object, + /** Props to be applied to the ItemTableCell. */ + "ItemTableCellProps": PropTypes.object, }; LastUpdatedCell.defaultProps = { "time": "", - "reactTableProps": {}, + "ItemTableCellProps": {}, }; \ No newline at end of file From e3724defce7d3c3f62f239fc2673160d02343a7a Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Thu, 21 Jan 2021 13:14:07 -0500 Subject: [PATCH 18/21] Make time prop required --- src/components/LastUpdatedCell/LastUpdatedCell.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/LastUpdatedCell/LastUpdatedCell.js b/src/components/LastUpdatedCell/LastUpdatedCell.js index 6fbbc81..735461a 100644 --- a/src/components/LastUpdatedCell/LastUpdatedCell.js +++ b/src/components/LastUpdatedCell/LastUpdatedCell.js @@ -59,12 +59,11 @@ export default function LastUpdatedCell({ time, ItemTableCellProps }) { LastUpdatedCell.propTypes = { /** ISO 8601 formatted time string. */ - "time": PropTypes.string, + "time": PropTypes.string.isRequired, /** Props to be applied to the ItemTableCell. */ "ItemTableCellProps": PropTypes.object, }; LastUpdatedCell.defaultProps = { - "time": "", "ItemTableCellProps": {}, }; \ No newline at end of file From 9df197ef9d144760ebb0eb48fee8cca070db8469 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Thu, 21 Jan 2021 13:14:14 -0500 Subject: [PATCH 19/21] Add docs --- src/components/ItemTableCell/ItemTableCell.md | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/components/ItemTableCell/ItemTableCell.md b/src/components/ItemTableCell/ItemTableCell.md index e69de29..5a3bcea 100644 --- a/src/components/ItemTableCell/ItemTableCell.md +++ b/src/components/ItemTableCell/ItemTableCell.md @@ -0,0 +1,38 @@ +The ItemTableCell wraps an [MUI TableCell](https://material-ui.com/api/table-cell/) and adds styling. + +## Default Usage +```jsx +import { Paper } from '@material-ui/core'; +import ItemTableCell from "./ItemTableCell"; + + + + Hello, moto! + + +``` + +```jsx static + + + Hello, moto! + + +``` + +## Forwarded TableCell Props +Props can be passed to the TableCell component using the TableCellProps prop. +```jsx +import { Paper } from '@material-ui/core'; +import ItemTableCell from "./ItemTableCell"; + + + Hello, moto! + +``` + +```jsx static + + Hello, moto! + +``` \ No newline at end of file From 246e4d98daa7801f2e8f7d5325dfb036736fc9df Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Thu, 21 Jan 2021 13:14:19 -0500 Subject: [PATCH 20/21] Add docs --- .../LastUpdatedCell/LastUpdatedCell.md | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/components/LastUpdatedCell/LastUpdatedCell.md b/src/components/LastUpdatedCell/LastUpdatedCell.md index e69de29..a0b202e 100644 --- a/src/components/LastUpdatedCell/LastUpdatedCell.md +++ b/src/components/LastUpdatedCell/LastUpdatedCell.md @@ -0,0 +1,36 @@ +The LastUpdatedCell wraps an [ItemTableCell](/#/Components/ItemTableCell) and changes its background color based on the time passed to it to indicate how old an item is. + +## Default Usage +```jsx +import { Paper } from '@material-ui/core'; +import LastUpdatedCell from "./LastUpdatedCell"; + +let today = new Date(); +let threeDaysAgo = new Date().setDate(today.getDate() - 3); +let lastWeek = new Date().setDate(today.getDate() - 8); +let lastMonth = new Date().setDate(today.getDate() - 28); + + + { /* Today */ } + + { /* Three Days Ago */ } + + { /* Last Week */ } + + { /* Last Month */ } + + +``` + +```jsx static + + { /* Today */ } + + { /* Three Days Ago */ } + + { /* Last Week */ } + + { /* Last Month */ } + + +``` \ No newline at end of file From 1ed9daa263f773a277fcc4c0077ec3105103378d Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Thu, 21 Jan 2021 13:18:22 -0500 Subject: [PATCH 21/21] Update docs to show what values the time prop can be --- src/components/LastUpdatedCell/LastUpdatedCell.js | 2 +- src/components/LastUpdatedCell/LastUpdatedCell.md | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/LastUpdatedCell/LastUpdatedCell.js b/src/components/LastUpdatedCell/LastUpdatedCell.js index 735461a..6729508 100644 --- a/src/components/LastUpdatedCell/LastUpdatedCell.js +++ b/src/components/LastUpdatedCell/LastUpdatedCell.js @@ -58,7 +58,7 @@ export default function LastUpdatedCell({ time, ItemTableCellProps }) { }; LastUpdatedCell.propTypes = { - /** ISO 8601 formatted time string. */ + /** ISO 8601 formatted time string, Date object or UNIX time. See: https://www.npmjs.com/package/react-relative-time */ "time": PropTypes.string.isRequired, /** Props to be applied to the ItemTableCell. */ "ItemTableCellProps": PropTypes.object, diff --git a/src/components/LastUpdatedCell/LastUpdatedCell.md b/src/components/LastUpdatedCell/LastUpdatedCell.md index a0b202e..ce823a5 100644 --- a/src/components/LastUpdatedCell/LastUpdatedCell.md +++ b/src/components/LastUpdatedCell/LastUpdatedCell.md @@ -1,4 +1,6 @@ -The LastUpdatedCell wraps an [ItemTableCell](/#/Components/ItemTableCell) and changes its background color based on the time passed to it to indicate how old an item is. +A table cell that takes a time value and returns a relative time with a background color to indicate how old an item is. + +The LastUpdatedCell wraps an [ItemTableCell](/#/Components/ItemTableCell) ## Default Usage ```jsx