fix: refactor files

feat: refactor more files

feat: uppercase component folder 1/2

feat: uppercase component folder 2/2

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 (
+    <div>
+      File <button onClick={() => props.setContent(editor.getJSON())}>save</button>
+      <br /><hr />
+      <ToolbarButtons editor={editor} />
+      <EditorContent editor={editor} style={{ backgroundColor: "white" }} />
+    </div>
+  );
+}
+
+export default Editor;

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 Editor from "./Editor";
-import { IndexeddbPersistence } from "y-indexeddb";
 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<any>({});
@@ -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 <Editor content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
-      <div>
-        <EditorWithOptions content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></EditorWithOptions>
-      </div>
-    );
   }
 }
 
-export default Editor;
+export default EditorWrapper;

front/components/Editor/Toolbar/ToolbarButtons.tsx

@@ -1,21 +1,4 @@
-import React from "react";
+export const ToolbarButtons = ({ editor }: any) => {
-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) => {
     if (!editor) {
       return null;
     }
@@ -114,38 +97,3 @@ 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 (
-    <div>
-      File <button onClick={() => props.setContent(editor.getJSON())}>save</button>
-      <br /><hr />
-      <MenuBar editor={editor} />
-      <EditorContent editor={editor} style={{ backgroundColor: "white" }} />
-    </div>
-  );
-}
-
-export default EditorWithOptions;

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";

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 = {

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 (

front/pages/login.tsx

@@ -1,8 +1,8 @@
 import Router from "next/router";
 import React from "react";
-import { Header } from "../components/ui/Header";
+import { Header } from "../components/rename/UI/Header";
-import Layout from "../components/ui/Layout";
+import Layout from "../components/rename/UI/Layout";
-import { Title } from "../components/ui/styles/Title";
+import { Title } from "../components/rename/UI/Elements/Styles/Title";
 import { loginAndGetToken } from "../services/auth/auth";
 
 const Login = () => {

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 { Header } from "../../../../../../components/rename/UI/Header";
-import Layout from "../../../../../../components/ui/Layout";
+import Layout from "../../../../../../components/rename/UI/Layout";
-import { Title } from "../../../../../../components/ui/styles/Title";
+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 { initialData, initialData2 } from "../../../../../../components/Drags/data";
-import Chapter from "../../../../../../components/drags/Chapter";
+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 NewChapterModal from "../../../../../../components/Modals/CourseEdit/NewChapter";
-import NewElementModal from "../../../../../../components/modals/CourseEdit/NewElement";
+import NewElementModal from "../../../../../../components/Modals/CourseEdit/NewElement";
 import { createElement, createFileElement } from "../../../../../../services/courses/elements";
 
 function CourseEdit() {

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 Layout from "../../../../../../../components/rename/UI/Layout";
-import { Title } from "../../../../../../../components/ui/styles/Title";
+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 (
+  return <AuthProvider>{isLoading ? <div>Loading...</div> : <EditorWrapper element={element} content={element.content}></EditorWrapper>}</AuthProvider>;
-    <Layout>
-      <Title>Edit : {element.name} </Title>
-      <br />
-      {isLoading ? (
-        <div>Loading...</div>
-      ) : (
-        <div>
-          <Editor element={element} content={element.content}></Editor>
-        </div>
-      )}
-    </Layout>
-  );
 }
 
 export default EditElement;

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";
 

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";
 

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 { Header } from "../../../../components/rename/UI/Header";
-import Layout from "../../../../components/ui/Layout";
+import Layout from "../../../../components/rename/UI/Layout";
-import { Title } from "../../../../components/ui/styles/Title";
+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";

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 { Header } from "../../../../../components/rename/UI/Header";
-import Layout from "../../../../../components/ui/Layout";
+import Layout from "../../../../../components/rename/UI/Layout";
-import { Title } from "../../../../../components/ui/styles/Title";
+import { Title } from "../../../../../components/rename/UI/Elements/Styles/Title";
 import { createNewCourse } from "../../../../../services/courses/courses";
 import { getOrganizationContextInfo } from "../../../../../services/orgs";
 

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 Layout from "../../../components/rename/UI/Layout";
-import { Title } from "../../../components/ui/styles/Title";
+import { Title } from "../../../components/rename/UI/Elements/Styles/Title";
-import { Header } from "../../../components/ui/Header";
+import { Header } from "../../../components/rename/UI/Header";
 import Link from "next/link";
 
 const OrgHomePage = () => {

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 Layout from "../../components/rename/UI/Layout";
-import { Title } from "../../components/ui/styles/Title";
+import { Title } from "../../components/rename/UI/Elements/Styles/Title";
 import { deleteOrganizationFromBackend, getUserOrganizations } from "../../services/orgs";
 
 const Organizations = () => {

front/pages/organizations/new.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import Layout from "../../components/ui/Layout";
+import Layout from "../../components/rename/UI/Layout";
-import { Title } from "../../components/ui/styles/Title";
+import { Title } from "../../components/rename/UI/Elements/Styles/Title";
 import { createNewOrganization } from "../../services/orgs";
 
 const Organizations = () => {

front/pages/signup.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { Header } from "../components/ui/Header";
+import { Header } from "../components/rename/UI/Header";
-import Layout from "../components/ui/Layout";
+import Layout from "../components/rename/UI/Layout";
-import { Title } from "../components/ui/styles/Title";
+import { Title } from "../components/rename/UI/Elements/Styles/Title";
 import { signup } from "../services/auth/auth";
 
 const SignUp = () => {

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) {

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"]
 }