freeCodeCamp / freeCodeCamp/classroom

Feature: Improve teacher feedback for fetch failures and empty classrooms

Open
#606 0 comments 0 reactions 1 assignee Claimed by @NewtonLC View on GitHub
Dominant language
JavaScript
Stars
155
Forks
138
PR merge metrics
No merged PRs in 30d

Description

## Description

PR #603 fixed a crash that occurred when the student data server was offline. The fix returns `[]` on any fetch failure, which prevents the crash — but leaves the teacher with a blank dashboard and no explanation. This issue tracks two follow-on UX improvements that build on that fix.

---

### Problem 1 — The teacher can't tell if the fetch failed

`fetchStudentData()` currently returns `[]` for three distinct situations:

| Case | Cause | Relevant long-term? |
|---|---|---|
| Missing env var | `MOCK_USER_DATA_URL` not set | No — dev/config only |
| Bad HTTP response | Server returned 4xx/5xx | Yes |
| Network error | Server unreachable | Yes |

The calling code in `pages/dashboard/[id].js` receives `[]` in all cases and passes it straight to `DashTabs` as `data`. There's no way to distinguish a failed fetch from an empty class.

**Proposed fix:**

Return a structured result from `fetchStudentData()` instead of a bare array:

```js
// Success
return { error: null, data: await response.json() };

// Runtime failures (surface to teacher)
return { error: 'FETCH_FAILED', status: response.status, data: null };
return { error: 'NETWORK_ERROR', data: null };

// Config issue (dev only — keep silent, log only)
console.warn('MOCK_USER_DATA_URL is not defined.');
return { error: 'MISSING_URL', data: null };
```

`[id].js` would pass the error code as a prop. For runtime failures, the dashboard UI would render an error message: *"We couldn't load your students. Please try refreshing, or contact support at support@freecodecamp.org if the problem persists."* The `MISSING_URL` case should remain a silent console log, as it's dev-facing.

---

### Problem 2 — Empty classrooms show nothing

When a class has no students yet, `DashTabs` renders a blank page:

Image

**Proposed fix:**

In `getServerSideProps` in `[id].js`, include `fccUserIds` in the classroom query. If it's empty, the dashboard should not render an empty table. Instead, it should:
- Tell the teacher there are no students in the class yet
- Display the classroom's join link with a copy button
- Instruct the teacher to share the link with their students

---

**Files likely affected**
- `util/student/fetchStudentData.js`
- `pages/dashboard/[id].js`
- The component(s) rendered by `DashTabs` that display student data
- `prisma` query in `pages/dashboard/[id].js` (add `fccUserIds` to the select)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.