feat: get element content from Course

front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx

@@ -6,9 +6,8 @@ import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { getElement } from "../../../../../../../services/courses/elements";
 
-// Workarkound (Next.js SSR doesn't support tip tap editor)
-
-const Editor : any = dynamic(() => import("../../../../../../../components/editor/editor"), {
+// Workaround (Next.js SSR doesn't support tip tap editor)
+const Editor: any = dynamic(() => import("../../../../../../../components/editor/Editor") as any, {
   ssr: false,
 });
 
@@ -29,11 +28,12 @@ function EditElement() {
       fetchElementData();
     }
     return () => {};
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.isReady]);
 
   return (
     <Layout>
-      <Title>Edit Page </Title>
+      <Title>Edit : {element.name} </Title>
       <br />
       {isLoading ? (
         <div>Loading...</div>

front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx

@@ -1,9 +1,56 @@
-import React from 'react'
+import Bold from "@tiptap/extension-bold";
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import StarterKit from "@tiptap/starter-kit";
+import Text from "@tiptap/extension-text";
+import { generateHTML } from "@tiptap/html";
+import { useRouter } from "next/router";
+import React, { useMemo } from "react";
+import Layout from "../../../../../../../components/ui/Layout";
+import { getElement } from "../../../../../../../services/courses/elements";
 
 function ElementPage() {
+  const router = useRouter();
+  const { elementid } = router.query;
+  const [element, setElement] = React.useState<any>({});
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  async function fetchElementData() {
+    const element = await getElement("element_" + elementid);
+    setElement(element);
+    setIsLoading(false);
+  }
+
+  React.useEffect(() => {
+    if (router.isReady) {
+      fetchElementData();
+    }
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady]);
+
+  const output = useMemo(() => {
+    if (router.isReady) {
+      console.log("element", element.content);
+
+      return generateHTML(element.content, [Document, StarterKit, Paragraph, Text, Bold]);
+    }
+  }, [element.content]);
+
   return (
-    <div>ElementPage</div>
-  )
+    <Layout>
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <div>
+          <p>element</p>
+          <h1>{element.name}</h1>
+          <hr />
+          <div dangerouslySetInnerHTML={{ __html: output } as any}></div>
+        </div>
+      )}
+    </Layout>
+  );
 }
 
-export default ElementPage
+export default ElementPage;

front/pages/org/[orgslug]/course/[courseid]/index.tsx

@@ -17,7 +17,7 @@ const CourseIdPage = () => {
     const course = await getCourse("course_" + courseid);
 
     setCourseInfo(course);
-    console.log(courseInfo);
+    console.log("courseinfo" , courseInfo);
 
     setIsLoading(false);
   }
@@ -27,6 +27,7 @@ const CourseIdPage = () => {
       fetchCourseInfo();
     }
     return () => {};
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.isReady]);
 
   return (