From 744e372f4ebea6bb9f5b4a030beda86437d0337b Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sun, 16 Mar 2025 15:23:02 +0100
Subject: [PATCH] refactor: improve perf on the frontend

---
 .../activity/[activityid]/activity.tsx        |  1 +
 .../activity/[activityid]/page.tsx            | 68 +++++++++++--------
 .../(withmenu)/course/[courseuuid]/course.tsx |  5 ++
 .../(withmenu)/course/[courseuuid]/page.tsx   | 23 +++----
 .../DraggableElements/ActivityElement.tsx     |  3 -
 .../Pages/Courses/ActivityIndicators.tsx      |  2 +-
 apps/web/services/courses/activities.ts       |  4 +-
 apps/web/services/courses/courses.ts          |  6 +-
 8 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
index f0728c3f..f3327327 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
@@ -499,6 +499,7 @@ function ActivityChapterDropdown(props: {
                       <Link
                         key={activity.id}
                         href={getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${cleanActivityUuid}`}
+                        prefetch={false}
                         onClick={() => setIsOpen(false)}
                       >
                         <div 
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx
index e43b871f..911ba54b 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx
@@ -11,25 +11,36 @@ type MetadataProps = {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>
 }
 
+type Session = {
+  tokens?: {
+    access_token?: string
+  }
+}
+
+// Add this function at the top level to avoid duplicate fetches
+async function fetchCourseMetadata(courseuuid: string, access_token: string | null | undefined) {
+  return await getCourseMetadata(
+    courseuuid,
+    { revalidate: 1800, tags: ['courses'] },
+    access_token || null
+  )
+}
+
 export async function generateMetadata(props: MetadataProps): Promise<Metadata> {
   const params = await props.params;
-  const session = await getServerSession(nextAuthOptions)
-  const access_token = session?.tokens?.access_token
+  const session = await getServerSession(nextAuthOptions as any) as Session
+  const access_token = session?.tokens?.access_token || null
 
   // Get Org context information
   const org = await getOrganizationContextInfo(params.orgslug, {
     revalidate: 1800,
     tags: ['organizations'],
   })
-  const course_meta = await getCourseMetadata(
-    params.courseuuid,
-    { revalidate: 0, tags: ['courses'] },
-    access_token ? access_token : null
-  )
+  const course_meta = await fetchCourseMetadata(params.courseuuid, access_token)
   const activity = await getActivityWithAuthHeader(
     params.activityid,
-    { revalidate: 0, tags: ['activities'] },
-    access_token ? access_token : null
+    { revalidate: 1800, tags: ['activities'] },
+    access_token || null
   )
 
   // SEO
@@ -57,32 +68,29 @@ export async function generateMetadata(props: MetadataProps): Promise<Metadata>
 }
 
 const ActivityPage = async (params: any) => {
-  const session = await getServerSession(nextAuthOptions)
-  const access_token = session?.tokens?.access_token
+  const session = await getServerSession(nextAuthOptions as any) as Session
+  const access_token = session?.tokens?.access_token || null
   const activityid = (await params.params).activityid
   const courseuuid = (await params.params).courseuuid
   const orgslug = (await params.params).orgslug
 
-  const course_meta = await getCourseMetadata(
-    courseuuid,
-    { revalidate: 0, tags: ['courses'] },
-    access_token ? access_token : null
-  )
-  const activity = await getActivityWithAuthHeader(
-    activityid,
-    { revalidate: 0, tags: ['activities'] },
-    access_token ? access_token : null
-  )
+  const [course_meta, activity] = await Promise.all([
+    fetchCourseMetadata(courseuuid, access_token),
+    getActivityWithAuthHeader(
+      activityid,
+      { revalidate: 1800, tags: ['activities'] },
+      access_token || null
+    )
+  ])
+
   return (
-    <>
-      <ActivityClient
-        activityid={activityid}
-        courseuuid={courseuuid}
-        orgslug={orgslug}
-        activity={activity}
-        course={course_meta}
-      />
-    </>
+    <ActivityClient
+      activityid={activityid}
+      courseuuid={courseuuid}
+      orgslug={orgslug}
+      activity={activity}
+      course={course_meta}
+    />
   )
 }
 
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 6bcba6dd..c3ebb3a0 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
@@ -223,6 +223,7 @@ const CourseClient = (props: any) => {
                                       )}`
                                     }
                                     rel="noopener noreferrer"
+                                    prefetch={false}
                                   >
                                     <p>{activity.name}</p>
                                   </Link>
@@ -240,6 +241,7 @@ const CourseClient = (props: any) => {
                                               )}`
                                             }
                                             rel="noopener noreferrer"
+                                            prefetch={false}
                                           >
                                             <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
                                               <p>Page</p>
@@ -260,6 +262,7 @@ const CourseClient = (props: any) => {
                                             )}`
                                           }
                                           rel="noopener noreferrer"
+                                          prefetch={false}
                                         >
                                           <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
                                             <p>Video</p>
@@ -281,6 +284,7 @@ const CourseClient = (props: any) => {
                                               )}`
                                             }
                                             rel="noopener noreferrer"
+                                            prefetch={false}
                                           >
                                             <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
                                               <p>Document</p>
@@ -302,6 +306,7 @@ const CourseClient = (props: any) => {
                                               )}`
                                             }
                                             rel="noopener noreferrer"
