Merge pull request #4 from learnhouse/feat/elements

Course Elements Features

front/components/auth/HeaderProfileBox.tsx

@@ -30,7 +30,7 @@ export const HeaderProfileBox = () => {
         <AccountArea>
           <div>{auth.userInfo.username}</div>
           <div>
-            <Avvvatars value={auth.userInfo.username} style="shape" />
+            <Avvvatars value={auth.userInfo.user_id} style="shape" />
           </div>
         </AccountArea>
       )}

front/components/drags/element.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import React from "react";
 import {  Draggable } from "react-beautiful-dnd";
+import { EyeOpenIcon, Pencil2Icon } from '@radix-ui/react-icons'
 import styled from "styled-components";
 
 function Element(props: any) {
@@ -10,8 +11,11 @@ function Element(props: any) {
       {(provided) => (
         <ElementWrapper key={props.element.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
           <p>{props.element.name} </p>
+          <Link href={`/org/${props.orgslug}/course/${props.courseid}/element/${props.element.id.replace("element_", "")}`}>
+            <a  target="_blank" rel="noopener noreferrer">&nbsp; <EyeOpenIcon/></a>
+          </Link>
           <Link href={`/org/${props.orgslug}/course/${props.courseid}/element/${props.element.id.replace("element_", "")}/edit`}>
-            <a  target="_blank" rel="noopener noreferrer">Edit</a>
+            <a  target="_blank" rel="noopener noreferrer">&nbsp; <Pencil2Icon/></a>
           </Link>
         </ElementWrapper>
       )}

front/components/editor/Editor.tsx

@@ -2,11 +2,15 @@ import { default as React, useEffect, useRef } from "react";
 import * as Y from "yjs";
 import { WebrtcProvider } from "y-webrtc";
 import EditorWithOptions from "./EditorWithOptions";
-import { IndexeddbPersistence } from 'y-indexeddb'
+import { IndexeddbPersistence } from "y-indexeddb";
+import { updateElement } from "../../services/courses/elements";
 
-// tools
+interface EditorProps {
+  content: string;
+  element: any;
+}
 
-function Editor() {
+function Editor(props: EditorProps) {
   // A new Y document
   const ydoc = new Y.Doc();
   const [providerState, setProviderState] = React.useState<any>({});
@@ -14,19 +18,26 @@ function Editor() {
   const [isLoading, setIsLoading] = React.useState(true);
 
   function createRTCProvider() {
-    const provider = new WebrtcProvider("learnhouse-1", ydoc);
+    const provider = new WebrtcProvider(props.element.element_id, ydoc);
 
     setYdocState(ydoc);
     setProviderState(provider);
     setIsLoading(false);
   }
 
+  async function setContent(content: any) {
+    let element = props.element;
+    element.content = content;
+    const res = await updateElement(element, element.element_id);
+    
+  }
+
   if (isLoading) {
     createRTCProvider();
   } else {
     return (
       <div>
-        <EditorWithOptions provider={providerState} ydoc={ydocState}></EditorWithOptions>
+        <EditorWithOptions content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></EditorWithOptions>
       </div>
     );
   }

front/components/editor/EditorWithOptions.tsx

@@ -5,8 +5,14 @@ import Collaboration from "@tiptap/extension-collaboration";
 import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
 import { AuthContext } from "../security/AuthProvider";
 
+interface EditorWithOptionsProps {
+  content: string;
+  ydoc: any;
+  provider: any;
+  setContent: (content: string) => void;
+}
 
-function EditorWithOptions(props: any) {
+function EditorWithOptions(props: EditorWithOptionsProps) {
   const auth: any = React.useContext(AuthContext);
 
   const MenuBar = ({ editor }: any) => {
@@ -109,12 +115,11 @@ function EditorWithOptions(props: any) {
     );
   };
 
-  const editor = useEditor({
+  const editor : any = useEditor({
     extensions: [
       StarterKit.configure({
         // The Collaboration extension comes with its own history handling
         history: false,
-        
       }),
       // Register the document with Tiptap
       Collaboration.configure({
@@ -130,13 +135,13 @@ function EditorWithOptions(props: any) {
       }),
     ],
 
-    content: "<p>Hello World!</p>",
+    content: props.content,
   });
 
-  
-
   return (
     <div>
+      File <button onClick={() => props.setContent(editor.getJSON())}>save</button>
+      <br /><hr />
       <MenuBar editor={editor} />
       <EditorContent editor={editor} style={{ backgroundColor: "white" }} />
     </div>

front/package-lock.json

@@ -12,6 +12,7 @@
         "@radix-ui/react-icons": "^1.1.1",
         "@tiptap/extension-collaboration": "^2.0.0-beta.199",
         "@tiptap/extension-collaboration-cursor": "^2.0.0-beta.199",
+        "@tiptap/html": "^2.0.0-beta.202",
         "@tiptap/react": "^2.0.0-beta.199",
         "@tiptap/starter-kit": "^2.0.0-beta.199",
         "avvvatars-react": "^0.4.2",
@@ -982,9 +983,9 @@
       }
     },
     "node_modules/@tiptap/core": {
-      "version": "2.0.0-beta.199",
+      "version": "2.0.0-beta.202",
-      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.199.tgz",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.202.tgz",
-      "integrity": "sha512-34GaXcBEmNFjW1R7nf1LSmOHo3Q81YjKqvLAXjDLLG7MTx+YTrQ4yWwUvMsZtmi4o/FchUzrs1NVCfr571Zxzg==",
+      "integrity": "sha512-KnOcZBtkWoDT7EsVLiJr9DyBnQcKJQHI8kOhNIL0snUrksr25q8xBW05iYqw6cGAF7iu1cFM80VikfgefsZUpw==",
       "dependencies": {
         "prosemirror-commands": "^1.3.1",
         "prosemirror-keymap": "^1.2.0",
@@ -1295,6 +1296,20 @@
         "@tiptap/core": "^2.0.0-beta.193"
       }
     },
+    "node_modules/@tiptap/html": {
+      "version": "2.0.0-beta.202",
+      "resolved": "https://registry.npmjs.org/@tiptap/html/-/html-2.0.0-beta.202.tgz",
+      "integrity": "sha512-NgUBBXWwXA8Oaw12AdGswVQXZ9dIKItJngEYIdh4kV9QpSGN7EnC4TPagNIAsIzBrDx+72/2UfGjQxW3F/jMug==",
+      "dependencies": {
+        "@tiptap/core": "^2.0.0-beta.202",
+        "prosemirror-model": "^1.18.1",
+        "zeed-dom": "^0.9.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
     "node_modules/@tiptap/react": {
       "version": "2.0.0-beta.199",
       "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-2.0.0-beta.199.tgz",
@@ -2007,6 +2022,17 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
@@ -5084,6 +5110,21 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zeed-dom": {
+      "version": "0.9.26",
+      "resolved": "https://registry.npmjs.org/zeed-dom/-/zeed-dom-0.9.26.tgz",
+      "integrity": "sha512-HWjX8rA3Y/RI32zby3KIN1D+mgskce+She4K7kRyyx62OiVxJ5FnYm8vWq0YVAja3Tf2S1M0XAc6O2lRFcMgcQ==",
+      "dependencies": {
+        "css-what": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=14.13.1"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/holtwick"
+      }
     }
   },
   "dependencies": {
@@ -5752,9 +5793,9 @@
       }
     },
     "@tiptap/core": {
-      "version": "2.0.0-beta.199",
+      "version": "2.0.0-beta.202",
-      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.199.tgz",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.202.tgz",
-      "integrity": "sha512-34GaXcBEmNFjW1R7nf1LSmOHo3Q81YjKqvLAXjDLLG7MTx+YTrQ4yWwUvMsZtmi4o/FchUzrs1NVCfr571Zxzg==",
+      "integrity": "sha512-KnOcZBtkWoDT7EsVLiJr9DyBnQcKJQHI8kOhNIL0snUrksr25q8xBW05iYqw6cGAF7iu1cFM80VikfgefsZUpw==",
       "requires": {
         "prosemirror-commands": "^1.3.1",
         "prosemirror-keymap": "^1.2.0",
@@ -5920,6 +5961,16 @@
       "integrity": "sha512-ntOqEhkBjDHrdzxvpPe4U1JB5GgE9/yyWqWdgzSL9lpSndRTJN1xQLOmyuv0qsLqOgBHn1YITHvaxPb3t8FrFw==",
       "requires": {}
     },
+    "@tiptap/html": {
+      "version": "2.0.0-beta.202",
+      "resolved": "https://registry.npmjs.org/@tiptap/html/-/html-2.0.0-beta.202.tgz",
+      "integrity": "sha512-NgUBBXWwXA8Oaw12AdGswVQXZ9dIKItJngEYIdh4kV9QpSGN7EnC4TPagNIAsIzBrDx+72/2UfGjQxW3F/jMug==",
+      "requires": {
+        "@tiptap/core": "^2.0.0-beta.202",
+        "prosemirror-model": "^1.18.1",
+        "zeed-dom": "^0.9.19"
+      }
+    },
     "@tiptap/react": {
       "version": "2.0.0-beta.199",
       "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-2.0.0-beta.199.tgz",
@@ -6402,6 +6453,11 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
+    "css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
+    },
     "csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
@@ -8587,6 +8643,14 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "zeed-dom": {
+      "version": "0.9.26",
+      "resolved": "https://registry.npmjs.org/zeed-dom/-/zeed-dom-0.9.26.tgz",
+      "integrity": "sha512-HWjX8rA3Y/RI32zby3KIN1D+mgskce+She4K7kRyyx62OiVxJ5FnYm8vWq0YVAja3Tf2S1M0XAc6O2lRFcMgcQ==",
+      "requires": {
+        "css-what": "^6.1.0"
+      }
     }
   }
 }

front/package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-icons": "^1.1.1",
     "@tiptap/extension-collaboration": "^2.0.0-beta.199",
     "@tiptap/extension-collaboration-cursor": "^2.0.0-beta.199",
+    "@tiptap/html": "^2.0.0-beta.202",
     "@tiptap/react": "^2.0.0-beta.199",
     "@tiptap/starter-kit": "^2.0.0-beta.199",
     "avvvatars-react": "^0.4.2",

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

@@ -7,7 +7,7 @@ import { Title } from "../../../../../../components/ui/styles/Title";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import { initialData, initialData2 } from "../../../../../../components/drags/data";
 import Chapter from "../../../../../../components/drags/Chapter";
-import { createChapter, deleteChapter, getCourseChaptersMetadata } from "../../../../../../services/courses/chapters";
+import { createChapter, deleteChapter, getCourseChaptersMetadata, updateChaptersMetadata } from "../../../../../../services/courses/chapters";
 import { useRouter } from "next/router";
 import NewChapterModal from "../../../../../../components/modals/CourseEdit/NewChapter";
 import NewElementModal from "../../../../../../components/modals/CourseEdit/NewElement";
@@ -73,6 +73,7 @@ function CourseEdit() {
   // Submit new element
   const submitElement = async (element: any) => {
     console.log("submitElement", element);
+    updateChaptersMetadata(courseid, data);
     await createElement(element, element.chapterId);
     getCourseChapters();
     setNewElementModal(false);
@@ -84,10 +85,9 @@ function CourseEdit() {
     getCourseChapters();
   };
 
-  const openNewElementModal = async (chapterId: any) => {
+  const updateChapters = () => {
-    console.log("openNewElementModal", chapterId);
+    console.log(data);
-    setNewElementModal(true);
+    updateChaptersMetadata(courseid,data);
-    setNewElementModalData(chapterId);
   };
 
   /* 
@@ -95,6 +95,13 @@ function CourseEdit() {
   Modals
 
   */
+
+  const openNewElementModal = async (chapterId: any) => {
+    console.log("openNewElementModal", chapterId);
+    setNewElementModal(true);
+    setNewElementModalData(chapterId);
+  };
+
   // Close new chapter modal
   const closeNewChapterModal = () => {
     setNewChapterModal(false);
@@ -218,6 +225,13 @@ function CourseEdit() {
         >
           +
         </button>
+        <button
+          onClick={() => {
+            updateChapters();
+          }}
+        >
+          Save Chapters
+        </button>
       </Title>
       {newChapterModal && <NewChapterModal closeModal={closeNewChapterModal} submitChapter={submitChapter}></NewChapterModal>}
       {newElementModal && <NewElementModal closeModal={closeNewElementModal} submitElement={submitElement} chapterId={newElementModalData}></NewElementModal>}
@@ -232,7 +246,15 @@ function CourseEdit() {
                   <div key={"chapters"} {...provided.droppableProps} ref={provided.innerRef}>
                     {getChapters().map((info: any, index: any) => (
                       <>
-                        <Chapter orgslug={orgslug} courseid={courseid} openNewElementModal={openNewElementModal} deleteChapter={deleteChapterUI} key={index} info={info} index={index}></Chapter>
+                        <Chapter
+                          orgslug={orgslug}
+                          courseid={courseid}
+                          openNewElementModal={openNewElementModal}
+                          deleteChapter={deleteChapterUI}
+                          key={index}
+                          info={info}
+                          index={index}
+                        ></Chapter>
                       </>
                     ))}
                     {provided.placeholder}

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

@@ -3,22 +3,45 @@ import { default as React, useEffect, useRef } from "react";
 import Layout from "../../../../../../../components/ui/Layout";
 import { Title } from "../../../../../../../components/ui/styles/Title";
 import dynamic from "next/dynamic";
-import { AuthContext } from "../../../../../../../components/security/AuthProvider";
+import { useRouter } from "next/router";
+import { getElement } from "../../../../../../../services/courses/elements";
 
-const Editor = 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,
 });
 
-// tools
-
 function EditElement() {
+  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]);
 
   return (
     <Layout>
-      <Title>Edit Page </Title>
+      <Title>Edit : {element.name} </Title>
       <br />
-      <Editor></Editor>
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <div>
+          <Editor element={element} content={element.content}></Editor>
+        </div>
+      )}
     </Layout>
   );
 }

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 (

front/services/courses/chapters.ts

@@ -20,6 +20,26 @@ export async function getCourseChaptersMetadata(course_id: any) {
   return data;
 }
 
+export async function updateChaptersMetadata(course_id: any, data: any) {
+  const HeadersConfig = new Headers({ "Content-Type": "application/json" });
+
+  const requestOptions: any = {
+    method: "PUT",
+    headers: HeadersConfig,
+    redirect: "follow",
+    credentials: "include",
+    body: JSON.stringify(data),
+  };
+
+  const result: any = await fetch(`${getAPIUrl()}chapters/meta/course_${course_id}`, requestOptions)
+    .then((result) => result.json())
+    .catch((error) => console.log("error", error));
+
+  console.log("result", result);
+  
+  return result;
+}
+
 export async function createChapter(data: any, course_id: any) {
   console.log("data", data, course_id);
   

front/services/courses/elements.ts

@@ -25,3 +25,35 @@ export async function createElement(data: any, chapter_id: any) {
     
     return result;
   }
+
+  export async function getElement(element_id: any) {
+    const requestOptions: any = {
+      method: "GET",
+      redirect: "follow",
+      credentials: "include",
+    };
+  
+    const result: any = await fetch(`${getAPIUrl()}elements/${element_id}`, requestOptions)
+      .then((result) => result.json())
+      .catch((error) => console.log("error", error));
+  
+    return result;
+  }
+
+  export async function updateElement(data: any, element_id: any) {
+    const HeadersConfig = new Headers({ "Content-Type": "application/json" });
+  
+    const requestOptions: any = {
+      method: "PUT",
+      headers: HeadersConfig,
+      redirect: "follow",
+      credentials: "include",
+      body: JSON.stringify(data),
+    };
+  
+    const result: any = await fetch(`${getAPIUrl()}elements/${element_id}`, requestOptions)
+      .then((result) => result.json())
+      .catch((error) => console.log("error", error));
+  
+    return result;
+  }

src/services/courses/chapters.py

@@ -28,7 +28,8 @@ class CourseChapterInDB(CourseChapter):
 # Frontend
 class CourseChapterMetaData(BaseModel):
     chapterOrder: List[str]
-    chapters: List
+    chapters: object
+    elements: object
 
 #### Classes ####################################################
 
@@ -167,8 +168,6 @@ async def get_coursechapters_meta(course_id: str, current_user: PublicUser):
     coursechapters = coursechapters.find(
         {"course_id": course_id}).sort("name", 1)
 
-
-
     course = courses.find_one({"course_id": course_id})
     course = Course(**course)  # type: ignore
 
@@ -213,16 +212,20 @@ async def update_coursechapters_meta(course_id: str, coursechapters_metadata: Co
     coursechapters = learnhouseDB["coursechapters"]
     courses = learnhouseDB["courses"]
 
-    course = courses.find_one({"course_id": course_id})
-    course = Course(**course)  # type: ignore
-
     # update chapters in course
     courseInDB = courses.update_one({"course_id": course_id}, {
                                     "$set": {"chapters": coursechapters_metadata.chapterOrder}})
 
-    # TODO : update chapters in coursechapters
 
-    return {courseInDB}
+    # update elements in coursechapters
+    # TODO : performance/optimization improvement
+    for coursechapter in coursechapters_metadata.chapters:
+        coursechapters.update_one({"coursechapter_id": coursechapter}, {
+            "$set": {"elements": coursechapters_metadata.chapters[coursechapter]["elementIds"]}})
+    
+    
+
+    return {"ok"}
 
 #### Security ####################################################