From 333451746ec046635a01c65b2905c55da9e0032e Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@w2vm4.ecn.purdue.edu>
Date: Fri, 13 Nov 2020 19:07:17 -0500
Subject: [PATCH] Add auth headers to API requests

---
 src/components/AppView/AppView.js | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js
index acfb4a2..6fb0006 100644
--- a/src/components/AppView/AppView.js
+++ b/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,8 +18,14 @@ 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 = "";
 				
@@ -26,7 +33,11 @@ export default function AppView({ setDarkMode }){
 					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 {
@@ -34,7 +45,7 @@ export default function AppView({ setDarkMode }){
 			}
 		}
 		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"], {