Enhancement show total items

src/components/AppView/AppView.js

@@ -10,46 +10,47 @@ import ItemView from "../ItemView/";
 import QueueSelector from "../QueueSelector/";
 import { useToken } from "../AuthProvider/";
 
-export default function AppView({ setDarkMode }){
+export default function AppView({ setDarkMode }) {
 	// Create stateful variables.
 	const [sidebarOpen, setSidebarOpen] = useState(false);
 	const [queues, setQueues] = useState([]);
 	const [items, setItems] = useState([]);
 	const [selectedQueues, setSelectedQueues] = useState([]);
 	const [queueSelectorOpen, setQueueSelectorOpen] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
+	const [filteredItems, setFilteredItems] = useState(0)
 
 	const access_token = useToken();
 
 	// Get Queues from API.
-	useEffect( _ => {
-		(async function getQueues(){
-			if (access_token === null){
+	useEffect(_ => {
+		(async function getQueues() {
+			if (access_token === null) {
 				return undefined;
 			}
 
-			if (queueSelectorOpen){
+			if (queueSelectorOpen) {
 				return undefined;
 			}
 
-			if (selectedQueues.length === 0){
+			if (selectedQueues.length === 0) {
 				setQueues([])
 				return undefined;
 			}
 
 			setIsLoading(true);
 			let queuesToLoad = "";
 
-			if (selectedQueues.length === 1){
+			if (selectedQueues.length === 1) {
 				queuesToLoad = selectedQueues[0].name;
 			}
 			else {
-				selectedQueues.forEach( (queue, index) => (
+				selectedQueues.forEach((queue, index) => (
 					index === 0
 						? queuesToLoad += queue.name
 						: queuesToLoad += `+${queue.name}`
 				));
-			}			
+			}
 
 			let myHeaders = new Headers();
 			myHeaders.append("Authorization", `Bearer ${access_token}`);
@@ -64,9 +65,9 @@ export default function AppView({ setDarkMode }){
 	}, [selectedQueues, access_token, queueSelectorOpen]);
 
 	// Populate items array.
-	useEffect( _ => {
+	useEffect(_ => {
 		let tempItems = [];
-		for (let queue of queues){
+		for (let queue of queues) {
 			tempItems = tempItems.concat(queue.items);
 		}
 		setItems(tempItems);
@@ -104,32 +105,31 @@ export default function AppView({ setDarkMode }){
 		},
 	});
 	const classes = useStyles();
-
-	return(
+	return (
 		<Box component={Paper} display="flex" square elevation={0}>
 			<Box className={classes.leftCol}>
 				<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
-				<QueueSelector 
+				<QueueSelector
 					open={queueSelectorOpen}
 					setOpen={setQueueSelectorOpen}
 					value={selectedQueues}
 					setValue={setSelectedQueues}
 				/>
-				<ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading}/>
+				<ItemTable data={items} rowCanBeSelected={sidebarOpen} setFilteredItems={setFilteredItems} loading={isLoading} />
 			</Box>
 			<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
 				{items.length === 0 ? null :
 					<Route
 						path="/:queue/:number"
 						render={({ match }) => (
 							<>
-								<ItemViewAppBar 
-									title={`${match.params.queue} ${match.params.number}`} 
+								<ItemViewAppBar
+									title={`${match.params.queue} ${match.params.number}`}
 									setSidebarOpen={setSidebarOpen}
 								/>
-								<ItemView 
-									queue={match.params.queue} 
-									number={match.params.number} 
+								<ItemView
+									queue={match.params.queue}
+									number={match.params.number}
 								/>
 							</>
 						)}

src/components/ItemTable/ItemTable.js

@@ -1,4 +1,4 @@
-import React, { memo, useState } from "react";
+import React, { memo, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
 import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Box, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
@@ -12,7 +12,7 @@ import ItemTableCell from "../ItemTableCell";
 import LastUpdatedCell from "../LastUpdatedCell/";
 import jester from "./loading-annimation.gif";
 
-export default function ItemTable({ data, rowCanBeSelected, loading }) {
+export default function ItemTable({ data, rowCanBeSelected, loading, setFilteredItems }) {
     const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });
 
     const theme = useTheme();
@@ -42,7 +42,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
         // are a hotfix to force the table body to have height until a better solution is found.
         VirtualizedTableStyles: {
             height: '82vh !important',
-            display:"table-row"
+            display: "table-row"
         },
         tableMargin: {
             marginTop: theme.spacing(2)
@@ -68,7 +68,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
             { Header: 'Last Updated', accessor: 'last_updated', sortInverted: true },
             { Header: 'Department', accessor: 'department' },
             { Header: 'Building', accessor: 'building' },
-            { Header: 'Date Received', accessor: 'date_received', sortInverted: true ,
+            { Header: 'Date Received', accessor: 'date_received', sortInverted: true },
         ], []);
     const tableInstance = useTable(
         {
@@ -98,6 +98,11 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
     );
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
+    //Sets filteredItems length when items are filtered from the table/
+    useEffect(() => {
+        setFilteredItems(tableInstance.filteredRows.length)
+    }, [tableInstance.filteredRows.length])
+
     return (
         loading
             ? (