From 29f56f288d023184798bd07649f09e4b387831bc Mon Sep 17 00:00:00 2001
From: alex-strapi <alex.bennett@strapi.io>
Date: Fri, 17 Jan 2025 10:34:45 +0000
Subject: [PATCH] Fix: Amend to select the correct section/module on initial
 load if no progress is made

---
 .../_dashboardLayout/courses/$courseSlug.tsx  | 50 +++++++++++--------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/frontend/src/routes/_dashboardLayout/courses/$courseSlug.tsx b/frontend/src/routes/_dashboardLayout/courses/$courseSlug.tsx
index 258ffbc..dce8752 100644
--- a/frontend/src/routes/_dashboardLayout/courses/$courseSlug.tsx
+++ b/frontend/src/routes/_dashboardLayout/courses/$courseSlug.tsx
@@ -106,28 +106,38 @@ const SingleCourse: React.FC = () => {
         (status) => status.course?.documentId === course.documentId,
       );
 
-      if (!courseStatus) return;
-
-      const progressMap: Record<string, number> = courseStatus.sections.reduce(
-        (acc, sectionStatus) => ({
-          ...acc,
-          ...Object.fromEntries(
-            sectionStatus.modules.map((moduleStatus) => [
-              moduleStatus.module.documentId,
-              moduleStatus.progress,
-            ]),
-          ),
-        }),
-        {},
-      );
+      let progressMap: Record<string, number> = {};
+
+      if (courseStatus) {
+        progressMap = courseStatus.sections.reduce(
+          (acc, sectionStatus) => ({
+            ...acc,
+            ...Object.fromEntries(
+              sectionStatus.modules.map((moduleStatus) => [
+                moduleStatus.module.documentId,
+                moduleStatus.progress,
+              ]),
+            ),
+          }),
+          {},
+        );
+      }
 
       setModuleProgress(progressMap);
 
-      // Ensure active states are only set if not already
       if (!activeModuleDocumentId && !activeSectionDocumentId) {
-        const firstIncompleteModule = course.sections
-          .flatMap((section) => section.modules)
-          .find((module) => (progressMap[module.documentId] || 0) < 100);
+        let firstIncompleteModule: Module | undefined;
+
+        if (courseStatus) {
+          firstIncompleteModule = course.sections
+            .flatMap((section) => section.modules)
+            .find((module) => (progressMap[module.documentId] || 0) < 100);
+        }
+
+        // If no progress or all modules are complete, select the first module
+        if (!firstIncompleteModule) {
+          firstIncompleteModule = course.sections[0]?.modules[0];
+        }
 
         if (firstIncompleteModule) {
           setActiveModuleDocumentId(firstIncompleteModule.documentId);
@@ -135,7 +145,7 @@ const SingleCourse: React.FC = () => {
             course.sections.find((section) =>
               section.modules.some(
                 (module) =>
-                  module.documentId === firstIncompleteModule.documentId,
+                  module.documentId === firstIncompleteModule?.documentId,
               ),
             )?.documentId || null,
           );
@@ -339,7 +349,7 @@ const SingleCourse: React.FC = () => {
           className="mb-6 flex items-center justify-center gap-2 rounded-3xl border border-slate-400 p-2 px-4 text-left text-black hover:bg-white dark:text-white dark:hover:text-black"
         >
           <ArrowLeft />
-          <span className="text-md font-semibol">Back to courses</span>
+          <span className="text-md font-semibold">Back to courses</span>
         </Link>
         <ul className="mb-6 flex flex-wrap gap-2">
           {course.categories.map((category) => (