Skip to content

Bug: ModuleList always shows all modules as incomplete #4

Description

@DeFiVC

Description

On the course detail page (src/app/courses/[courseId]/page.tsx, line 172), the ModuleList component always receives completedModuleIds={[]}:

<ModuleList
  courseId={courseId}
  modules={course.modules}
  completedModuleIds={[]}      // BUG: always empty
  currentModuleId={courseProgress?.currentModuleId}
/>

This means after completing modules, they still show as incomplete (lock icon or empty circle) instead of a green checkmark when the user returns to the course detail page.

Why this happens

The ModuleList component (src/components/course/module-list.tsx) correctly handles the completedModuleIds prop — it checks completedModuleIds.includes(mod.id) at line 32 to determine if a module is completed. But the parent page never passes real data.

Where the data comes from

The courseProgress object (from useCourseStore) has a completedModules field. Looking at src/store/course-store.ts, the progress map stores per-course progress with completedModules: string[].

The fix

In src/app/courses/[courseId]/page.tsx, pass the actual completed module IDs:

// Before (line 169-174):
<ModuleList
  courseId={courseId}
  modules={course.modules}
  completedModuleIds={[]}
  currentModuleId={courseProgress?.currentModuleId}
/>

// After:
<ModuleList
  courseId={courseId}
  modules={course.modules}
  completedModuleIds={courseProgress?.completedModules ?? []}
  currentModuleId={courseProgress?.currentModuleId}
/>

If courseProgress does not have completedModules, check the useCourseStore type definition and the progress map structure. The store's updateProgress action at src/store/course-store.ts should be setting this field when modules are completed.

Files to change

  • src/app/courses/[courseId]/page.tsx — line 172

How to verify

  1. Enroll in a course
  2. Complete 2 of 3 modules
  3. Navigate back to the course detail page
  4. The first 2 modules should show green checkmarks (CheckCircle icon)
  5. The 3rd module should show the current/next indicator
  6. Before the fix, all 3 would show as incomplete

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinggood first issueGood for newcomersreactReact framework

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions