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 { 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<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 (
-      <div>
-        <EditorWithOptions content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></EditorWithOptions>
-      </div>
-    );
+    return <Editor content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
   }
 }
 
-export default Editor;
+export default EditorWrapper;

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) {
         </button>
       </>
     );
-  };
-
-  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 = {