Implement QueueSelector component and modify API call for multiple qu…

…eues

src/App.js

@@ -8,22 +8,34 @@ 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);
 	const [activeItem, setActiveItem] = useState({});
 	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>