From c9de9b4ff6c749ba979f3257c7b092f2ac151a82 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Fri, 11 Nov 2022 21:09:14 +0100
Subject: [PATCH] feat: add edit element button

---
 front/components/drags/chapter.tsx            |  2 +-
 front/components/drags/element.tsx            |  5 ++++
 .../course/[courseid]/[elementid]/edit.tsx    | 26 -------------------
 .../course/[courseid]/edit/index.tsx          |  4 +--
 .../[courseid]/element/[elementid]/edit.tsx   | 26 +++++++++++++++++++
 .../{ => element}/[elementid]/index.tsx       |  0
 6 files changed, 34 insertions(+), 29 deletions(-)
 delete mode 100644 front/pages/org/[orgslug]/course/[courseid]/[elementid]/edit.tsx
 create mode 100644 front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx
 rename front/pages/org/[orgslug]/course/[courseid]/{ => element}/[elementid]/index.tsx (100%)

diff --git a/front/components/drags/chapter.tsx b/front/components/drags/chapter.tsx
index f58608a2..19659a59 100644
--- a/front/components/drags/chapter.tsx
+++ b/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>
diff --git a/front/components/drags/element.tsx b/front/components/drags/element.tsx
index fd5397f4..0d716cdb 100644
--- a/front/components/drags/element.tsx
+++ b/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>
diff --git a/front/pages/org/[orgslug]/course/[courseid]/[elementid]/edit.tsx b/front/pages/org/[orgslug]/course/[courseid]/[elementid]/edit.tsx
deleted file mode 100644
index e1cc0253..00000000
--- a/front/pages/org/[orgslug]/course/[courseid]/[elementid]/edit.tsx
+++ /dev/null
@@ -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;
diff --git a/front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx b/front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx
index b85bbf95..9f93d0ad 100644
--- a/front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx
+++ b/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}
diff --git a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx b/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx
new file mode 100644
index 00000000..7e1e1ddb
--- /dev/null
+++ b/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;
diff --git a/front/pages/org/[orgslug]/course/[courseid]/[elementid]/index.tsx b/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx
similarity index 100%
rename from front/pages/org/[orgslug]/course/[courseid]/[elementid]/index.tsx
rename to front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx