Merge pull request #112 from ECN/integreate-api-get_queues-and-QueueS…

…elector Add useEffect for /api/get_queues and QueueSelector
ECN · Nov 3, 2020 · fb4b2e1 · fb4b2e1
2 parents 0f4b510 + ef1a12d
commit fb4b2e1
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/App.js b/src/App.js
@@ -17,6 +17,7 @@ function App() {
 	const [queues, setQueues] = useState([]);
 	const [items, setItems] = useState([]);
 	const [selectedQueues, setSelectedQueues] = useState([]);
+	const [queueCounts, setQueueCounts] = useState([]);
 
 	useEffect( _ => {
 		async function getQueues(){
@@ -45,6 +46,16 @@ function App() {
 		setItems(tempItems);
 	}, [queues]);
 
+	useEffect( _ => {
+		async function getQueueCounts(){
+			const apiResponse = await fetch(`/api/get_queues`);
+			const queueCountJson = await apiResponse.json();
+			setQueueCounts(queueCountJson);
+		};
+		getQueueCounts();
+		return _ => setQueueCounts([]);
+	}, [selectedQueues]);
+
 	const theme = webqueueTheme(darkMode);
 	const transitionWidth = theme.transitions.create(["width"], {
 		duration: theme.transitions.duration.enteringScreen,
@@ -85,7 +96,7 @@ function App() {
 
 				<Box className={classes.leftCol}>
 					<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
-					<QueueSelector selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
+					<QueueSelector queues={queueCounts} selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
 					<ItemTable data={items} onRowClick={ _ => console.log("Clicked!") }/>
 				</Box>