Show enrolment status on the student group classes page

The class list now loads the student's own enrolments alongside the catalog; a class they already have an active enrolment in shows "You are enrolled in this class." instead of the Enrol button, in both the browse-all catalog and the single-class embed mode. Previously the button always rendered and a duplicate attempt walked the student through the whole questions/policies flow before failing with 409 already_enrolled. A cancelled enrolment does not block re-enrolling, matching the server-side duplicate rule. Closes #61 Co-Authored-By: Claude Fable 5 <[email protected]>
2026-07-05 23:41:01 -03:00
parent a9f0b8c066
commit 30b0112431
2 changed files with 24 additions and 4 deletions
@@ -89,7 +89,7 @@
        return `${formatDate(o.term_start)} – ${formatDate(o.term_end)} (${sessions} weekly sessions)`;
    }

-    function renderClasses(offerings) {
+    function renderClasses(offerings, enrolledOfferingIds) {
        let groups = offerings.filter((o) => o.kind === 'group_class');
        if (singleOfferingId) {
            groups = groups.filter((o) => Number(o.id) === singleOfferingId);
@@ -108,7 +108,9 @@
                ${o.schedule_note ? `<p>${escHtml(o.schedule_note)}</p>` : ''}
                ${o.description ? `<p>${escHtml(o.description)}</p>` : ''}
                <p>${escHtml(Number(o.price).toFixed(2))} ${escHtml(o.currency)}</p>
-                <button data-offering-id="${o.id}" class="us-enrol-btn">Enrol</button>
+                ${enrolledOfferingIds.has(Number(o.id))
+        ? '<p class="us-enrolled"><strong>You are enrolled in this class.</strong></p>'
+        : `<button data-offering-id="${o.id}" class="us-enrol-btn">Enrol</button>`}
            </div>
        `).join('');

@@ -188,8 +190,20 @@
        clearError();
        list.style.display = 'block';
        confirm.style.display = 'none';
-        apiFetch('offerings?kind=group_class')
-            .then(renderClasses)
+        // The student's own enrolments are fetched alongside the catalog so a
+        // class they already have an active enrolment in shows its status
+        // instead of offering to enrol them again (the API would reject the
+        // duplicate anyway). A cancelled enrolment does not block re-enrolling.
+        Promise.all([
+            apiFetch('offerings?kind=group_class'),
+            apiFetch('enrollments'),
+        ])
+            .then(([offerings, enrollments]) => renderClasses(
+                offerings,
+                new Set(enrollments
+                    .filter((e) => e.status === 'active')
+                    .map((e) => Number(e.offering_id)))
+            ))
            .catch((err) => showError(err.message));
    }