From d361e68dc0af215e9546471329e272cd4809b769 Mon Sep 17 00:00:00 2001 From: swve Date: Fri, 2 Dec 2022 22:23:52 +0100 Subject: [PATCH 1/4] fix: refactor files feat: refactor more files feat: uppercase component folder 1/2 feat: uppercase component folder 2/2 --- .../{drags/chapter.tsx => Drags/Chapter.tsx} | 0 .../{drags/element.tsx => Drags/Element.tsx} | 0 front/components/{drags => Drags}/data.ts | 0 front/components/Editor/Editor.tsx | 52 +++++++++++++++++ .../Editor.tsx => Editor/EditorWrapper.tsx} | 18 ++---- .../Toolbar/ToolbarButtons.tsx} | 56 +------------------ .../CourseEdit/NewChapter.tsx | 0 .../CourseEdit/NewElement.tsx | 0 .../NewElementModal/DynamicCanva.tsx | 0 .../CourseEdit/NewElementModal/Video.tsx | 0 front/components/{modals => Modals}/Modal.tsx | 0 .../{security => Security}/AuthProvider.tsx | 0 .../HeaderProfileBox.tsx | 0 .../menu.tsx => UI/Elements/Menu.tsx} | 2 +- .../Elements/Styles/Title.tsx} | 0 .../{ui/header.tsx => UI/Header.tsx} | 0 .../{ui/layout.tsx => UI/Layout.tsx} | 4 +- front/pages/index.tsx | 2 +- front/pages/login.tsx | 6 +- .../course/[courseid]/edit/index.tsx | 14 ++--- .../[courseid]/element/[elementid]/edit.tsx | 24 +++----- .../[courseid]/element/[elementid]/index.tsx | 2 +- .../org/[orgslug]/course/[courseid]/index.tsx | 2 +- front/pages/org/[orgslug]/courses/index.tsx | 6 +- .../pages/org/[orgslug]/courses/new/index.tsx | 6 +- front/pages/org/[orgslug]/index.tsx | 6 +- front/pages/organizations/index.tsx | 4 +- front/pages/organizations/new.tsx | 4 +- front/pages/signup.tsx | 6 +- front/services/courses/chapters.ts | 2 +- front/tsconfig.json | 2 +- 31 files changed, 101 insertions(+), 117 deletions(-) rename front/components/{drags/chapter.tsx => Drags/Chapter.tsx} (100%) rename front/components/{drags/element.tsx => Drags/Element.tsx} (100%) rename front/components/{drags => Drags}/data.ts (100%) create mode 100644 front/components/Editor/Editor.tsx rename front/components/{editor/Editor.tsx => Editor/EditorWrapper.tsx} (65%) rename front/components/{editor/EditorWithOptions.tsx => Editor/Toolbar/ToolbarButtons.tsx} (73%) rename front/components/{modals => Modals}/CourseEdit/NewChapter.tsx (100%) rename front/components/{modals => Modals}/CourseEdit/NewElement.tsx (100%) rename front/components/{modals => Modals}/CourseEdit/NewElementModal/DynamicCanva.tsx (100%) rename front/components/{modals => Modals}/CourseEdit/NewElementModal/Video.tsx (100%) rename front/components/{modals => Modals}/Modal.tsx (100%) rename front/components/{security => Security}/AuthProvider.tsx (100%) rename front/components/{security => Security}/HeaderProfileBox.tsx (100%) rename front/components/{ui/elements/menu.tsx => UI/Elements/Menu.tsx} (97%) rename front/components/{ui/styles/title.tsx => UI/Elements/Styles/Title.tsx} (100%) rename front/components/{ui/header.tsx => UI/Header.tsx} (100%) rename front/components/{ui/layout.tsx => UI/Layout.tsx} (94%) 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"] } From f349378ff9572e7f5daf14f9c8e5c555f3b4009f Mon Sep 17 00:00:00 2001 From: swve Date: Sat, 3 Dec 2022 00:39:50 +0100 Subject: [PATCH 2/4] feat: init new editor design --- front/components/Editor/Editor.tsx | 138 +++++++++++++- front/components/Editor/EditorWrapper.tsx | 5 +- .../Editor/Toolbar/ToolbarButtons.tsx | 179 ++++++++---------- front/pages/index.tsx | 2 +- front/pages/login.tsx | 6 +- .../course/[courseid]/edit/index.tsx | 6 +- .../[courseid]/element/[elementid]/edit.tsx | 28 ++- .../[courseid]/element/[elementid]/index.tsx | 2 +- .../org/[orgslug]/course/[courseid]/index.tsx | 2 +- front/pages/org/[orgslug]/courses/index.tsx | 6 +- .../pages/org/[orgslug]/courses/new/index.tsx | 6 +- front/pages/org/[orgslug]/index.tsx | 6 +- front/pages/organizations/index.tsx | 4 +- front/pages/organizations/new.tsx | 4 +- front/pages/signup.tsx | 6 +- 15 files changed, 264 insertions(+), 136 deletions(-) diff --git a/front/components/Editor/Editor.tsx b/front/components/Editor/Editor.tsx index c074dfb4..f849904d 100644 --- a/front/components/Editor/Editor.tsx +++ b/front/components/Editor/Editor.tsx @@ -4,19 +4,28 @@ 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 learnhouseIcon from "public/learnhouse_icon.png"; import { ToolbarButtons } from "./Toolbar/ToolbarButtons"; +import Image from "next/image"; +import styled from "styled-components"; +import { getBackendUrl } from "../../services/config"; +import { RocketIcon, SlashIcon, TriangleLeftIcon, TriangleRightIcon } from "@radix-ui/react-icons"; interface Editor { content: string; ydoc: any; provider: any; + element: any; + course: any; setContent: (content: string) => void; } function Editor(props: Editor) { const auth: any = React.useContext(AuthContext); + console.log(props.element); + console.log(props.course); - const editor : any = useEditor({ + const editor: any = useEditor({ extensions: [ StarterKit.configure({ // The Collaboration extension comes with its own history handling @@ -41,12 +50,131 @@ function Editor(props: Editor) { return (
- File -
- - + + + + + + + {" "} + {props.course.course.name} {props.element.name}{" "} + + props.setContent(editor.getJSON())}> + + + + + + + + + + + +
); } +const EditorTop = styled.div` + background-color: white; + border-radius: 15px; + margin: 40px; + margin-bottom: 20px; + padding: 10px; +`; + +// Inside EditorTop +const EditorDocSection = styled.div` + display: flex; + flex-direction: column; +`; +const EditorUsersSection = styled.div` + display: flex; + flex-direction: column; +`; + +// Inside EditorDocSection +const EditorInfoWrapper = styled.div` + display: flex; + flex-direction: row; + margin-bottom: 5px; +`; +const EditorButtonsWrapper = styled.div``; + +// Inside EditorUsersSection +const EditorUserProfileWrapper = styled.div``; + +// Inside EditorInfoWrapper +//..todo +const EditorInfoLearnHouseLogo = styled(Image)` + border-radius: 6px; + margin-right: 15px; +`; +const EditorInfoDocName = styled.div` + font-size: 16px; + justify-content: center; + align-items: center; + display: flex; + margin-left: 10px; + + svg { + margin-left: 4px; + margin-right: 4px; + color: #909090; + } +`; + +const EditorSaveButton = styled.div` + display: flex; + border-radius: 6px; + width: 25px; + height: 25px; + padding: 5px; + font-size: 5px; + margin-right: 5px; + margin-left: 7px; + + &.is-active { + background: rgba(176, 176, 176, 0.5); + + &:hover { + background: rgba(139, 139, 139, 0.5); + cursor: pointer; + } + } + + &:hover { + background: rgba(217, 217, 217, 0.48); + cursor: pointer; + } +`; + +const EditorInfoThumbnail = styled.img` + height: 25px; + width: 56px; + object-fit: cover; + object-position: top; + border-radius: 7px; + margin-left: 5px; +`; + +const EditorContentWrapper = styled.div` + margin: 40px; + background-color: white; + + // disable chrome outline + + + .ProseMirror { + padding: 10px; + &:focus { + outline: none !important; + outline-style: none !important; + box-shadow: none !important; + } + } + +`; + export default Editor; diff --git a/front/components/Editor/EditorWrapper.tsx b/front/components/Editor/EditorWrapper.tsx index ece8d159..283fd5f2 100644 --- a/front/components/Editor/EditorWrapper.tsx +++ b/front/components/Editor/EditorWrapper.tsx @@ -7,6 +7,7 @@ import { updateElement } from "../../services/courses/elements"; interface EditorWrapperProps { content: string; element: any; + course:any } function EditorWrapper(props: EditorWrapperProps) { @@ -18,7 +19,6 @@ function EditorWrapper(props: EditorWrapperProps) { function createRTCProvider() { const provider = new WebrtcProvider(props.element.element_id, ydoc); - setYdocState(ydoc); setProviderState(provider); setIsLoading(false); @@ -28,12 +28,13 @@ function EditorWrapper(props: EditorWrapperProps) { let element = props.element; element.content = content; const res = await updateElement(element, element.element_id); + alert(JSON.stringify(res)); } if (isLoading) { createRTCProvider(); } else { - return ; + return ; } } diff --git a/front/components/Editor/Toolbar/ToolbarButtons.tsx b/front/components/Editor/Toolbar/ToolbarButtons.tsx index 18bea8d7..4d057617 100644 --- a/front/components/Editor/Toolbar/ToolbarButtons.tsx +++ b/front/components/Editor/Toolbar/ToolbarButtons.tsx @@ -1,99 +1,82 @@ -export const ToolbarButtons = ({ editor }: any) => { - if (!editor) { - return null; - } +import styled from "styled-components"; +import { FontBoldIcon, FontItalicIcon, StrikethroughIcon, ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"; - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - ); - }; \ No newline at end of file +export const ToolbarButtons = ({ editor }: any) => { + if (!editor) { + return null; + } + + return ( + + editor.chain().focus().toggleBold().run()} className={editor.isActive("bold") ? "is-active" : ""}> + + + editor.chain().focus().toggleItalic().run()} className={editor.isActive("italic") ? "is-active" : ""}> + + + editor.chain().focus().toggleStrike().run()} className={editor.isActive("strike") ? "is-active" : ""}> + + + + editor.chain().focus().undo().run()}> + + + editor.chain().focus().redo().run()}> + + + editor.chain().focus().toggleHeading({ level: parseInt(e.target.value) }).run() }> + + + + + + + + + ); +}; + +const ToolButtonsWrapper = styled.div` + display: flex; + flex-direction: row; + align-items: left; + justify-content: left; +`; + +const ToolBtn = styled.div` + display: flex; + background: rgba(217, 217, 217, 0.24); + border-radius: 6px; + width: 25px; + height: 25px; + padding: 5px; + font-size: 5px; + margin-right: 5px; + + &.is-active { + background: rgba(176, 176, 176, 0.5); + + &:hover { + background: rgba(139, 139, 139, 0.5); + cursor: pointer; + } + } + + &:hover { + background: rgba(217, 217, 217, 0.48); + cursor: pointer; + } +`; + +const ToolSelect = styled.select` + display: flex; + background: rgba(217, 217, 217, 0.24); + border-radius: 6px; + width: 100px; + border: none; + height: 25px; + padding: 5px; + font-size: 11px; + font-family: "DM Sans"; + margin-right: 5px; +`; diff --git a/front/pages/index.tsx b/front/pages/index.tsx index 28e5c0b8..0fe7549e 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/rename/UI/Layout"; +import { PreAlphaLabel } from "../components//UI/Layout"; const Home: NextPage = () => { return ( diff --git a/front/pages/login.tsx b/front/pages/login.tsx index 51a2f2ae..524cdd5d 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/rename/UI/Header"; -import Layout from "../components/rename/UI/Layout"; -import { Title } from "../components/rename/UI/Elements/Styles/Title"; +import { Header } from "../components//UI/Header"; +import Layout from "../components//UI/Layout"; +import { Title } from "../components//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 2bc7d33e..a0ff2f16 100644 --- a/front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx +++ b/front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx @@ -1,9 +1,9 @@ import React from "react"; import { useState, useEffect } from "react"; import styled from "styled-components"; -import { Header } from "../../../../../../components/rename/UI/Header"; -import Layout from "../../../../../../components/rename/UI/Layout"; -import { Title } from "../../../../../../components/rename/UI/Elements/Styles/Title"; +import { Header } from "../../../../../../components//UI/Header"; +import Layout from "../../../../../../components//UI/Layout"; +import { Title } from "../../../../../../components//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"; 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 697b450f..87658580 100644 --- a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx +++ b/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx @@ -1,12 +1,13 @@ import { default as React, useEffect, useRef } from "react"; -import Layout from "../../../../../../../components/rename/UI/Layout"; -import { Title } from "../../../../../../../components/rename/UI/Elements/Styles/Title"; +import Layout from "../../../../../../../components//UI/Layout"; +import { Title } from "../../../../../../../components//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 AuthProvider from "../../../../../../../components/Security/AuthProvider"; import EditorWrapper from "../../../../../../../components/Editor/EditorWrapper"; +import { getCourseMetadata } from "../../../../../../../services/courses/courses"; // Workaround (Next.js SSR doesn't support tip tap editor) const Editor: any = dynamic(() => import("../../../../../../../components/Editor/EditorWrapper") as any, { @@ -15,25 +16,40 @@ const Editor: any = dynamic(() => import("../../../../../../../components/Editor function EditElement() { const router = useRouter(); - const { elementid } = router.query; + const { elementid, courseid } = router.query; const [element, setElement] = React.useState({}); + const [courseInfo, setCourseInfo] = React.useState({}) as any; const [isLoading, setIsLoading] = React.useState(true); async function fetchElementData() { const element = await getElement("element_" + elementid); setElement(element); + } + + async function fetchCourseInfo() { + const course = await getCourseMetadata("course_" + courseid); + setCourseInfo(course); + } + + async function fetchAllData() { + await fetchElementData(); + await fetchCourseInfo(); setIsLoading(false); } React.useEffect(() => { if (router.isReady) { - fetchElementData(); + fetchAllData(); } return () => {}; // eslint-disable-next-line react-hooks/exhaustive-deps }, [router.isReady]); - return {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 955549f4..c0630600 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/rename/UI/Layout"; +import Layout from "../../../../../../../components//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 f21009a4..4531e916 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/rename/UI/Layout"; +import Layout from "../../../../../components//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 055501f4..711dc6f7 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/rename/UI/Header"; -import Layout from "../../../../components/rename/UI/Layout"; -import { Title } from "../../../../components/rename/UI/Elements/Styles/Title"; +import { Header } from "../../../../components//UI/Header"; +import Layout from "../../../../components//UI/Layout"; +import { Title } from "../../../../components//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 8f5f456c..22c28e5e 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/rename/UI/Header"; -import Layout from "../../../../../components/rename/UI/Layout"; -import { Title } from "../../../../../components/rename/UI/Elements/Styles/Title"; +import { Header } from "../../../../../components//UI/Header"; +import Layout from "../../../../../components//UI/Layout"; +import { Title } from "../../../../../components//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 7a009b5c..67521df1 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/rename/UI/Layout"; -import { Title } from "../../../components/rename/UI/Elements/Styles/Title"; -import { Header } from "../../../components/rename/UI/Header"; +import Layout from "../../../components//UI/Layout"; +import { Title } from "../../../components//UI/Elements/Styles/Title"; +import { Header } from "../../../components//UI/Header"; import Link from "next/link"; const OrgHomePage = () => { diff --git a/front/pages/organizations/index.tsx b/front/pages/organizations/index.tsx index 12c0c65c..b8485cbd 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/rename/UI/Layout"; -import { Title } from "../../components/rename/UI/Elements/Styles/Title"; +import Layout from "../../components//UI/Layout"; +import { Title } from "../../components//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 2a82ff49..a15c7943 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/rename/UI/Layout"; -import { Title } from "../../components/rename/UI/Elements/Styles/Title"; +import Layout from "../../components//UI/Layout"; +import { Title } from "../../components//UI/Elements/Styles/Title"; import { createNewOrganization } from "../../services/orgs"; const Organizations = () => { diff --git a/front/pages/signup.tsx b/front/pages/signup.tsx index 23424698..240fb05a 100644 --- a/front/pages/signup.tsx +++ b/front/pages/signup.tsx @@ -1,7 +1,7 @@ import React from "react"; -import { Header } from "../components/rename/UI/Header"; -import Layout from "../components/rename/UI/Layout"; -import { Title } from "../components/rename/UI/Elements/Styles/Title"; +import { Header } from "../components//UI/Header"; +import Layout from "../components//UI/Layout"; +import { Title } from "../components//UI/Elements/Styles/Title"; import { signup } from "../services/auth/auth"; const SignUp = () => { From 2995c8ec842d54f74fe8615faa1b084fc7c3b712 Mon Sep 17 00:00:00 2001 From: swve Date: Sat, 3 Dec 2022 17:51:36 +0100 Subject: [PATCH 3/4] feat: add animations and avatar to editor --- front/components/Editor/Editor.tsx | 109 +++++++++++++----- .../Editor/Toolbar/ToolbarButtons.tsx | 14 +-- 2 files changed, 87 insertions(+), 36 deletions(-) diff --git a/front/components/Editor/Editor.tsx b/front/components/Editor/Editor.tsx index f849904d..12138f7d 100644 --- a/front/components/Editor/Editor.tsx +++ b/front/components/Editor/Editor.tsx @@ -6,10 +6,12 @@ import CollaborationCursor from "@tiptap/extension-collaboration-cursor"; import { AuthContext } from "../Security/AuthProvider"; import learnhouseIcon from "public/learnhouse_icon.png"; import { ToolbarButtons } from "./Toolbar/ToolbarButtons"; +import { motion, AnimatePresence } from "framer-motion"; import Image from "next/image"; import styled from "styled-components"; import { getBackendUrl } from "../../services/config"; -import { RocketIcon, SlashIcon, TriangleLeftIcon, TriangleRightIcon } from "@radix-ui/react-icons"; +import { GlobeIcon, SlashIcon } from "@radix-ui/react-icons"; +import Avvvatars from "avvvatars-react"; interface Editor { content: string; @@ -50,28 +52,58 @@ function Editor(props: Editor) { return (
- - - - - - - {" "} - {props.course.course.name} {props.element.name}{" "} - - props.setContent(editor.getJSON())}> - - - - - - - - - + + + + + + + + {" "} + {props.course.course.name} {props.element.name}{" "} + + props.setContent(editor.getJSON())}> + + + + + + + + + + + + + + + +
); } @@ -82,6 +114,12 @@ const EditorTop = styled.div` margin: 40px; margin-bottom: 20px; padding: 10px; + display: flex; + justify-content: space-between; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03); + //position: fixed; + z-index: 3; + width: -webkit-fill-available; `; // Inside EditorTop @@ -92,6 +130,8 @@ const EditorDocSection = styled.div` const EditorUsersSection = styled.div` display: flex; flex-direction: column; + justify-content: center; + align-items: center; `; // Inside EditorDocSection @@ -103,7 +143,12 @@ const EditorInfoWrapper = styled.div` const EditorButtonsWrapper = styled.div``; // Inside EditorUsersSection -const EditorUserProfileWrapper = styled.div``; +const EditorUserProfileWrapper = styled.div` + padding-right: 8px; + svg { + border-radius: 7px; + } +`; // Inside EditorInfoWrapper //..todo @@ -117,11 +162,13 @@ const EditorInfoDocName = styled.div` align-items: center; display: flex; margin-left: 10px; + color: #494949; svg { margin-left: 4px; margin-right: 4px; - color: #909090; + padding: 3px; + color: #353535; } `; @@ -161,20 +208,24 @@ const EditorInfoThumbnail = styled.img` const EditorContentWrapper = styled.div` margin: 40px; + margin-top: 20px; background-color: white; + border-radius: 10px; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03); // disable chrome outline - .ProseMirror { - padding: 10px; + padding-left: 20px; + padding-right: 20px; + padding-bottom: 6px; + padding-top: 1px; &:focus { - outline: none !important; - outline-style: none !important; - box-shadow: none !important; + outline: none !important; + outline-style: none !important; + box-shadow: none !important; + } } - } - `; export default Editor; diff --git a/front/components/Editor/Toolbar/ToolbarButtons.tsx b/front/components/Editor/Toolbar/ToolbarButtons.tsx index 4d057617..3e682fbc 100644 --- a/front/components/Editor/Toolbar/ToolbarButtons.tsx +++ b/front/components/Editor/Toolbar/ToolbarButtons.tsx @@ -8,6 +8,12 @@ export const ToolbarButtons = ({ editor }: any) => { return ( + editor.chain().focus().undo().run()}> + + + editor.chain().focus().redo().run()}> + + editor.chain().focus().toggleBold().run()} className={editor.isActive("bold") ? "is-active" : ""}> @@ -17,13 +23,6 @@ export const ToolbarButtons = ({ editor }: any) => { editor.chain().focus().toggleStrike().run()} className={editor.isActive("strike") ? "is-active" : ""}> - - editor.chain().focus().undo().run()}> - - - editor.chain().focus().redo().run()}> - - editor.chain().focus().toggleHeading({ level: parseInt(e.target.value) }).run() }> @@ -52,6 +51,7 @@ const ToolBtn = styled.div` padding: 5px; font-size: 5px; margin-right: 5px; + transition: all 0.2s ease-in-out; &.is-active { background: rgba(176, 176, 176, 0.5); From fec4437e0a4aaf96b0a5bd0e362fbd4ffed43a0a Mon Sep 17 00:00:00 2001 From: swve Date: Sun, 4 Dec 2022 10:39:35 +0100 Subject: [PATCH 4/4] fix: user avatar editor --- front/components/Drags/Element.tsx | 2 +- front/components/Editor/Editor.tsx | 15 +++++++-------- front/components/Security/AuthProvider.tsx | 9 +++++---- .../[orgslug]/course/[courseid]/edit/index.tsx | 2 +- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/front/components/Drags/Element.tsx b/front/components/Drags/Element.tsx index ba8b46d5..3d5d30d0 100644 --- a/front/components/Drags/Element.tsx +++ b/front/components/Drags/Element.tsx @@ -15,7 +15,7 @@ function Element(props: any) {   -   +   )} diff --git a/front/components/Editor/Editor.tsx b/front/components/Editor/Editor.tsx index 12138f7d..c30ea651 100644 --- a/front/components/Editor/Editor.tsx +++ b/front/components/Editor/Editor.tsx @@ -24,8 +24,6 @@ interface Editor { function Editor(props: Editor) { const auth: any = React.useContext(AuthContext); - console.log(props.element); - console.log(props.course); const editor: any = useEditor({ extensions: [ @@ -53,7 +51,7 @@ function Editor(props: Editor) { return (
- + {!auth.isAuthenticated && Loading} + {auth.isAuthenticated && } - - - + + +
); diff --git a/front/components/Security/AuthProvider.tsx b/front/components/Security/AuthProvider.tsx index 59e4f103..3eb88197 100644 --- a/front/components/Security/AuthProvider.tsx +++ b/front/components/Security/AuthProvider.tsx @@ -12,14 +12,15 @@ export interface Auth { isLoading: boolean; } - const AuthProvider = (props: any) => { const router = useRouter(); const [auth, setAuth] = React.useState({ access_token: "", isAuthenticated: false, userInfo: {}, isLoading: true }); async function checkRefreshToken() { let data = await getRefreshToken(); - return data.access_token; + if (data) { + return data.access_token; + } } async function checkAuth() { @@ -27,13 +28,13 @@ const AuthProvider = (props: any) => { let access_token = await checkRefreshToken(); let userInfo = {}; let isLoading = false; - + if (access_token) { userInfo = await getUserInfo(access_token); setAuth({ access_token, isAuthenticated: true, userInfo, isLoading }); // if user is authenticated and tries to access login or signup page, redirect to home - if(NON_AUTHENTICATED_ROUTES.includes(router.pathname)) { + if (NON_AUTHENTICATED_ROUTES.includes(router.pathname)) { router.push("/"); } } else { diff --git a/front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx b/front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx index a0ff2f16..5dd3e650 100644 --- a/front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx +++ b/front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx @@ -4,7 +4,7 @@ import styled from "styled-components"; import { Header } from "../../../../../../components//UI/Header"; import Layout from "../../../../../../components//UI/Layout"; import { Title } from "../../../../../../components//UI/Elements/Styles/Title"; -import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; +import { DragDropContext, Droppable } from "react-beautiful-dnd"; import { initialData, initialData2 } from "../../../../../../components/Drags/data"; import Chapter from "../../../../../../components/Drags/Chapter"; import { createChapter, deleteChapter, getCourseChaptersMetadata, updateChaptersMetadata } from "../../../../../../services/courses/chapters";