fix: handle fetch failures and stop keying UI logic off display text
- refreshStatus()/observe() now check response.ok and catch fetch errors, showing a clear "Connection problem" state instead of silently rendering blank/undefined status on a non-2xx response. - Track session state in a currentState variable (set in refreshStatus) and branch the trigger button's click handler on currentState === "book_complete" instead of parsing statusEl's displayed text, so future copy changes can't silently break the next-book/manual-trigger branch.
This commit is contained in:
parent
2b4875d77c
commit
043cc4bcce
1 changed files with 36 additions and 3 deletions
|
|
@ -10,9 +10,33 @@ const STATE_COPY = {
|
||||||
book_complete: { status: "Book complete!", hint: "Tap Next Book to continue." },
|
book_complete: { status: "Book complete!", hint: "Tap Next Book to continue." },
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const CONNECTION_ERROR_COPY = {
|
||||||
|
status: "Connection problem — get a volunteer",
|
||||||
|
hint: "The intake station couldn't reach the server. Try again, or ask for help.",
|
||||||
|
};
|
||||||
|
|
||||||
|
let currentState = null;
|
||||||
|
|
||||||
|
function showConnectionError() {
|
||||||
|
currentState = null;
|
||||||
|
statusEl.textContent = CONNECTION_ERROR_COPY.status;
|
||||||
|
hintEl.textContent = CONNECTION_ERROR_COPY.hint;
|
||||||
|
}
|
||||||
|
|
||||||
async function refreshStatus() {
|
async function refreshStatus() {
|
||||||
const response = await fetch("/api/session-state");
|
let response;
|
||||||
|
try {
|
||||||
|
response = await fetch("/api/session-state");
|
||||||
|
} catch (err) {
|
||||||
|
showConnectionError();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!response.ok) {
|
||||||
|
showConnectionError();
|
||||||
|
return;
|
||||||
|
}
|
||||||
const body = await response.json();
|
const body = await response.json();
|
||||||
|
currentState = body.state;
|
||||||
const copy = STATE_COPY[body.state] || { status: body.state, hint: "" };
|
const copy = STATE_COPY[body.state] || { status: body.state, hint: "" };
|
||||||
statusEl.textContent = copy.status;
|
statusEl.textContent = copy.status;
|
||||||
hintEl.textContent = copy.hint;
|
hintEl.textContent = copy.hint;
|
||||||
|
|
@ -24,12 +48,21 @@ function refreshPreview() {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function observe() {
|
async function observe() {
|
||||||
await fetch("/api/observe", { method: "POST" });
|
try {
|
||||||
|
const response = await fetch("/api/observe", { method: "POST" });
|
||||||
|
if (!response.ok) {
|
||||||
|
showConnectionError();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
showConnectionError();
|
||||||
|
return;
|
||||||
|
}
|
||||||
await refreshStatus();
|
await refreshStatus();
|
||||||
}
|
}
|
||||||
|
|
||||||
triggerButton.addEventListener("click", async () => {
|
triggerButton.addEventListener("click", async () => {
|
||||||
if (statusEl.textContent === "Book complete!") {
|
if (currentState === "book_complete") {
|
||||||
await fetch("/api/next-book", { method: "POST" });
|
await fetch("/api/next-book", { method: "POST" });
|
||||||
} else {
|
} else {
|
||||||
await fetch("/api/manual-trigger", { method: "POST" });
|
await fetch("/api/manual-trigger", { method: "POST" });
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue