From 47b354db12ab6bc6899c78358e6f72eb8bc15551 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Mon, 28 Apr 2025 20:29:30 +0200
Subject: [PATCH] feat: course page changes

---
 .../(withmenu)/course/[courseuuid]/course.tsx | 360 +++++++++---------
 1 file changed, 185 insertions(+), 175 deletions(-)

diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
index 236415c3..41dfbbb1 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
@@ -60,6 +60,16 @@ const CourseClient = (props: any) => {
 
   useEffect(() => {
     getLearningTags()
+
+    // Collapse chapters by default if more than 5 activities in total
+    if (course?.chapters) {
+      const totalActivities = course.chapters.reduce((sum: number, chapter: any) => sum + (chapter.activities?.length || 0), 0)
+      const defaultExpanded: {[key: string]: boolean} = {}
+      course.chapters.forEach((chapter: any) => {
+        defaultExpanded[chapter.chapter_uuid] = totalActivities <= 5
+      })
+      setExpandedChapters(defaultExpanded)
+    }
   }, [org, course])
 
   const getActivityTypeLabel = (activityType: string) => {
@@ -117,191 +127,52 @@ const CourseClient = (props: any) => {
       ) : (
         <>
           <GeneralWrapperStyled>
-            <div className="pb-3 flex flex-col md:flex-row justify-between items-start md:items-center">
+            <div className="pb-2 pt-5 flex flex-col md:flex-row justify-between items-start md:items-center">
               <div>
                 <p className="text-md font-bold text-gray-400 pb-2">Course</p>
                 <h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
               </div>
             </div>
 
-            {props.course?.thumbnail_image && org ? (
-              <div
-                className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[200px] md:h-[400px] bg-cover bg-center mb-4"
-                style={{
-                  backgroundImage: `url(${getCourseThumbnailMediaDirectory(
-                    org?.org_uuid,
-                    course?.course_uuid,
-                    course?.thumbnail_image
-                  )})`,
-                }}
-              ></div>
-            ) : (
-              <div
-                className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[400px] bg-cover bg-center mb-4"
-                style={{
-                  backgroundImage: `url('../empty_thumbnail.png')`,
-                  backgroundSize: 'auto',
-                }}
-              ></div>
-            )}
-
-            <ActivityIndicators
-              course_uuid={props.course.course_uuid}
-              orgslug={orgslug}
-              course={course}
-            />
-
-            <div className="flex flex-col md:flex-row md:space-x-10 space-y-6 md:space-y-0 pt-10">
-              <div className="course_metadata_left w-full md:basis-3/4 space-y-2">
-                <h2 className="py-3 text-2xl font-bold">About</h2>
-                <div className="">
-                  <p className="py-5  whitespace-pre-wrap">{course.about}</p>
-                </div>
-
-                {learnings.length > 0 && learnings[0]?.text !== 'null' && (
-                  <div>
-                    <h2 className="py-3 text-2xl font-bold">
-                      What you will learn
-                    </h2>
-                    <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden px-5 py-5 space-y-2">
-                      {learnings.map((learning: any) => {
-                        // Handle both new format (object with text and emoji) and legacy format (string)
-                        const learningText = typeof learning === 'string' ? learning : learning.text
-                        const learningEmoji = typeof learning === 'string' ? null : learning.emoji
-                        const learningId = typeof learning === 'string' ? learning : learning.id || learning.text
-                        
-                        if (!learningText) return null
-                        
-                        return (
-                          <div
-                            key={learningId}
-                            className="flex space-x-2 items-center font-semibold text-gray-500"
-                          >
-                            <div className="px-2 py-2 rounded-full">
-                              {learningEmoji ? (
-                                <span>{learningEmoji}</span>
-                              ) : (
-                                <Check className="text-gray-400" size={15} />
-                              )}
-                            </div>
-                            <p>{learningText}</p>
-                            {learning.link && (
-                              <a 
-                                href={learning.link} 
-                                target="_blank" 
-                                rel="noopener noreferrer"
-                                className="text-blue-500 hover:underline text-sm"
-                              >
-                                <span className="sr-only">Link to {learningText}</span>
-                                <ArrowRight size={14} />
-                              </a>
-                            )}
-                          </div>
-                        )
-                      })}
-                    </div>
-                  </div>
+            <div className="flex flex-col md:flex-row gap-8 pt-2">
+              <div className="w-full md:w-3/4 space-y-4">
+                {props.course?.thumbnail_image && org ? (
+                  <div
+                    className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-full h-[200px] md:h-[400px] bg-cover bg-center"
+                    style={{
+                      backgroundImage: `url(${getCourseThumbnailMediaDirectory(
+                        org?.org_uuid,
+                        course?.course_uuid,
+                        course?.thumbnail_image
+                      )})`,
+                    }}
+                  ></div>
+                ) : (
+                  <div
+                    className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-full h-[400px] bg-cover bg-center"
+                    style={{
+                      backgroundImage: `url('../empty_thumbnail.png')`,
+                      backgroundSize: 'auto',
+                    }}
+                  ></div>
                 )}
 
-                <h2 className="py-3 text-xl md:text-2xl font-bold">Course Lessons</h2>
-                <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
-                  {course.chapters.map((chapter: any) => {
-                    const isExpanded = expandedChapters[chapter.chapter_uuid] ?? true; // Default to expanded
-                    return (
-                      <div key={chapter.chapter_uuid || `chapter-${chapter.name}`} className="">
-                        <div 
-                          className="flex text-lg py-4 px-4 outline outline-1 outline-neutral-200/40 font-bold bg-neutral-50 text-neutral-600 items-center cursor-pointer hover:bg-neutral-100 transition-colors"
-                          onClick={() => setExpandedChapters(prev => ({
-                            ...prev,
-                            [chapter.chapter_uuid]: !isExpanded
-                          }))}
-                        >
-                          <h3 className="grow mr-3 break-words">{chapter.name}</h3>
-                          <div className="flex items-center space-x-3">
-                            <p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap shrink-0">
-                              {chapter.activities.length} Activities
-                            </p>
-                            <svg 
-                              className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`} 
-                              fill="none" 
-                              stroke="currentColor" 
-                              viewBox="0 0 24 24"
-                            >
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                            </svg>
-                          </div>
-                        </div>
-                        <div className={`py-3 transition-all duration-200 ${isExpanded ? 'block' : 'hidden'}`}>
-                          <div className="py-3">
-                            {chapter.activities.map((activity: any) => {
-                              return (
-                                <div key={activity.activity_uuid} className="activity-container">
-                                  <div className="group hover:bg-neutral-50 transition-colors  px-4 py-3">
-                                    <div className="flex space-x-3 items-center">
-                                      <div className="flex items-center">
-                                        {isActivityDone(activity) ? (
-                                          <div className="relative cursor-pointer">
-                                            <Square size={18} className="stroke-[2] text-teal-600" />
-                                            <Check size={18} className="stroke-[2.5] text-teal-600 absolute top-0 left-0" />
-                                          </div>
-                                        ) : (
-                                          <div className="text-neutral-300 cursor-pointer">
-                                            <Square size={18} className="stroke-[2]" />
-                                          </div>
-                                        )}
-                                      </div>
-                                      <Link
-                                        className="flex flex-col grow"
-                                        href={
-                                          getUriWithOrg(orgslug, '') +
-                                          `/course/${courseuuid}/activity/${activity.activity_uuid.replace(
-                                            'activity_',
-                                            ''
-                                          )}`
-                                        }
-                                        rel="noopener noreferrer"
-                                        prefetch={false}
-                                      >
-                                        <div className="flex items-center space-x-2 w-full">
-                                          <p className="font-semibold text-neutral-600 group-hover:text-neutral-800 transition-colors">{activity.name}</p>
-                                          {isActivityCurrent(activity) && (
-                                            <div className="flex items-center space-x-1 text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full text-xs font-semibold animate-pulse">
-                                              <span>Current</span>
-                                            </div>
-                                          )}
-                                        </div>
-                                        <div className="flex items-center space-x-1.5 mt-1 text-neutral-400">
-                                          {activity.activity_type === 'TYPE_DYNAMIC' && (
-                                            <StickyNote size={11} />
-                                          )}
-                                          {activity.activity_type === 'TYPE_VIDEO' && (
-                                            <Video size={11} />
-                                          )}
-                                          {activity.activity_type === 'TYPE_DOCUMENT' && (
-                                            <File size={11} />
-                                          )}
-                                          {activity.activity_type === 'TYPE_ASSIGNMENT' && (
-                                            <Backpack size={11} />
-                                          )}
-                                          <span className="text-xs font-medium">{getActivityTypeLabel(activity.activity_type)}</span>
-                                        </div>
-                                      </Link>
-                                      <div className="text-neutral-300 group-hover:text-neutral-400 transition-colors cursor-pointer">
-                                        <ArrowRight size={16} />
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              )
-                            })}
-                          </div>
-                        </div>
-                      </div>
-                    )
-                  })}
+                {course?.trail?.runs?.find((run: any) => run.course_id == course.id) && (
+                  <ActivityIndicators
+                    course_uuid={props.course.course_uuid}
+                    orgslug={orgslug}
+                    course={course}
+                  />
+                )}
+
+                <div className="course_metadata_left space-y-2">
+                  <div className="">
+                    <p className="py-5 whitespace-pre-wrap">{course.about}</p>
+                  </div>
                 </div>
               </div>
-              <div className='course_metadata_right basis-1/4 space-y-4'>
+
+              <div className='course_metadata_right w-full md:w-1/4 space-y-4'>
                 {/* Actions Box */}
                 <CoursesActions courseuuid={courseuuid} orgslug={orgslug} course={course} />
                 
@@ -313,6 +184,145 @@ const CourseClient = (props: any) => {
                 </div>
               </div>
             </div>
+
+            {learnings.length > 0 && learnings[0]?.text !== 'null' && (
+              <div className="w-full">
+                <h2 className="py-5 text-xl md:text-2xl font-bold">What you will learn</h2>
+                <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden px-5 py-5 space-y-2">
+                  {learnings.map((learning: any) => {
+                    // Handle both new format (object with text and emoji) and legacy format (string)
+                    const learningText = typeof learning === 'string' ? learning : learning.text
+                    const learningEmoji = typeof learning === 'string' ? null : learning.emoji
+                    const learningId = typeof learning === 'string' ? learning : learning.id || learning.text
+                    
+                    if (!learningText) return null
+                    
+                    return (
+                      <div
+                        key={learningId}
+                        className="flex space-x-2 items-center font-semibold text-gray-500"
+                      >
+                        <div className="px-2 py-2 rounded-full">
+                          {learningEmoji ? (
+                            <span>{learningEmoji}</span>
+                          ) : (
+                            <Check className="text-gray-400" size={15} />
+                          )}
+                        </div>
+                        <p>{learningText}</p>
+                        {learning.link && (
+                          <a 
+                            href={learning.link} 
+                            target="_blank" 
+                            rel="noopener noreferrer"
+                            className="text-blue-500 hover:underline text-sm"
+                          >
+                            <span className="sr-only">Link to {learningText}</span>
+                            <ArrowRight size={14} />
+                          </a>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+
+            <div className="w-full my-5 mb-10">
+              <h2 className="py-5 text-xl md:text-2xl font-bold">Course Lessons</h2>
+              <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
+                {course.chapters.map((chapter: any) => {
+                  const isExpanded = expandedChapters[chapter.chapter_uuid] ?? true; // Default to expanded
+                  return (
+                    <div key={chapter.chapter_uuid || `chapter-${chapter.name}`} className="">
+                      <div 
+                        className="flex text-lg py-4 px-4 outline outline-1 outline-neutral-200/40 font-bold bg-neutral-50 text-neutral-600 items-center cursor-pointer hover:bg-neutral-100 transition-colors"
+                        onClick={() => setExpandedChapters(prev => ({
+                          ...prev,
+                          [chapter.chapter_uuid]: !isExpanded
+                        }))}
+                      >
+                        <h3 className="grow mr-3 break-words">{chapter.name}</h3>
+                        <div className="flex items-center space-x-3">
+                          <p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap shrink-0">
+                            {chapter.activities.length} Activities
+                          </p>
+                          <svg 
+                            className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`} 
+                            fill="none" 
+                            stroke="currentColor" 
+                            viewBox="0 0 24 24"
+                          >
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                          </svg>
+                        </div>
+                      </div>
+                      <div className={`transition-all duration-200 ${isExpanded ? 'block' : 'hidden'}`}>
+                        <div className="">
+                          {chapter.activities.map((activity: any) => {
+                            return (
+                              <Link
+                                key={activity.activity_uuid}
+                                href={
+                                  getUriWithOrg(orgslug, '') +
+                                  `/course/${courseuuid}/activity/${activity.activity_uuid.replace('activity_', '')}`
+                                }
+                                rel="noopener noreferrer"
+                                prefetch={false}
+                                className="block group activity-container transition-all duration-200 px-4 py-4"
+                              >
+                                <div className="flex space-x-3 items-center">
+                                  <div className="flex items-center">
+                                    {isActivityDone(activity) ? (
+                                      <div className="relative cursor-pointer">
+                                        <Square size={16} className="stroke-[2] text-teal-600" />
+                                        <Check size={16} className="stroke-[2.5] text-teal-600 absolute top-0 left-0" />
+                                      </div>
+                                    ) : (
+                                      <div className="text-neutral-300 cursor-pointer">
+                                        <Square size={16} className="stroke-[2]" />
+                                      </div>
+                                    )}
+                                  </div>
+                                  <div className="flex flex-col grow">
+                                    <div className="flex items-center space-x-2 w-full">
+                                      <p className="font-semibold text-neutral-600 group-hover:text-neutral-800 transition-colors">{activity.name}</p>
+                                      {isActivityCurrent(activity) && (
+                                        <div className="flex items-center space-x-1 text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full text-xs font-semibold animate-pulse">
+                                          <span>Current</span>
+                                        </div>
+                                      )}
+                                    </div>
+                                    <div className="flex items-center space-x-1.5 mt-0.5 text-neutral-400">
+                                      {activity.activity_type === 'TYPE_DYNAMIC' && (
+                                        <StickyNote size={10} />
+                                      )}
+                                      {activity.activity_type === 'TYPE_VIDEO' && (
+                                        <Video size={10} />
+                                      )}
+                                      {activity.activity_type === 'TYPE_DOCUMENT' && (
+                                        <File size={10} />
+                                      )}
+                                      {activity.activity_type === 'TYPE_ASSIGNMENT' && (
+                                        <Backpack size={10} />
+                                      )}
+                                      <span className="text-xs font-medium">{getActivityTypeLabel(activity.activity_type)}</span>
+                                    </div>
+                                  </div>
+                                  <div className="text-neutral-300 group-hover:text-neutral-400 transition-colors cursor-pointer">
+                                    <ArrowRight size={14} />
+                                  </div>
+                                </div>
+                              </Link>
+                            )
+                          })}
+                        </div>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
           </GeneralWrapperStyled>
           
           {isMobile && (