From 1743ecb6b668d6178a74605ba967eea383e0a78c Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@w2vm4.ecn.purdue.edu>
Date: Thu, 19 Nov 2020 14:55:19 -0500
Subject: [PATCH] Consolidate queue count fetch and add visual loading state

---
 src/components/AppView/AppView.js             | 21 +------
 src/components/QueueSelector/QueueSelector.js | 57 +++++++++++++++----
 2 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js
index a00abbe..9c630fc 100644
--- a/src/components/AppView/AppView.js
+++ b/src/components/AppView/AppView.js
@@ -16,7 +16,6 @@ export default function AppView({ setDarkMode }){
 	const [queues, setQueues] = useState([]);
 	const [items, setItems] = useState([]);
 	const [selectedQueues, setSelectedQueues] = useState([]);
-	const [queueCounts, setQueueCounts] = useState([]);
 
 	const access_token = useToken();
 
@@ -55,24 +54,6 @@ export default function AppView({ setDarkMode }){
 		setItems(tempItems);
 	}, [queues]);
 
-	useEffect( _ => {
-		async function getQueueCounts(){
-			if (access_token === null){
-				return
-			}
-
-			let myHeaders = new Headers();
-			myHeaders.append("Authorization", `Bearer ${access_token}`);
-			let requestOptions = { headers: myHeaders };
-
-			const apiResponse = await fetch(`/api/get_queues`, requestOptions);
-			const queueCountJson = await apiResponse.json();
-			setQueueCounts(queueCountJson);
-		};
-		getQueueCounts();
-		return _ => setQueueCounts([]);
-	}, [selectedQueues, access_token]);
-
 	const theme = useTheme();
 	const transitionWidth = theme.transitions.create(["width"], {
 		duration: theme.transitions.duration.enteringScreen,
@@ -111,7 +92,7 @@ export default function AppView({ setDarkMode }){
 
 			<Box className={classes.leftCol}>
 				<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
-				<QueueSelector queues={queueCounts} selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
+				<QueueSelector selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
 				<ItemTable data={items} rowCanBeSelected={sidebarOpen}/>
 			</Box>
 
diff --git a/src/components/QueueSelector/QueueSelector.js b/src/components/QueueSelector/QueueSelector.js
index 3866559..ae66b44 100644
--- a/src/components/QueueSelector/QueueSelector.js
+++ b/src/components/QueueSelector/QueueSelector.js
@@ -1,11 +1,44 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { TextField, Checkbox, InputAdornment, Box, useTheme } from "@material-ui/core";
 import { Autocomplete } from "@material-ui/lab";
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { useToken } from "../AuthProvider/";
 
-export default function QueueSelector({ queues, selectedQueues, setSelectedQueues }) {
+export default function QueueSelector({ selectedQueues, setSelectedQueues }) {
+    const [open, setOpen] = useState(false);
+    const [queues, setQueues] = useState([]);
+    const access_token = useToken();
+    const loading = open && queues.length === 0;
+
+    useEffect( _ => {
+        const getQueueCounts = async  _ => {
+			if (access_token === null){
+				return undefined
+            }
+            
+			let myHeaders = new Headers();
+			myHeaders.append("Authorization", `Bearer ${access_token}`);
+			let requestOptions = { headers: myHeaders };
+
+			const apiResponse = await fetch(`/api/get_queues`, requestOptions);
+			const queueCountJson = await apiResponse.json();
+			setQueues(queueCountJson);
+        };
+
+        if (loading) {
+            getQueueCounts();
+        }
+
+    }, [loading, access_token]);
+
+    useEffect(() => {
+        if (!open) {
+          setQueues([]);
+        }
+      }, [open]);
 
     const theme = useTheme();
 
@@ -46,20 +79,30 @@ export default function QueueSelector({ queues, selectedQueues, setSelectedQueue
                                     {params.InputProps.startAdornment}
                                 </>
                             ),
+                            endAdornment: (
+                                <>
+                                    {loading ? <CircularProgress color="inherit" size={20} /> : null}
+                                    {params.InputProps.endAdornment}
+                                </>
+                            )
                         }}
                     />
                 )}
-
+                
                 options={queues}
                 onChange={handleChange}
                 getOptionLabel={(option) => `${option.name} (${option.number_of_items})`}
                 renderOption={optionRenderer}
                 getOptionSelected={ (option, value) => option.name === value.name }
+                size="small"
+                open={open}
+                onOpen={_ => setOpen(true)}
+                onClose={_ => setOpen(false)}
+                loading={true}
                 disableCloseOnSelect
                 disableListWrap
                 fullWidth
                 multiple
-                size="small"
                 autoHighlight
             />
         </Box>
@@ -67,14 +110,8 @@ export default function QueueSelector({ queues, selectedQueues, setSelectedQueue
 };
 
 QueueSelector.propTypes = {
-    /** An array of objects with keys of name and number of items for each queue. */
-    "queues": PropTypes.array,
     /** State variable to manage selected queues. */
     "selectedQueues": PropTypes.array.isRequired,
     /** Function to update state variable that manages selected queues. */
     "setSelectedQueues": PropTypes.func.isRequired
-};
-
-QueueSelector.defaultProps = {
-    "queues": []
 };
\ No newline at end of file