Migrate to react-table based ItemTable

ECN · Oct 7, 2020 · fc22c73 · fc22c73
1 parent 2b6450a
commit fc22c73
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { ThemeProvider } from "@material-ui/core/styles";
 import clsx from "clsx";
 import { Box, makeStyles, Paper } from "@material-ui/core";
@@ -7,7 +7,6 @@ import ItemTableAppBar from "./components/ItemTableAppBar/";
 import ItemTable from "./components/ItemTable/";
 import ItemViewAppBar from "./components/ItemViewAppBar/";
 import ItemView from "./components/ItemView/";
-import ItemTable_ReactTable from "./components/ItemTable/ItemTable-ReactTable";
 
 function App(){
 	const [darkMode, setDarkMode] = useState(false);
@@ -56,8 +55,7 @@ function App(){
 				<Box display="flex">
 					<Box className={classes.leftCol}>
 						<ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
-						{/* <ItemTable setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/> */}
-						<ItemTable_ReactTable />
+						<ItemTable />
 					</Box>
 					<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
 						<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} />

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -1,9 +1,9 @@
-import React, { useState, useEffect, useMemo } from "react";
-import { useTable, useFilters, useBlockLayout,useFlexLayout } from "react-table";
+import React, { useState, useEffect } from "react";
+import { useTable, useFilters, useFlexLayout } from "react-table";
 import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper } from "@material-ui/core";
 import ItemTableFilter from "../ItemTableFilter/"
 
-export default function ItemTable_ReactTable() {
+export default function ItemTable() {
 
     const [data, setData] = useState([]);
     useEffect(() => {
@@ -14,8 +14,8 @@ export default function ItemTable_ReactTable() {
 
     const columns = React.useMemo(
         () => [
-            { Header: 'Queue', accessor: 'queue',  },
-            { Header: 'Item #', accessor: 'number'},
+            { Header: 'Queue', accessor: 'queue', },
+            { Header: 'Item #', accessor: 'number' },
             { Header: 'Assigned To', accessor: 'assignedTo' },
             { Header: 'Subject', accessor: 'subject' },
             { Header: 'Status', accessor: 'status', },
@@ -36,10 +36,10 @@ export default function ItemTable_ReactTable() {
             columns,
             data,
             defaultColumn: {
-                Filter: ({ column: { Header, setFilter }}) => {
-                    return(
+                Filter: ({ column: { Header, setFilter } }) => {
+                    return (
                         <ItemTableFilter
-                            label={Header} 
+                            label={Header}
                             onChange={(event) => setFilter(event.target.value)}
                         />
                     );