From 57e64a2b74d9648ede62c482fdb02f07ddb3544b Mon Sep 17 00:00:00 2001 From: swve Date: Sun, 13 Nov 2022 20:26:50 +0100 Subject: [PATCH] feat: get element content from Course --- front/components/drags/element.tsx | 6 +- front/components/editor/Editor.tsx | 2 +- front/package-lock.json | 76 +++++++++++++++++-- front/package.json | 1 + .../[courseid]/element/[elementid]/edit.tsx | 8 +- .../[courseid]/element/[elementid]/index.tsx | 55 +++++++++++++- .../org/[orgslug]/course/[courseid]/index.tsx | 3 +- 7 files changed, 134 insertions(+), 17 deletions(-) diff --git a/front/components/drags/element.tsx b/front/components/drags/element.tsx index 0d716cdb..ba8b46d5 100644 --- a/front/components/drags/element.tsx +++ b/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) => (

{props.element.name}

+ +   + - Edit +   )} diff --git a/front/components/editor/Editor.tsx b/front/components/editor/Editor.tsx index d501ea25..db22f6e3 100644 --- a/front/components/editor/Editor.tsx +++ b/front/components/editor/Editor.tsx @@ -27,7 +27,7 @@ function Editor(props: EditorProps) { async function setContent(content: any) { let element = props.element; - element.content = content.content; + element.content = content; const res = await updateElement(element, element.element_id); } diff --git a/front/package-lock.json b/front/package-lock.json index d5fc4c0d..4542cc72 100644 --- a/front/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.199.tgz", - "integrity": "sha512-34GaXcBEmNFjW1R7nf1LSmOHo3Q81YjKqvLAXjDLLG7MTx+YTrQ4yWwUvMsZtmi4o/FchUzrs1NVCfr571Zxzg==", + "version": "2.0.0-beta.202", + "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.202.tgz", + "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", - "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.199.tgz", - "integrity": "sha512-34GaXcBEmNFjW1R7nf1LSmOHo3Q81YjKqvLAXjDLLG7MTx+YTrQ4yWwUvMsZtmi4o/FchUzrs1NVCfr571Zxzg==", + "version": "2.0.0-beta.202", + "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.202.tgz", + "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" + } } } } diff --git a/front/package.json b/front/package.json index d656a6d7..ec6ffb14 100644 --- a/front/package.json +++ b/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", diff --git a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx b/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx index 6396d77c..77b25194 100644 --- a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx +++ b/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 ( - Edit Page + Edit : {element.name}
{isLoading ? (
Loading...
diff --git a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx b/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx index 3aef1a47..690a70f1 100644 --- a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx +++ b/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({}); + 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 ( -
ElementPage
- ) + + {isLoading ? ( +
Loading...
+ ) : ( +
+

element

+

{element.name}

+
+
+
+ )} + + ); } -export default ElementPage \ No newline at end of file +export default ElementPage; diff --git a/front/pages/org/[orgslug]/course/[courseid]/index.tsx b/front/pages/org/[orgslug]/course/[courseid]/index.tsx index 4946ad80..0ad18355 100644 --- a/front/pages/org/[orgslug]/course/[courseid]/index.tsx +++ b/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 (