feat: migrate editor page to server component

front/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx

@@ -0,0 +1,9 @@
+import PageLoading from "@components/Pages/PageLoading";
+
+export default function Loading() {
+    // Or a custom loading skeleton component
+    return (
+        <PageLoading></PageLoading>
+    )
+
+}

front/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx

@@ -1,34 +1,52 @@
-
+import { default as React, } from "react";
-"use client";
-import { default as React, useEffect, useRef } from "react";
-
-
 import { useRouter } from "next/navigation";
-import { getActivity } from "@services/courses/activities";
 import AuthProvider from "@components/Security/AuthProvider";
 import EditorWrapper from "@components/Editor/EditorWrapper";
-import useSWR, { mutate } from "swr";
+import { getAPIUrl } from "@services/config/config";
-import { getAPIUrl, getOrgFromUri } from "@services/config/config";
 import { swrFetcher } from "@services/utils/ts/requests";
+import { getOrganizationContextInfo } from "@services/organizations/orgs";
+import { getCourseMetadataWithAuthHeader } from "@services/courses/courses";
+import { cookies } from "next/headers";
+import { Metadata } from "next";
+import { getActivityWithAuthHeader } from "@services/courses/activities";
 
+type MetadataProps = {
+  params: { orgslug: string, courseid: string, activityid: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
 
-function EditActivity(params: any) {
+export async function generateMetadata(
-  const router = useRouter();
+  { params }: MetadataProps,
+): Promise<Metadata> {
+  const cookieStore = cookies();
+  const access_token_cookie: any = cookieStore.get('access_token_cookie');
+
+  // Get Org context information 
+  const course_meta = await getCourseMetadataWithAuthHeader(params.courseid, { revalidate: 360, tags: ['courses'] }, access_token_cookie.value)
+
+  return {
+    title: `Edit - ${course_meta.course.name} Activity`,
+    description: course_meta.course.mini_description,
+  };
+}
+
+const EditActivity = async (params: any) => {
+  const cookieStore = cookies();
+  const access_token_cookie: any = cookieStore.get('access_token_cookie');
   const activityid = params.params.activityid;
   const courseid = params.params.courseid;
   const orgslug = params.params.orgslug;
-  const { data: courseInfo, error: error_course } = useSWR(`${getAPIUrl()}courses/meta/course_${courseid}`, swrFetcher);
-  const { data: activity, error: error_activity } = useSWR(`${getAPIUrl()}activities/activity_${activityid}`, swrFetcher);
-
-  
-
 
+  const courseInfo = await getCourseMetadataWithAuthHeader(courseid, { revalidate: 0, tags: ['courses'] }, access_token_cookie.value)
+  const activity = await getActivityWithAuthHeader(activityid, { revalidate: 0, tags: ['activities'] }, access_token_cookie.value)
 
 
   return (
+    <div>
       <AuthProvider>
-      {!courseInfo || !activity  ? <div>Loading...</div> : <EditorWrapper orgslug={orgslug} course={courseInfo} activity={activity} content={activity.content}></EditorWrapper>}
+        <EditorWrapper orgslug={orgslug} course={courseInfo} activity={activity} content={activity.content}></EditorWrapper>
       </AuthProvider>
+    </div>
   );
 }
 

front/components/Editor/Editor.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";

front/components/Editor/EditorWrapper.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { default as React, } from "react";
 import * as Y from "yjs";
 import { WebrtcProvider } from "y-webrtc";

front/components/UI/Modal/Modal.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { styled, keyframes } from '@stitches/react';

front/components/UI/Toast/Toast.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react'
 import { Toaster } from 'react-hot-toast';
 

front/components/UI/Tooltip/Tooltip.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { styled, keyframes } from '@stitches/react';