Enhancement show total items

src/components/AppView/AppView.js

@@ -9,47 +9,49 @@ import ItemViewAppBar from "../ItemViewAppBar/";
 import ItemView from "../ItemView/";
 import QueueSelector from "../QueueSelector/";
 import { useToken } from "../AuthProvider/";
+import ItemCounter from "../ItemCounter";
 
-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 +66,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);
@@ -102,34 +104,46 @@ export default function AppView({ setDarkMode }){
 				width: "40vw",
 			}
 		},
+		"container": {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "center"
+		},
+		queueSelectorContainer: {
+			flexGrow: 2
+		},
 	});
 	const classes = useStyles();
-
-	return(
+	return (
 		<Box component={Paper} display="flex" square elevation={0}>
 			<Box className={classes.leftCol}>
 				<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
-				<QueueSelector 
-					open={queueSelectorOpen}
-					setOpen={setQueueSelectorOpen}
-					value={selectedQueues}
-					setValue={setSelectedQueues}
-				/>
-				<ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading}/>
+				<Box className={classes.container}>
+					<Box className={classes.queueSelectorContainer}>
+						<QueueSelector
+							open={queueSelectorOpen}
+							setOpen={setQueueSelectorOpen}
+							value={selectedQueues}
+							setValue={setSelectedQueues}
+						/>
+					</Box>
+					<ItemCounter filteredItems={filteredItems} totalItems={items.length} />
+				</Box>
+				<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/ItemCounter/ItemCounter.js

@@ -0,0 +1,30 @@
+import { makeStyles, Typography, useTheme } from '@material-ui/core'
+import React from 'react'
+import PropTypes from "prop-types";
+
+export default function ItemCounter({ filteredItems, totalItems }) {
+    const theme = useTheme();
+    const useStyles = makeStyles({
+        margin: {
+            margin: '0 1rem'
+        }
+    });
+    const classes = useStyles();
+    return (
+        <Typography classes={{ root: classes.margin }}>
+            {`Showing ${filteredItems} out of ${totalItems}`}
+        </Typography>
+    )
+}
+
+ItemCounter.propTypes = {
+	/** The number of filtered items in the table. */
+	"filteredItems": PropTypes.number.isRequired,
+	/** The total number of items in the table */
+	"totalitems": PropTypes.number.isRequired
+};
+
+ItemCounter.defaultProps = {
+    "filteredItems": 0,
+    "totalItems": 0,
+};

src/components/ItemCounter/ItemCounter.stories.mdx

@@ -0,0 +1,24 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import ItemCounter from "./ItemCounter";
+import { Box } from '@material-ui/core';
+
+<Meta
+    title="Components/ItemCounter"
+    component={ItemCounter}
+/>
+
+The ItemCounter component shows the number of items that are visible out the total number of items loaded.
+
+<Canvas>
+    <Story
+        name="Default"
+        args={{
+           filteredItems: 0,
+           totalItems: 0
+        }}
+    >
+        { args => <ItemCounter {...args} /> }
+    </Story>
+</Canvas>
+
+<ArgsTable of={ItemCounter} />

src/components/ItemCounter/index.js

@@ -0,0 +1,2 @@
+export { default } from "./ItemCounter";
+

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
             ? (