Raise QueueSelector open state and optimize API calls

src/components/AppView/AppView.js

@@ -16,13 +16,18 @@ export default function AppView({ setDarkMode }){
 	const [queues, setQueues] = useState([]);
 	const [items, setItems] = useState([]);
 	const [selectedQueues, setSelectedQueues] = useState([]);
+	const [queueSelectorOpen, setQueueSelectorOpen] = useState(false);
 
 	const access_token = useToken();
 
 	useEffect( _ => {
 		async function getQueues(){
 			if (access_token === null){
-				return
+				return undefined
+			}
+
+			if (queueSelectorOpen){
+				return undefined
 			}
 
 			if (selectedQueues.length > 0){
@@ -44,7 +49,7 @@ export default function AppView({ setDarkMode }){
 			}
 		}
 		getQueues();
-	}, [selectedQueues, access_token]);
+	}, [selectedQueues, access_token, queueSelectorOpen]);
 
 	useEffect( _ => {
 		let tempItems = [];
@@ -92,7 +97,12 @@ export default function AppView({ setDarkMode }){
 
 			<Box className={classes.leftCol}>
 				<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
-				<QueueSelector selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
+				<QueueSelector 
+					queueSelectorOpen={queueSelectorOpen}
+					setQueueSelectorOpen={setQueueSelectorOpen}
+					selectedQueues={selectedQueues}
+					setSelectedQueues={setSelectedQueues}
+				/>
 				<ItemTable data={items} rowCanBeSelected={sidebarOpen}/>
 			</Box>
 

src/components/QueueSelector/QueueSelector.js

@@ -7,8 +7,9 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { useToken } from "../AuthProvider/";
 
-export default function QueueSelector({ selectedQueues, setSelectedQueues }) {
-    const [open, setOpen] = useState(false);
+export default function QueueSelector({ queueSelectorOpen, setQueueSelectorOpen, selectedQueues, setSelectedQueues }) {
+    const open = queueSelectorOpen;
+    const setOpen = setQueueSelectorOpen;
     const [queueCounts, setQueueCounts] = useState([]);
     const access_token = useToken();
     const loading = open && queueCounts.length === 0;
@@ -112,8 +113,12 @@ export default function QueueSelector({ selectedQueues, setSelectedQueues }) {
 };
 
 QueueSelector.propTypes = {
+    /** State variable to manage open status. */
+    "queueSelectorOpen": PropTypes.bool.isRequired,
+    /** Function to update state variable that manages open status. */
+    "setQueueSelectorOpen": PropTypes.func.isRequired,
     /** State variable to manage selected queues. */
     "selectedQueues": PropTypes.array.isRequired,
     /** Function to update state variable that manages selected queues. */
-    "setSelectedQueues": PropTypes.func.isRequired
+    "setSelectedQueues": PropTypes.func.isRequired,
 };