diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js index cf8f0e5..acc139a 100644 --- a/src/components/AppView/AppView.js +++ b/src/components/AppView/AppView.js @@ -20,7 +20,7 @@ export default function AppView({ setDarkMode }) { const [queueSelectorOpen, setQueueSelectorOpen] = useState(false); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(false) - const [response, setResponse] = useState({ status: '', message: '' }) + const [errorResponse, setErrorResponse] = useState({ code: "", description: "", message: "" }) const access_token = useToken(); @@ -59,15 +59,22 @@ export default function AppView({ setDarkMode }) { let requestOptions = { headers: myHeaders }; const apiResponse = await fetch(`${process.env.PUBLIC_URL}/api/data/${queuesToLoad}`, requestOptions); - const queueJson = await apiResponse.json(); - if (apiResponse.ok) { - setQueues(queueJson); - setIsLoading(false) - } else { - setResponse({ status: apiResponse.status, message: apiResponse.statusText }) - setError(true) + 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) })(); }, [selectedQueues, access_token, queueSelectorOpen]); @@ -128,10 +135,10 @@ export default function AppView({ setDarkMode }) { - {`MESSAGE`} + {`${errorResponse.message}`} - {`Error Code: CODE`} + {`Error Code: ${errorResponse.code} (${errorResponse.description})`} );