Add auth headers to API requests

src/components/AppView/AppView.js

@@ -8,6 +8,7 @@ import ItemTable from "../ItemTable/";
 import ItemViewAppBar from "../ItemViewAppBar/";
 import ItemView from "../ItemView/";
 import QueueSelector from "../QueueSelector/";
+import { useToken } from "../AuthProvider/";
 
 export default function AppView({ setDarkMode }){
 	const [activeItem, setActiveItem] = useState({});
@@ -17,24 +18,34 @@ export default function AppView({ setDarkMode }){
 	const [selectedQueues, setSelectedQueues] = useState([]);
 	const [queueCounts, setQueueCounts] = useState([]);
 
+	const access_token = useToken();
+
 	useEffect( _ => {
 		async function getQueues(){
+			if (access_token === null){
+				return
+			}
+
 			if (selectedQueues.length > 0){
 				let queuesToLoad = "";
 
 				for (let selectedQueue of selectedQueues){
 					queuesToLoad += `+${selectedQueue.name}`;
 				}
 
-				const apiResponse = await fetch(`/api/${queuesToLoad}`);
+				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);
 			} else {
 				setQueues([])
 			}
 		}
 		getQueues();
-	}, [selectedQueues]);
+	}, [selectedQueues, access_token]);
 
 	useEffect( _ => {
 		let tempItems = [];
@@ -46,13 +57,21 @@ export default function AppView({ setDarkMode }){
 
 	useEffect( _ => {
 		async function getQueueCounts(){
-			const apiResponse = await fetch(`/api/get_queues`);
+			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]);
+	}, [selectedQueues, access_token]);
 
 	const theme = useTheme();
 	const transitionWidth = theme.transitions.create(["width"], {