Refactored queue loading

src/components/AppView/AppView.js

@@ -12,47 +12,59 @@ import { useToken } from "../AuthProvider/";
 import { useItem, useItemSetter } from "../ItemProvider/";
 
 export default function AppView({ setDarkMode }){
-	const activeItem = useItem();
-	const setActiveItem = useItemSetter();
+	// Create stateful variables.
 	const [sidebarOpen, setSidebarOpen] = useState(false);
 	const [queues, setQueues] = useState([]);
 	const [items, setItems] = useState([]);
 	const [selectedQueues, setSelectedQueues] = useState([]);
 	const [queueSelectorOpen, setQueueSelectorOpen] = useState(false);
 
+	// Create contextual variables.
+	const activeItem = useItem();
+	const setActiveItem = useItemSetter();
 	const access_token = useToken();
 
+	// Get Queues from API.
 	useEffect( _ => {
-		async function getQueues(){
+		(async function getQueues(){
 			if (access_token === null){
-				return undefined
+				return undefined;
 			}
 
 			if (queueSelectorOpen){
-				return undefined
+				return undefined;
 			}
 
-			if (selectedQueues.length > 0){
-				let queuesToLoad = "";
-
-				for (let selectedQueue of selectedQueues){
-					queuesToLoad += `+${selectedQueue.name}`;
-				}
+			if (selectedQueues.length === 0){
+				setQueues([])
+				return undefined;
+			}
 
-				let myHeaders = new Headers();
-				myHeaders.append("Authorization", `Bearer ${access_token}`);
-				let requestOptions = { headers: myHeaders };
+			let queuesToLoad = "";
 
-				const apiResponse = await fetch(`/api/${queuesToLoad}`, requestOptions);
-				const queueJson = await apiResponse.json();
-				setQueues(queueJson);
-			} else {
-				setQueues([])
+			if (selectedQueues.length === 1){
+				queuesToLoad = selectedQueues[0].name;
 			}
-		}
-		getQueues();
+			else if (selectedQueues.length > 0){
+				selectedQueues.forEach( (queue, index) => (
+					index === 0
+						? queuesToLoad += queue.name
+						: queuesToLoad += `+${queue.name}`
+				));
+			}			
+
+			let myHeaders = new Headers();
+			myHeaders.append("Authorization", `Bearer ${access_token}`);
+			let requestOptions = { headers: myHeaders };
+
+			const apiResponse = await fetch(`/api/${queuesToLoad}`, requestOptions);
+			const queueJson = await apiResponse.json();
+
+			setQueues(queueJson);
+		})();
 	}, [selectedQueues, access_token, queueSelectorOpen]);
 
+	// Populate items array.
 	useEffect( _ => {
 		let tempItems = [];
 		for (let queue of queues){