fix: Delete freshly created recent Check-ins

[joannajiang711]

Closes #12417

Summary

When a user adds a check-in event and then immediately deletes it without refreshing the page, the DELETE request is sent to /check-ins/ with no ID, resulting in a 404 error.

Root cause: Both submit-check-in event handlers called postCheckIn() and only checked resp.ok, but never parsed the response body. The FastAPI endpoint returns { status: "ok", id: <event_id> } on success, but this id was never captured — so checkInForm.eventId remained null and the subsequent DELETE request had no ID to use.

Fix

In both submit-check-in handlers inside CheckInComponents.js, parse the JSON response and call setEventId() with the returned id:

.then(async (resp) => {
    if (!resp.ok) {
        throw Error(`Check-in request failed. Status: ${resp.status}`);
    }
    const data = await resp.json();
    if (data.id) {
        this.checkInForm.setEventId(data.id);
    }
    this.updateDateAndShowDisplay(year, month, day);
})

Files changed

• openlibrary/plugins/openlibrary/js/my-books/MyBooksDropper/CheckInComponents.js

Testing

📹 Video demonstrating the fix working locally will be added before marking ready for review.

Steps to reproduce (before fix):

1. Go to My Books → Already Read
2. Open DevTools → Network tab
3. Click "Today" to add a read date (without refreshing)
4. Immediately click Delete
5. Observe: DELETE request sent to /check-ins/ (no ID) → 404

After fix:

• DELETE request correctly sent to /check-ins/<id> → 200 ✅

[accesslint]

Found 2 issues across 1 rule.

[accesslint]

WCAG 4.1.2: Form element has no accessible label.

Form elements must have labels. Use <label>, aria-label, or aria-labelledby.

Details

name: "year"

Every form input needs an accessible label so users understand what information to enter. Use a <label> element with a for attribute matching the input's id, wrap the input in a <label>, or use aria-label/aria-labelledby for custom components. Placeholders are not sufficient as labels since they disappear when typing.

[accesslint]

Found 2 issues across 1 rule.

[accesslint]

WCAG 4.1.2: Form element has no accessible label.

Form elements must have labels. Use <label>, aria-label, or aria-labelledby.

Details

name: "year"

Every form input needs an accessible label so users understand what information to enter. Use a <label> element with a for attribute matching the input's id, wrap the input in a <label>, or use aria-label/aria-labelledby for custom components. Placeholders are not sufficient as labels since they disappear when typing.

[joannajiang711]

2026-06-08.4.30.15.mov

Here is a video demonstrating the fix working locally.

[mekarpeles]

@RayBB let me know if you have bandwidth for this one otherwise I am happy to take it!

[accesslint]

Found 2 issues across 1 rule.

[accesslint]

WCAG 4.1.2: Form element has no accessible label.

Form elements must have labels. Use <label>, aria-label, or aria-labelledby.

Details

name: "year"

Every form input needs an accessible label so users understand what information to enter. Use a <label> element with a for attribute matching the input's id, wrap the input in a <label>, or use aria-label/aria-labelledby for custom components. Placeholders are not sufficient as labels since they disappear when typing.

[accesslint]

Found 2 issues across 1 rule.

[accesslint]

WCAG 4.1.2: Form element has no accessible label.

Form elements must have labels. Use <label>, aria-label, or aria-labelledby.

Details

name: "year"

Every form input needs an accessible label so users understand what information to enter. Use a <label> element with a for attribute matching the input's id, wrap the input in a <label>, or use aria-label/aria-labelledby for custom components. Placeholders are not sufficient as labels since they disappear when typing.

[RayBB]

Working excellently. Thanks for the video and opening the PR for this one. Nice thing to have working better!