From d728722c32d10f18248ca969086b1018c916b29c Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@w2vm4.ecn.purdue.edu>
Date: Mon, 2 Nov 2020 16:19:50 -0500
Subject: [PATCH] Implement QueueSelector component and modify API call for
 multiple queues

---
 src/App.js | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 8320c96..92034cc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import ItemTableAppBar from "./components/ItemTableAppBar/";
 import ItemTable from "./components/ItemTable/";
 import ItemViewAppBar from "./components/ItemViewAppBar/";
 import ItemView from "./components/ItemView/";
+import QueueSelector from "./components/QueueSelector/";
 
 function App() {
 	const [darkMode, setDarkMode] = useState(false);
@@ -15,15 +16,26 @@ function App() {
 	const [sidebarOpen, setSidebarOpen] = useState(false);
 	const [queues, setQueues] = useState([]);
 	const [items, setItems] = useState([]);
+	const [selectedQueues, setSelectedQueues] = useState([]);
 
 	useEffect( _ => {
 		async function getQueues(){
-			const apiResponse = await fetch("/api/ce");
-			const queueJson = await apiResponse.json();
-			setQueues(queueJson);
+			if (selectedQueues.length > 0){
+				let queuesToLoad = "";
+				
+				for (let selectedQueue of selectedQueues){
+					queuesToLoad += `+${selectedQueue.name}`;
+				}
+
+				const apiResponse = await fetch(`/api/${queuesToLoad}`);
+				const queueJson = await apiResponse.json();
+				setQueues(queueJson);
+			} else {
+				setQueues([])
+			}
 		}
 		getQueues();
-	}, []);
+	}, [selectedQueues]);
 
 	useEffect( _ => {
 		let tempItems = [];
@@ -73,6 +85,7 @@ function App() {
 
 				<Box className={classes.leftCol}>
 					<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
+					<QueueSelector selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
 					<ItemTable data={items} onRowClick={ _ => console.log("Clicked!") }/>
 				</Box>