diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js index 1f5c459..8776f0d 100644 --- a/src/components/AppView/AppView.js +++ b/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){