diff --git a/front/components/drags/chapter.tsx b/front/components/Drags/Chapter.tsx similarity index 100% rename from front/components/drags/chapter.tsx rename to front/components/Drags/Chapter.tsx diff --git a/front/components/drags/element.tsx b/front/components/Drags/Element.tsx similarity index 100% rename from front/components/drags/element.tsx rename to front/components/Drags/Element.tsx diff --git a/front/components/drags/data.ts b/front/components/Drags/data.ts similarity index 100% rename from front/components/drags/data.ts rename to front/components/Drags/data.ts diff --git a/front/components/Editor/Editor.tsx b/front/components/Editor/Editor.tsx new file mode 100644 index 00000000..c074dfb4 --- /dev/null +++ b/front/components/Editor/Editor.tsx @@ -0,0 +1,52 @@ +import React from "react"; +import { useEditor, EditorContent } from "@tiptap/react"; +import StarterKit from "@tiptap/starter-kit"; +import Collaboration from "@tiptap/extension-collaboration"; +import CollaborationCursor from "@tiptap/extension-collaboration-cursor"; +import { AuthContext } from "../Security/AuthProvider"; +import { ToolbarButtons } from "./Toolbar/ToolbarButtons"; + +interface Editor { + content: string; + ydoc: any; + provider: any; + setContent: (content: string) => void; +} + +function Editor(props: Editor) { + const auth: any = React.useContext(AuthContext); + + 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({ + document: props.ydoc, + }), + // Register the collaboration cursor extension + CollaborationCursor.configure({ + provider: props.provider, + user: { + name: auth.userInfo.username, + color: "#f783ac", + }, + }), + ], + + content: props.content, + }); + + return ( +
+ File +
+ + +
+ ); +} + +export default Editor; diff --git a/front/components/editor/Editor.tsx b/front/components/Editor/EditorWrapper.tsx similarity index 65% rename from front/components/editor/Editor.tsx rename to front/components/Editor/EditorWrapper.tsx index db22f6e3..ece8d159 100644 --- a/front/components/editor/Editor.tsx +++ b/front/components/Editor/EditorWrapper.tsx @@ -1,16 +1,15 @@ -import { default as React, useEffect, useRef } from "react"; +import { default as React, } from "react"; import * as Y from "yjs"; import { WebrtcProvider } from "y-webrtc"; -import EditorWithOptions from "./EditorWithOptions"; -import { IndexeddbPersistence } from "y-indexeddb"; +import Editor from "./Editor"; import { updateElement } from "../../services/courses/elements"; -interface EditorProps { +interface EditorWrapperProps { content: string; element: any; } -function Editor(props: EditorProps) { +function EditorWrapper(props: EditorWrapperProps) { // A new Y document const ydoc = new Y.Doc(); const [providerState, setProviderState] = React.useState({}); @@ -29,18 +28,13 @@ function Editor(props: EditorProps) { let element = props.element; element.content = content; const res = await updateElement(element, element.element_id); - } if (isLoading) { createRTCProvider(); } else { - return ( -
- -
- ); + return ; } } -export default Editor; +export default EditorWrapper; diff --git a/front/components/editor/EditorWithOptions.tsx b/front/components/Editor/Toolbar/ToolbarButtons.tsx similarity index 73% rename from front/components/editor/EditorWithOptions.tsx rename to front/components/Editor/Toolbar/ToolbarButtons.tsx index ca57ec87..18bea8d7 100644 --- a/front/components/editor/EditorWithOptions.tsx +++ b/front/components/Editor/Toolbar/ToolbarButtons.tsx @@ -1,21 +1,4 @@ -import React from "react"; -import { useEditor, EditorContent } from "@tiptap/react"; -import StarterKit from "@tiptap/starter-kit"; -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: EditorWithOptionsProps) { - const auth: any = React.useContext(AuthContext); - - const MenuBar = ({ editor }: any) => { +export const ToolbarButtons = ({ editor }: any) => { if (!editor) { return null; } @@ -113,39 +96,4 @@ function EditorWithOptions(props: EditorWithOptionsProps) { ); - }; - - 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({ - document: props.ydoc, - }), - // Register the collaboration cursor extension - CollaborationCursor.configure({ - provider: props.provider, - user: { - name: auth.userInfo.username, - color: "#f783ac", - }, - }), - ], - - content: props.content, - }); - - return ( -
- File -
- - -
- ); -} - -export default EditorWithOptions; + }; \ No newline at end of file diff --git a/front/components/modals/CourseEdit/NewChapter.tsx b/front/components/Modals/CourseEdit/NewChapter.tsx similarity index 100% rename from front/components/modals/CourseEdit/NewChapter.tsx rename to front/components/Modals/CourseEdit/NewChapter.tsx diff --git a/front/components/modals/CourseEdit/NewElement.tsx b/front/components/Modals/CourseEdit/NewElement.tsx similarity index 100% rename from front/components/modals/CourseEdit/NewElement.tsx rename to front/components/Modals/CourseEdit/NewElement.tsx diff --git a/front/components/modals/CourseEdit/NewElementModal/DynamicCanva.tsx b/front/components/Modals/CourseEdit/NewElementModal/DynamicCanva.tsx similarity index 100% rename from front/components/modals/CourseEdit/NewElementModal/DynamicCanva.tsx rename to front/components/Modals/CourseEdit/NewElementModal/DynamicCanva.tsx diff --git a/front/components/modals/CourseEdit/NewElementModal/Video.tsx b/front/components/Modals/CourseEdit/NewElementModal/Video.tsx similarity index 100% rename from front/components/modals/CourseEdit/NewElementModal/Video.tsx rename to front/components/Modals/CourseEdit/NewElementModal/Video.tsx diff --git a/front/components/modals/Modal.tsx b/front/components/Modals/Modal.tsx similarity index 100% rename from front/components/modals/Modal.tsx rename to front/components/Modals/Modal.tsx diff --git a/front/components/security/AuthProvider.tsx b/front/components/Security/AuthProvider.tsx similarity index 100% rename from front/components/security/AuthProvider.tsx rename to front/components/Security/AuthProvider.tsx diff --git a/front/components/security/HeaderProfileBox.tsx b/front/components/Security/HeaderProfileBox.tsx similarity index 100% rename from front/components/security/HeaderProfileBox.tsx rename to front/components/Security/HeaderProfileBox.tsx diff --git a/front/components/ui/elements/menu.tsx b/front/components/UI/Elements/Menu.tsx similarity index 97% rename from front/components/ui/elements/menu.tsx rename to front/components/UI/Elements/Menu.tsx index db5e5049..e07ec65a 100644 --- a/front/components/ui/elements/menu.tsx +++ b/front/components/UI/Elements/Menu.tsx @@ -1,6 +1,6 @@ import React from "react"; import styled from "styled-components"; -import { HeaderProfileBox } from "../../security/HeaderProfileBox"; +import { HeaderProfileBox } from "../../Security/HeaderProfileBox"; import learnhouseIcon from "public/learnhouse_icon.png"; import learnhouseLogo from "public/learnhouse_logo.png"; import Link from "next/link"; diff --git a/front/components/ui/styles/title.tsx b/front/components/UI/Elements/Styles/Title.tsx similarity index 100% rename from front/components/ui/styles/title.tsx rename to front/components/UI/Elements/Styles/Title.tsx diff --git a/front/components/ui/header.tsx b/front/components/UI/Header.tsx similarity index 100% rename from front/components/ui/header.tsx rename to front/components/UI/Header.tsx diff --git a/front/components/ui/layout.tsx b/front/components/UI/Layout.tsx similarity index 94% rename from front/components/ui/layout.tsx rename to front/components/UI/Layout.tsx index 99a5668d..4b812137 100644 --- a/front/components/ui/layout.tsx +++ b/front/components/UI/Layout.tsx @@ -1,9 +1,9 @@ import React from "react"; import Head from "next/head"; import styled from "styled-components"; -import AuthProvider from "../security/AuthProvider"; +import AuthProvider from "../Security/AuthProvider"; import { motion } from "framer-motion"; -import { Menu } from "./elements/Menu"; +import { Menu } from "./Elements/Menu"; const Layout = (props: any) => { const variants = { diff --git a/front/pages/index.tsx b/front/pages/index.tsx index 070b98c0..28e5c0b8 100644 --- a/front/pages/index.tsx +++ b/front/pages/index.tsx @@ -4,7 +4,7 @@ import styled from "styled-components"; import learnhouseBigIcon from "public/learnhouse_bigicon.png"; import Image from "next/image"; import Link from "next/link"; -import { PreAlphaLabel } from "../components/ui/Layout"; +import { PreAlphaLabel } from "../components/rename/UI/Layout"; const Home: NextPage = () => { return ( diff --git a/front/pages/login.tsx b/front/pages/login.tsx index fb094af3..51a2f2ae 100644 --- a/front/pages/login.tsx +++ b/front/pages/login.tsx @@ -1,8 +1,8 @@ import Router from "next/router"; import React from "react"; -import { Header } from "../components/ui/Header"; -import Layout from "../components/ui/Layout"; -import { Title } from "../components/ui/styles/Title"; +import { Header } from "../components/rename/UI/Header"; +import Layout from "../components/rename/UI/Layout"; +import { Title } from "../components/rename/UI/Elements/Styles/Title"; import { loginAndGetToken } from "../services/auth/auth"; const Login = () => { diff --git a/front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx b/front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx index 17574061..2bc7d33e 100644 --- a/front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx +++ b/front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx @@ -1,16 +1,16 @@ import React from "react"; import { useState, useEffect } from "react"; import styled from "styled-components"; -import { Header } from "../../../../../../components/ui/Header"; -import Layout from "../../../../../../components/ui/Layout"; -import { Title } from "../../../../../../components/ui/styles/Title"; +import { Header } from "../../../../../../components/rename/UI/Header"; +import Layout from "../../../../../../components/rename/UI/Layout"; +import { Title } from "../../../../../../components/rename/UI/Elements/Styles/Title"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; -import { initialData, initialData2 } from "../../../../../../components/drags/data"; -import Chapter from "../../../../../../components/drags/Chapter"; +import { initialData, initialData2 } from "../../../../../../components/Drags/data"; +import Chapter from "../../../../../../components/Drags/Chapter"; 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"; +import NewChapterModal from "../../../../../../components/Modals/CourseEdit/NewChapter"; +import NewElementModal from "../../../../../../components/Modals/CourseEdit/NewElement"; import { createElement, createFileElement } from "../../../../../../services/courses/elements"; function CourseEdit() { 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 77b25194..697b450f 100644 --- a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx +++ b/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx @@ -1,13 +1,15 @@ import { default as React, useEffect, useRef } from "react"; -import Layout from "../../../../../../../components/ui/Layout"; -import { Title } from "../../../../../../../components/ui/styles/Title"; +import Layout from "../../../../../../../components/rename/UI/Layout"; +import { Title } from "../../../../../../../components/rename/UI/Elements/Styles/Title"; import dynamic from "next/dynamic"; import { useRouter } from "next/router"; import { getElement } from "../../../../../../../services/courses/elements"; +import AuthProvider from "../../../../../../../components/security/AuthProvider"; +import EditorWrapper from "../../../../../../../components/Editor/EditorWrapper"; // Workaround (Next.js SSR doesn't support tip tap editor) -const Editor: any = dynamic(() => import("../../../../../../../components/editor/Editor") as any, { +const Editor: any = dynamic(() => import("../../../../../../../components/Editor/EditorWrapper") as any, { ssr: false, }); @@ -28,22 +30,10 @@ function EditElement() { fetchElementData(); } return () => {}; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, [router.isReady]); - return ( - - Edit : {element.name} -
- {isLoading ? ( -
Loading...
- ) : ( -
- -
- )} - - ); + return {isLoading ?
Loading...
: }; } export default EditElement; 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 94316459..955549f4 100644 --- a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx +++ b/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx @@ -6,7 +6,7 @@ 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 Layout from "../../../../../../../components/rename/UI/Layout"; import { getElement } from "../../../../../../../services/courses/elements"; import { getBackendUrl } from "../../../../../../../services/config"; diff --git a/front/pages/org/[orgslug]/course/[courseid]/index.tsx b/front/pages/org/[orgslug]/course/[courseid]/index.tsx index 05c2823d..f21009a4 100644 --- a/front/pages/org/[orgslug]/course/[courseid]/index.tsx +++ b/front/pages/org/[orgslug]/course/[courseid]/index.tsx @@ -3,7 +3,7 @@ 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 Layout from "../../../../../components/rename/UI/Layout"; import { getAPIUrl, getBackendUrl } from "../../../../../services/config"; import { getCourse, getCourseMetadata } from "../../../../../services/courses/courses"; diff --git a/front/pages/org/[orgslug]/courses/index.tsx b/front/pages/org/[orgslug]/courses/index.tsx index c92f2011..055501f4 100644 --- a/front/pages/org/[orgslug]/courses/index.tsx +++ b/front/pages/org/[orgslug]/courses/index.tsx @@ -2,9 +2,9 @@ import Link from "next/link"; import { useRouter } from "next/router"; import React from "react"; import styled from "styled-components"; -import { Header } from "../../../../components/ui/Header"; -import Layout from "../../../../components/ui/Layout"; -import { Title } from "../../../../components/ui/styles/Title"; +import { Header } from "../../../../components/rename/UI/Header"; +import Layout from "../../../../components/rename/UI/Layout"; +import { Title } from "../../../../components/rename/UI/Elements/Styles/Title"; import { getBackendUrl } from "../../../../services/config"; import { deleteCourseFromBackend, getOrgCourses } from "../../../../services/courses/courses"; import { getOrganizationContextInfo } from "../../../../services/orgs"; diff --git a/front/pages/org/[orgslug]/courses/new/index.tsx b/front/pages/org/[orgslug]/courses/new/index.tsx index 7221c58f..8f5f456c 100644 --- a/front/pages/org/[orgslug]/courses/new/index.tsx +++ b/front/pages/org/[orgslug]/courses/new/index.tsx @@ -1,8 +1,8 @@ import { useRouter } from "next/router"; import React from "react"; -import { Header } from "../../../../../components/ui/Header"; -import Layout from "../../../../../components/ui/Layout"; -import { Title } from "../../../../../components/ui/styles/Title"; +import { Header } from "../../../../../components/rename/UI/Header"; +import Layout from "../../../../../components/rename/UI/Layout"; +import { Title } from "../../../../../components/rename/UI/Elements/Styles/Title"; import { createNewCourse } from "../../../../../services/courses/courses"; import { getOrganizationContextInfo } from "../../../../../services/orgs"; diff --git a/front/pages/org/[orgslug]/index.tsx b/front/pages/org/[orgslug]/index.tsx index d5220894..7a009b5c 100644 --- a/front/pages/org/[orgslug]/index.tsx +++ b/front/pages/org/[orgslug]/index.tsx @@ -1,8 +1,8 @@ import React from "react"; import { useRouter } from "next/router"; -import Layout from "../../../components/ui/Layout"; -import { Title } from "../../../components/ui/styles/Title"; -import { Header } from "../../../components/ui/Header"; +import Layout from "../../../components/rename/UI/Layout"; +import { Title } from "../../../components/rename/UI/Elements/Styles/Title"; +import { Header } from "../../../components/rename/UI/Header"; import Link from "next/link"; const OrgHomePage = () => { diff --git a/front/pages/organizations/index.tsx b/front/pages/organizations/index.tsx index 9844c06d..12c0c65c 100644 --- a/front/pages/organizations/index.tsx +++ b/front/pages/organizations/index.tsx @@ -1,7 +1,7 @@ import Link from "next/link"; import React from "react"; -import Layout from "../../components/ui/Layout"; -import { Title } from "../../components/ui/styles/Title"; +import Layout from "../../components/rename/UI/Layout"; +import { Title } from "../../components/rename/UI/Elements/Styles/Title"; import { deleteOrganizationFromBackend, getUserOrganizations } from "../../services/orgs"; const Organizations = () => { diff --git a/front/pages/organizations/new.tsx b/front/pages/organizations/new.tsx index 072405c9..2a82ff49 100644 --- a/front/pages/organizations/new.tsx +++ b/front/pages/organizations/new.tsx @@ -1,6 +1,6 @@ import React from "react"; -import Layout from "../../components/ui/Layout"; -import { Title } from "../../components/ui/styles/Title"; +import Layout from "../../components/rename/UI/Layout"; +import { Title } from "../../components/rename/UI/Elements/Styles/Title"; import { createNewOrganization } from "../../services/orgs"; const Organizations = () => { diff --git a/front/pages/signup.tsx b/front/pages/signup.tsx index 9aa2d1dc..23424698 100644 --- a/front/pages/signup.tsx +++ b/front/pages/signup.tsx @@ -1,7 +1,7 @@ import React from "react"; -import { Header } from "../components/ui/Header"; -import Layout from "../components/ui/Layout"; -import { Title } from "../components/ui/styles/Title"; +import { Header } from "../components/rename/UI/Header"; +import Layout from "../components/rename/UI/Layout"; +import { Title } from "../components/rename/UI/Elements/Styles/Title"; import { signup } from "../services/auth/auth"; const SignUp = () => { diff --git a/front/services/courses/chapters.ts b/front/services/courses/chapters.ts index 63eb395d..bb28ec1e 100644 --- a/front/services/courses/chapters.ts +++ b/front/services/courses/chapters.ts @@ -1,4 +1,4 @@ -import { initialData } from "../../components/drags/data"; +import { initialData } from "../../components/Drags/data"; import { getAPIUrl } from "../config"; export async function getCourseChaptersMetadata(course_id: any) { diff --git a/front/tsconfig.json b/front/tsconfig.json index 576365de..99710e85 100644 --- a/front/tsconfig.json +++ b/front/tsconfig.json @@ -15,6 +15,6 @@ "jsx": "preserve", "incremental": true }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "components/drags/chapter.stsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] }