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
- Enroll in a course
- Complete 2 of 3 modules
- Navigate back to the course detail page
- The first 2 modules should show green checkmarks (CheckCircle icon)
- The 3rd module should show the current/next indicator
- Before the fix, all 3 would show as incomplete
Description
On the course detail page (
src/app/courses/[courseId]/page.tsx, line 172), theModuleListcomponent always receivescompletedModuleIds={[]}: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
ModuleListcomponent (src/components/course/module-list.tsx) correctly handles thecompletedModuleIdsprop — it checkscompletedModuleIds.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
courseProgressobject (fromuseCourseStore) has acompletedModulesfield. Looking atsrc/store/course-store.ts, theprogressmap stores per-course progress withcompletedModules: string[].The fix
In
src/app/courses/[courseId]/page.tsx, pass the actual completed module IDs:If
courseProgressdoes not havecompletedModules, check theuseCourseStoretype definition and theprogressmap structure. The store'supdateProgressaction atsrc/store/course-store.tsshould be setting this field when modules are completed.Files to change
src/app/courses/[courseId]/page.tsx— line 172How to verify