Add auto refresh of items

src/components/AppView/AppView.js

@@ -31,58 +31,60 @@ export default function AppView({ setDarkMode }) {
 	const setLogin = useLoginSetter();
 	const [cookies, removeCookie] = useCookies(["csrf_refresh_token"]);
 
-	// Get Queues from API.
-	useEffect(_ => {
-		(async function getQueues() {
-			if (access_token === null) {
-				return undefined;
-			}
+	const getQueues = async _ => {
+		if (access_token === null) {
+			return undefined;
+		}
 
-			if (queueSelectorOpen) {
-				return undefined;
-			}
+		if (queueSelectorOpen) {
+			return undefined;
+		}
 
-			if (selectedQueues.length === 0) {
-				setQueues([])
-				return undefined;
-			}
+		if (selectedQueues.length === 0) {
+			setQueues([])
+			return undefined;
+		}
 
-			setIsLoading(true);
-			let queuesToLoad = "";
+		setIsLoading(true);
+		let queuesToLoad = "";
 
-			if (selectedQueues.length === 1) {
-				queuesToLoad = selectedQueues[0].name;
-			}
-			else {
-				selectedQueues.forEach((queue, index) => (
-					index === 0
-						? queuesToLoad += queue.name
-						: queuesToLoad += `+${queue.name}`
-				));
-			}
+		if (selectedQueues.length === 1) {
+			queuesToLoad = selectedQueues[0].name;
+		}
+		else {
+			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(`${process.env.PUBLIC_URL}/api/data/${queuesToLoad}`, requestOptions);
-
-			if (!apiResponse.ok) {
-				console.error(`Fetching queues failed. Got code ${apiResponse.status} (${apiResponse.statusText})`);
-				const errorMessageJSON = await apiResponse.json();
-				setErrorResponse({
-					code: apiResponse.status,
-					description: apiResponse.statusText,
-					message: errorMessageJSON.message ? errorMessageJSON.message : ""
-				})
-				setError(true);
-				return undefined;
-			}
+		let myHeaders = new Headers();
+		myHeaders.append("Authorization", `Bearer ${access_token}`);
+		let requestOptions = { headers: myHeaders };
+
+		const apiResponse = await fetch(`${process.env.PUBLIC_URL}/api/data/${queuesToLoad}`, requestOptions);
+
+		if (!apiResponse.ok) {
+			console.error(`Fetching queues failed. Got code ${apiResponse.status} (${apiResponse.statusText})`);
+			const errorMessageJSON = await apiResponse.json();
+			setErrorResponse({
+				code: apiResponse.status,
+				description: apiResponse.statusText,
+				message: errorMessageJSON.message ? errorMessageJSON.message : ""
+			})
+			setError(true);
+			return undefined;
+		}
+
+		const queueJson = await apiResponse.json();
+		setQueues(queueJson);
+		setIsLoading(false)
+	};
 
-			const queueJson = await apiResponse.json();
-			setQueues(queueJson);
-			setIsLoading(false)
-		})();
+	// Get Queues from API.
+	useEffect(_ => {
+		getQueues();
 	}, [selectedQueues, access_token, queueSelectorOpen]);
 
 	// Populate items array.
@@ -94,6 +96,16 @@ export default function AppView({ setDarkMode }) {
 		setItems(tempItems);
 	}, [queues]);
 
+	// Auto refresh items.
+	useEffect( _ => {
+		const timer = setInterval(_ => {
+			getQueues();
+		}, 1000 * 60)
+		return _ => {
+			clearInterval(timer);
+		}
+	}, [selectedQueues])
+
 	const theme = useTheme();
 	const transitionWidth = theme.transitions.create(["width"], {
 		duration: theme.transitions.duration.enteringScreen,