Feature handle api status #220
Conversation
src/components/AppView/AppView.js
Outdated
| // 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); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [error, setError] = useState(false) | ||
| const [response, setResponse] = useState({ status: '', message: '' }) |
There was a problem hiding this comment.
Generic variable name. Replace with errorMessage and set to an initial value of empty string. Populate the message later if need be.
There was a problem hiding this comment.
To clarify, do you mean to replace both of these lines with one variable?
There was a problem hiding this comment.
After sleeping on it, methinks line 22 can be nixed.
src/components/AppView/AppView.js
Outdated
| if (apiResponse.ok) { | ||
| setQueues(queueJson); | ||
| setIsLoading(false) | ||
| } else { | ||
| setResponse({ status: apiResponse.status, message: apiResponse.statusText }) | ||
| setError(true) | ||
| } |
There was a problem hiding this comment.
This code checks for errors after a bad request is received. This should run before line 61. It should also be replaced with a guard statement fo if (!apiResponse.ok) {...} that handles errors and returns. Code to follow should be what happens without error and not inside the else condition.
src/components/AppView/AppView.js
Outdated
| />{error ? <Box classes={{ root: classes.errorContainer }}> | ||
| <Typography variant="h1"> | ||
| {response.status} | ||
| </Typography> | ||
| <Typography variant="h3"> | ||
| Something went wrong. | ||
| </Typography> | ||
| <Typography variant="h5"> | ||
| {response.message} | ||
| </Typography> | ||
| </Box> : <ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading} />} |
There was a problem hiding this comment.
The information hierarchy emphasises the wrong information. On error, the API will send a JSON object with a message key and value describing the error. Replace this text with an appropriate icon and text below with the format of response.message + "\n" + "Error Code: " + response.status similar to: 
…hasisze the proper information.
This reverts commit 1fad3bd.
…es and move failure code to prevent bad data
Closes #168