feat: improve course page

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

@@ -66,16 +66,16 @@ function CourseEdit() {
   // Submit new chapter
   const submitChapter = async (chapter: any) => {
     await createChapter(chapter, courseid);
-    getCourseChapters();
+    await getCourseChapters();
     setNewChapterModal(false);
   };
 
   // Submit new element
   const submitElement = async (element: any) => {
     console.log("submitElement", element);
-    updateChaptersMetadata(courseid, data);
+    await updateChaptersMetadata(courseid, data);
     await createElement(element, element.chapterId);
-    getCourseChapters();
+    await getCourseChapters();
     setNewElementModal(false);
   };
 

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

@@ -31,9 +31,25 @@ function ElementPage() {
 
   const output = useMemo(() => {
     if (router.isReady) {
-      console.log("element", element.content);
+      console.log( "el",element.content);
       
-      return generateHTML(element.content, [Document, StarterKit, Paragraph, Text, Bold]);
+      let content = Object.keys(element.content).length > 0 ? element.content : {
+        "type": "doc",
+        "content": [
+            {
+                "type": "paragraph",
+                "content": [
+                    {
+                        "type": "text",
+                        "text": "Hello world, this is a example Canva ⚡️"
+                    }
+                ]
+            }
+        ]
+    }
+      console.log("element", content);
+
+      return generateHTML(content, [Document, StarterKit, Paragraph, Text, Bold]);
     }
   }, [element.content]);
 
@@ -44,7 +60,7 @@ function ElementPage() {
       ) : (
         <div>
           <p>element</p>
-          <h1>{element.name}</h1>
+          <h1>{element.name} </h1>
           <hr />
           <div dangerouslySetInnerHTML={{ __html: output } as any}></div>
         </div>

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

@@ -1,26 +1,26 @@
+import { EyeOpenIcon, Pencil2Icon } from "@radix-ui/react-icons";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import React from "react";
 import styled from "styled-components";
 import Layout from "../../../../../components/ui/Layout";
 import { getAPIUrl, getBackendUrl } from "../../../../../services/config";
-import { getCourse } from "../../../../../services/courses/courses";
+import { getCourse, getCourseMetadata } from "../../../../../services/courses/courses";
 import { getOrganizationContextInfo } from "../../../../../services/orgs";
 
 const CourseIdPage = () => {
   const router = useRouter();
-  const { courseid } = router.query;
+  const { courseid, orgslug } = router.query;
 
   const [isLoading, setIsLoading] = React.useState(true);
   const [courseInfo, setCourseInfo] = React.useState({}) as any;
 
   async function fetchCourseInfo() {
-    const course = await getCourse("course_" + courseid);
+    const course = await getCourseMetadata("course_" + courseid);
 
     setCourseInfo(course);
 
 
-    console.log("courseinfo" , courseInfo);
-
     setIsLoading(false);
   }
 
@@ -37,23 +37,82 @@ const CourseIdPage = () => {
       {isLoading ? (
         <div>Loading...</div>
       ) : (
-        <div>
+        <CoursePageLayout>
           <br></br>
           <p>Course</p>
-          <h1>{courseInfo.name}</h1>
+          <h1>
-          <CourseWrapper>
+            {courseInfo.course.name}{" "}
-            <img src={`${getBackendUrl()}content/uploads/img/${courseInfo.thumbnail}`} alt="" />
+            <Link href={`/org/${orgslug}/course/${courseid}/edit`}>
-          </CourseWrapper>
+              <a target="_blank" rel="noopener noreferrer">
-        </div>
+                &nbsp; <Pencil2Icon />
+              </a>
+            </Link>{" "}
+          </h1>
+          <br />
+          <ChaptersWrapper>
+            {courseInfo.chapters.map((chapter: any) => {
+              return (
+                <>
+                  {chapter.elements.map((element: any) => {
+                    return (
+                      <>
+                        <Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
+                          <a target="_blank" rel="noopener noreferrer">
+                            <ChapterIndicator />
+                          </a>
+                        </Link>{" "}
+                      </>
+                    );
+                  })}
+                  &nbsp;&nbsp;&nbsp;&nbsp;
+                </>
+              );
+            })}
+          </ChaptersWrapper>
+
+          <CourseThumbnailWrapper>
+            <img src={`${getBackendUrl()}content/uploads/img/${courseInfo.course.thumbnail}`} alt="" />
+          </CourseThumbnailWrapper>
+
+          <h2>Description</h2>
+          <p>{courseInfo.course.description}</p>
+
+          <h2>What you will learn</h2>
+          <p>{courseInfo.course.learnings == ![] ? "no data" : courseInfo.course.learnings}</p>
+
+          <h2>Course Lessons</h2>
+
+          {courseInfo.chapters.map((chapter: any) => {
+            return (
+              <>
+                <h3>Chapter : {chapter.name}</h3>
+                {chapter.elements.map((element: any) => {
+                  return (
+                    <>
+                      <p>
+                        Element {element.name}
+                        <Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
+                          <a target="_blank" rel="noopener noreferrer">
+                            &nbsp; <EyeOpenIcon />
+                          </a>
+                        </Link>{" "}
+                      </p>
+                    </>
+                  );
+                })}
+                &nbsp;&nbsp;&nbsp;&nbsp;
+              </>
+            );
+          })}
+        </CoursePageLayout>
       )}
     </Layout>
   );
 };
 
-const CourseWrapper = styled.div`
+const CourseThumbnailWrapper = styled.div`
   display: flex;
   img {
-    position: absolute;
     width: 794px;
     height: 224.28px;
     object-fit: cover;
@@ -65,5 +124,29 @@ const CourseWrapper = styled.div`
     border-radius: 7px;
   }
 `;
+const CoursePageLayout = styled.div`
+  margin-left: 40px;
+  margin-right: 40px;
+`;
+
+const ChaptersWrapper = styled.div`
+  display: flex;
+`;
+const ChapterIndicator = styled.div`
+  border-radius: 20px;
+  height: 5px;
+  background: #151515;
+  border-radius: 3px;
+  width: 40px;
+  background-color: black;
+  margin: 10px;
+  margin-left: 0px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    width: 50px;
+    cursor: pointer;
+  }
+`;
 
 export default CourseIdPage;

front/services/courses/courses.ts

@@ -15,7 +15,7 @@ export async function getOrgCourses(org_id: number) {
     .catch((error) => console.log("error", error));
 }
 
-export async function getCourse(course_id: any) {
+export async function getCourse(course_id: string) {
   const HeadersConfig = new Headers({ "Content-Type": "application/json" });
 
   const requestOptions: any = {
@@ -31,6 +31,23 @@ export async function getCourse(course_id: any) {
     .catch((error) => console.log("error", error));
 }
 
+export async function getCourseMetadata(course_id: string) {
+  const HeadersConfig = new Headers({ "Content-Type": "application/json" });
+
+  const requestOptions: any = {
+    method: "GET",
+    headers: HeadersConfig,
+    redirect: "follow",
+    credentials: "include",
+  };
+
+  // todo : add course id to url
+  return fetch(`${getAPIUrl()}courses/meta/${course_id}`, requestOptions)
+    .then((result) => result.json())
+    .catch((error) => console.log("error", error));
+  
+}
+
 export async function createNewCourse(org_id: string, course_body: any, thumbnail: any) {
   const HeadersConfig = new Headers();