diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index b9b0f0b..695a96f 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -1,10 +1,12 @@ -import React, { useState, useEffect } from "react"; +import React from "react"; +import PropTypes from "prop-types"; import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table"; -import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel, Paper, Grid, IconButton, useTheme, } from "@material-ui/core"; +import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel + , Paper, Grid, useTheme, } from "@material-ui/core"; import { useHistory } from "react-router-dom"; import ItemTableFilter from "../ItemTableFilter/" -export default function ItemTable({ items, onRowClick }) { +export default function ItemTable({ data, onRowClick }) { const theme = useTheme(); const useStyles = makeStyles({ @@ -40,7 +42,7 @@ export default function ItemTable({ items, onRowClick }) { { Header: 'Date Received', accessor: 'dateReceived' }, ], []); - const tableInstance = () => useTable( + const tableInstance = useTable( { columns, data, @@ -57,7 +59,7 @@ export default function ItemTable({ items, onRowClick }) { }, useFilters, useFlexLayout, useSortBy ); - const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance(); + const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance; return ( @@ -95,7 +97,7 @@ export default function ItemTable({ items, onRowClick }) { prepareRow(row); return ( history.push(`/${row.original.queue}/${row.original.number}`) } className={classes.bandedRows} {...row.getRowProps()}> {row.cells.map(cell => ( @@ -113,5 +115,9 @@ export default function ItemTable({ items, onRowClick }) { ItemTable.propTypes = { /** Array of items from all active queues to display in table. */ - "items": PropTypes.array.isRequi + "items": PropTypes.array +}; + +ItemTable.defaultProps = { + "items": [] }; \ No newline at end of file diff --git a/src/components/ItemTableFilter/ItemTableFilter.js b/src/components/ItemTableFilter/ItemTableFilter.js index cf03ea7..68f9d56 100644 --- a/src/components/ItemTableFilter/ItemTableFilter.js +++ b/src/components/ItemTableFilter/ItemTableFilter.js @@ -1,33 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { TextField, useTheme, makeStyles } from "@material-ui/core"; -import { yellow } from '@material-ui/core/colors'; +import { TextField } from "@material-ui/core"; export default function ItemTableFilter({ label, onChange }) { - const theme = useTheme(); - const useStyles = makeStyles({ - root: { - '& label.Mui-focused': { - color: theme.palette.type === "light" ? "black" : "white", - }, - '& .MuiOutlinedInput-root': { - '& fieldset': { - borderColor: theme.palette.type === "light" ? theme.palette.action.disabled : "white", - }, - '&:hover fieldset': { - borderColor: theme.palette.type === "light" ? "black" : "white", - }, - '&.Mui-focused fieldset': { - borderColor: theme.palette.type === "light" ? "black" : "white", - }, - '&.Mui-focused label': { - borderColor: theme.palette.type === "light" ? "black" : "white", - }, - }, - }, - }); - - const classes = useStyles(); return ( <> diff --git a/src/theme.js b/src/theme.js index 459372e..bb9281a 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,4 +1,4 @@ -import { cyan, deepOrange, deepPurple, lightGreen, lightBlue, teal, purple } from '@material-ui/core/colors'; +import { deepPurple, teal } from '@material-ui/core/colors'; import { createMuiTheme } from '@material-ui/core/styles' /**