+                                            prefetch={false}
                                           >
                                             <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
                                               <p>Assignment</p>
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/page.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/page.tsx
index 1bd761be..d0c721a4 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/page.tsx
@@ -24,7 +24,7 @@ export async function generateMetadata(props: MetadataProps): Promise<Metadata>
   })
   const course_meta = await getCourseMetadata(
     params.courseuuid,
-    { revalidate: 0, tags: ['courses'] },
+    { revalidate: 1800, tags: ['courses'] },
     access_token ? access_token : null
   )
 
@@ -66,24 +66,23 @@ export async function generateMetadata(props: MetadataProps): Promise<Metadata>
 }
 
 const CoursePage = async (params: any) => {
-  const courseuuid = (await params.params).courseuuid
-  const orgslug = (await params.params).orgslug
   const session = await getServerSession(nextAuthOptions)
   const access_token = session?.tokens?.access_token
+
+  // Fetch course metadata once
   const course_meta = await getCourseMetadata(
-    courseuuid,
-    { revalidate: 0, tags: ['courses'] },
+    params.params.courseuuid,
+    { revalidate: 1800, tags: ['courses'] },
     access_token ? access_token : null
   )
 
   return (
-    <div>
-      <CourseClient
-        courseuuid={courseuuid}
-        orgslug={orgslug}
-        course={course_meta}
-      />
-    </div>
+    <CourseClient
+      courseuuid={params.params.courseuuid}
+      orgslug={params.params.orgslug}
+      course={course_meta}
+      access_token={access_token}
+    />
   )
 }
 
diff --git a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
index c7a1d34f..a4b9e584 100644
--- a/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
+++ b/apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
@@ -191,7 +191,6 @@ function ActivityElement(props: ActivitiyElementProps) {
                     ''
                   )}`
                 }
-                prefetch
                 className="p-1 px-2 sm:px-3 bg-linear-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 hover:from-sky-500/50 hover:to-cyan-300/80"
                 rel="noopener noreferrer"
               >
@@ -296,7 +295,6 @@ const ActivityElementOptions = ({ activity, isMobile }: { activity: any; isMobil
                 ''
               )}/edit`
             }
-            prefetch
             className={`hover:cursor-pointer p-1 ${isMobile ? 'px-2' : 'px-3'} bg-sky-700 rounded-md items-center`}
             target='_blank'
           >
@@ -313,7 +311,6 @@ const ActivityElementOptions = ({ activity, isMobile }: { activity: any; isMobil
               getUriWithOrg(org.slug, '') +
               `/dash/assignments/${assignmentUUID}`
             }
-            prefetch
             className={`hover:cursor-pointer p-1 ${isMobile ? 'px-2' : 'px-3'} bg-teal-700 rounded-md items-center`}
           >
             <div className="text-sky-100 font-bold text-xs flex items-center space-x-1">
diff --git a/apps/web/components/Pages/Courses/ActivityIndicators.tsx b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
index 59f32a48..8fb212a3 100644
--- a/apps/web/components/Pages/Courses/ActivityIndicators.tsx
+++ b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
@@ -65,7 +65,7 @@ function ActivityIndicators(props: Props) {
                     key={activity.activity_uuid}
                   >
                     <Link
-                      prefetch={true}
+                      prefetch={false}
                       href={
                         getUriWithOrg(orgslug, '') +
                         `/course/${courseid}/activity/${activity.activity_uuid.replace(
diff --git a/apps/web/services/courses/activities.ts b/apps/web/services/courses/activities.ts
index e2c41f2f..89cf748f 100644
--- a/apps/web/services/courses/activities.ts
+++ b/apps/web/services/courses/activities.ts
@@ -111,11 +111,11 @@ export async function deleteActivity(activity_uuid: any, access_token: string) {
 export async function getActivityWithAuthHeader(
   activity_uuid: any,
   next: any,
-  access_token: string
+  access_token: string | null | undefined
 ) {
   const result = await fetch(
     `${getAPIUrl()}activities/activity_${activity_uuid}`,
-    RequestBodyWithAuthHeader('GET', null, next, access_token)
+    RequestBodyWithAuthHeader('GET', null, next, access_token || undefined)
   )
   const res = await result.json()
   return res
diff --git a/apps/web/services/courses/courses.ts b/apps/web/services/courses/courses.ts
index bdcb9c37..562a219e 100644
--- a/apps/web/services/courses/courses.ts
+++ b/apps/web/services/courses/courses.ts
@@ -41,13 +41,13 @@ export async function searchOrgCourses(
 }
 
 export async function getCourseMetadata(
-  course_uuid: any,
+  course_uuid: string,
   next: any,
-  access_token: string
+  access_token: string | null | undefined
 ) {
   const result = await fetch(
     `${getAPIUrl()}courses/course_${course_uuid}/meta`,
-    RequestBodyWithAuthHeader('GET', null, next, access_token)
+    RequestBodyWithAuthHeader('GET', null, next, access_token || undefined)
   )
   const res = await errorHandling(result)
   return res