feat: add edit element button

front/components/drags/chapter.tsx

@@ -35,7 +35,7 @@ function Chapter(props: any) {
             {(provided) => (
               <ElementsList {...provided.droppableProps} ref={provided.innerRef}>
                 {props.info.list.elements.map((element: any, index: any) => (
-                  <Element key={element.id} element={element} index={index}></Element>
+                  <Element orgslug={props.orgslug} courseid={props.courseid} key={element.id} element={element} index={index}></Element>
                 ))}
                 {provided.placeholder}
               </ElementsList>

front/components/drags/element.tsx

@@ -1,13 +1,18 @@
+import Link from "next/link";
 import React from "react";
 import {  Draggable } from "react-beautiful-dnd";
 import styled from "styled-components";
 
 function Element(props: any) {
+
   return (
     <Draggable key={props.element.id} draggableId={props.element.id} index={props.index}>
       {(provided) => (
         <ElementWrapper key={props.element.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
           <p>{props.element.name} </p>
+          <Link href={`/org/${props.orgslug}/course/${props.courseid}/element/${props.element.id.replace("element_", "")}/edit`}>
+            <a  target="_blank" rel="noopener noreferrer">Edit</a>
+          </Link>
         </ElementWrapper>
       )}
     </Draggable>

front/pages/org/[orgslug]/course/[courseid]/[elementid]/edit.tsx

@@ -1,26 +0,0 @@
-import { default as React, useEffect, useRef } from "react";
-
-import Layout from "../../../../../../components/ui/Layout";
-import { Title } from "../../../../../../components/ui/styles/Title";
-import dynamic from "next/dynamic";
-import { AuthContext } from "../../../../../../components/security/AuthProvider";
-
-const Editor = dynamic(() => import("../../../../../../components/editor/editor"), {
-  ssr: false,
-});
-
-// tools
-
-function EditElement() {
-  
-  
-  return (
-    <Layout>
-      <Title>Edit Page </Title>
-      <br />
-      <Editor></Editor>
-    </Layout>
-  );
-}
-
-export default EditElement;

front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx

@@ -27,7 +27,7 @@ function CourseEdit() {
 
   // Check window availability
   const [winReady, setwinReady] = useState(false);
-  const { courseid } = router.query;
+  const { courseid, orgslug } = router.query;
 
   async function getCourseChapters() {
     const courseChapters = await getCourseChaptersMetadata(courseid);
@@ -232,7 +232,7 @@ function CourseEdit() {
                   <div key={"chapters"} {...provided.droppableProps} ref={provided.innerRef}>
                     {getChapters().map((info: any, index: any) => (
                       <>
-                        <Chapter openNewElementModal={openNewElementModal} deleteChapter={deleteChapterUI} key={index} info={info} index={index}></Chapter>
+                        <Chapter orgslug={orgslug} courseid={courseid} openNewElementModal={openNewElementModal} deleteChapter={deleteChapterUI} key={index} info={info} index={index}></Chapter>
                       </>
                     ))}
                     {provided.placeholder}

front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx

@@ -0,0 +1,26 @@
+import { default as React, useEffect, useRef } from "react";
+
+import Layout from "../../../../../../../components/ui/Layout";
+import { Title } from "../../../../../../../components/ui/styles/Title";
+import dynamic from "next/dynamic";
+import { AuthContext } from "../../../../../../../components/security/AuthProvider";
+
+const Editor = dynamic(() => import("../../../../../../../components/editor/editor"), {
+  ssr: false,
+});
+
+// tools
+
+function EditElement() {
+  
+  
+  return (
+    <Layout>
+      <Title>Edit Page </Title>
+      <br />
+      <Editor></Editor>
+    </Layout>
+  );
+}
+
+export default EditElement;