chore: refactor components

front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { styled } from "styled-components";
+import Youtube from "@tiptap/extension-youtube";
+// Custom Extensions
+import InfoCallout from "@editor/Extensions/Callout/Info/InfoCallout";
+import WarningCallout from "@editor/Extensions/Callout/Warning/WarningCallout";
+import ImageBlock from "@editor/Extensions/Image/ImageBlock";
+import VideoBlock from "@editor/Extensions/Video/VideoBlock";
+import MathEquationBlock from "@components/Editor/Extensions/MathEquation/MathEquationBlock";
+import PDFBlock from "@components/Editor/Extensions/PDF/PDFBlock";
+
+interface Editor {
+  content: string;
+  activity: any;
+  //course: any;
+}
+
+function Canva(props: Editor) {
+  const isEditable = false;
+  const editor: any = useEditor({
+    editable: isEditable,
+    extensions: [
+      StarterKit,
+      // Custom Extensions
+      InfoCallout.configure({
+        editable: isEditable,
+      }),
+      WarningCallout.configure({
+        editable: isEditable,
+      }),
+      ImageBlock.configure({
+        editable: isEditable,
+        activity: props.activity,
+      }),
+      VideoBlock.configure({
+        editable: true,
+        activity: props.activity,
+      }),
+      MathEquationBlock.configure({
+        editable: false,
+        activity: props.activity,
+      }),
+      PDFBlock.configure({
+        editable: true,
+        activity: props.activity,
+      }),
+      Youtube.configure({
+        controls: true,
+        modestBranding: true,
+      }),
+    ],
+
+    content: props.content,
+  });
+
+  return (
+    <CanvaWrapper>
+      <EditorContent editor={editor} />
+    </CanvaWrapper>
+  );
+}
+
+const CanvaWrapper = styled.div`
+  padding-top: 20px;
+  width: 1300px;
+  margin: 0 auto;
+`;
+
+export default Canva;

front/components/Pages/Activities/Video/Video.tsx

@@ -0,0 +1,72 @@
+import { getBackendUrl } from "@services/config/config";
+import React from "react";
+import styled from "styled-components";
+
+function VideoActivity({ activity, course }: { activity: any; course: any }) {
+  function getChapterName() {
+    let chapterName = "";
+    let chapterId = activity.chapter_id;
+    course.chapters.forEach((chapter: any) => {
+      if (chapter.chapter_id === chapterId) {
+        chapterName = chapter.name;
+      }
+    });
+    return chapterName;
+  }
+
+  return (
+    <VideoActivityLayout>
+      <VideoTitle>
+        <p>Chapter : {getChapterName()}</p>
+        {activity.name}
+      </VideoTitle>
+      <VideoPlayerWrapper>
+        <video controls src={`${getBackendUrl()}content/uploads/video/${activity.content.video.activity_id}/${activity.content.video.filename}`}></video>
+      </VideoPlayerWrapper>
+    </VideoActivityLayout>
+  );
+}
+
+export default VideoActivity;
+
+const VideoActivityLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  background: #141414;
+  min-width: 100%;
+  min-height: 1200px;
+`;
+
+const VideoTitle = styled.div`
+  display: flex;
+  width: 1300px;
+  margin: 0 auto;
+  padding-top: 20px;
+  font-size: 24px;
+  font-weight: 700;
+  color: #fff;
+  flex-direction: column;
+
+  p {
+    font-size: 14px;
+    padding: 0;
+    margin: 0;
+    color: #ffffffaa;
+  }
+`;
+
+const VideoPlayerWrapper = styled.div`
+  display: flex;
+  width: 1300px;
+  margin: 0 auto;
+  justify-content: center;
+  padding-top: 20px;
+
+  video {
+    width: 1300px;
+    height: 500px;
+    border-radius: 7px;
+    background-color: black;
+  }
+`;

front/components/Pages/CourseEdit/Draggables/Activity.tsx

@@ -0,0 +1,47 @@
+import Link from "next/link";
+import React from "react";
+import {  Draggable } from "react-beautiful-dnd";
+import { EyeOpenIcon, Pencil2Icon } from '@radix-ui/react-icons'
+import styled from "styled-components";
+import { getUriWithOrg } from "@services/config/config";
+
+function Activity(props: any) {
+
+  return (
+    <Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}>
+      {(provided) => (
+        <ActivityWrapper key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+          <p>{props.activity.name} </p>
+          <Link
+            href={getUriWithOrg(props.orgslug,"")+`/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`}
+            
+            rel="noopener noreferrer">
+            &nbsp; <EyeOpenIcon/>
+          </Link>
+          <Link
+            href={getUriWithOrg(props.orgslug,"") +`/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}/edit`}
+            rel="noopener noreferrer">
+            &nbsp; <Pencil2Icon/>
+          </Link>
+        </ActivityWrapper>
+      )}
+    </Draggable>
+  );
+}
+
+export const ActivityWrapper = styled.div`
+  padding: 2px;
+  padding-left: 17px;
+  list-style: none;
+  /* padding-left: 2px; */
+  background-color: #f4f4f4c5;
+  border-radius: 7px;
+  margin: 15px;
+  display: flex;
+  align-items: center;
+  &:hover {
+    background-color: #8c949c7b;
+  }
+  
+`;
+export default Activity;

front/components/Pages/CourseEdit/Draggables/Chapter.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import styled from "styled-components";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import Activity, { ActivityWrapper } from "./Activity";
+
+function Chapter(props: any) {
+  return (
+    <Draggable key={props.info.list.chapter.id} draggableId={props.info.list.chapter.id} index={props.index}>
+      {(provided, snapshot) => (
+        <ChapterWrapper
+          {...provided.dragHandleProps}
+          {...provided.draggableProps}
+          ref={provided.innerRef}
+          //  isDragging={snapshot.isDragging}
+          key={props.info.list.chapter.id}
+        >
+          <h3>
+            {props.info.list.chapter.name}{" "}
+            <button
+              onClick={() => {
+                props.openNewActivityModal(props.info.list.chapter.id);
+              }}
+            >
+              
+              Create Activity
+            </button>
+
+            
+            <button
+              onClick={() => {
+                props.deleteChapter(props.info.list.chapter.id);
+              }}
+            >
+              X
+            </button>
+          </h3>
+          <Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="activity">
+            {(provided) => (
+              <ActivitiesList {...provided.droppableProps} ref={provided.innerRef}>
+                {props.info.list.activities.map((activity: any, index: any) => (
+                  <Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity>
+                ))}
+                {provided.placeholder}
+              </ActivitiesList>
+            )}
+          </Droppable>
+        </ChapterWrapper>
+      )}
+    </Draggable>
+  );
+}
+
+const ChapterWrapper = styled.div`
+  margin-bottom: 20px;
+  padding: 4px;
+  background-color: #ffffffc5;
+  width: 900px;
+  font-size: 15px;
+  display: block;
+  border-radius: 9px;
+  border: 1px solid rgba(255, 255, 255, 0.19);
+  box-shadow: 0px 13px 33px -13px rgb(0 0 0 / 12%);
+  transition: all 0.2s ease;
+  
+
+  h3{
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+`;
+
+const ActivitiesList = styled.div`
+  padding: 10px;
+`;
+
+export default Chapter;

front/components/Pages/CourseEdit/Draggables/data.ts

@@ -0,0 +1,20 @@
+export const initialData = {
+  activities: {
+    "activity-1": { id: "activity-1", content: "First activity" },
+    "activity-2": { id: "activity-2", content: "Second activity" },
+    "activity-3": { id: "activity-3", content: "Third activity" },
+    "activity-4": { id: "activity-4", content: "Fourth activity" },
+    "activity-5": { id: "activity-5", content: "Fifth activity" },
+  },
+  chapters: {
+    "chapter-1": { id: "chapter-1", name: "Chapter 1", activityIds: ["activity-1", "activity-2", "activity-3"] },
+    "chapter-2": { id: "chapter-2", name: "Chapter 2", activityIds: ["activity-4"] },
+    "chapter-3": { id: "chapter-3", name: "Chapter 3", activityIds: ["activity-5"] },
+  },
+
+  chapterOrder: ["chapter-1", "chapter-2", "chapter-3"],
+};
+
+export const initialData2 = {
+};
+

front/components/Pages/CourseEdit/NewActivity.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { ArrowLeftIcon, Cross1Icon } from "@radix-ui/react-icons";
+import styled from "styled-components";
+import DynamicCanvaModal from "./NewActivityModal/DynamicCanva";
+import VideoModal from "./NewActivityModal/Video";
+
+function NewActivityModal({ closeModal, submitActivity, submitFileActivity, chapterId }: any) {
+  const [selectedView, setSelectedView] = useState("home");
+
+  return (
+    <div>
+      <button onClick={() => { setSelectedView("home") }}>
+        <ArrowLeftIcon />
+      </button>
+      <button onClick={closeModal}>
+        <Cross1Icon />
+      </button>
+
+      {selectedView === "home" && (
+        <ActivityChooserWrapper>
+          <ActivityButton onClick={() => { setSelectedView("dynamic") }}>✨📄</ActivityButton>
+          <ActivityButton onClick={() => { setSelectedView("video") }}>📹</ActivityButton>
+        </ActivityChooserWrapper>
+      )}
+
+      {selectedView === "dynamic" && (
+        <DynamicCanvaModal submitActivity={submitActivity} chapterId={chapterId} />
+      )}
+
+      {selectedView === "video" && (
+        <VideoModal submitFileActivity={submitFileActivity} chapterId={chapterId} />
+      )}
+
+    </div>
+  );
+}
+
+const ActivityChooserWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+`;
+
+const ActivityButton = styled.button`
+  padding: 40px;
+  border-radius: 10px !important;
+  border: none;
+  font-size: 80px !important;
+  margin: 40px;
+  background-color: #8c949c33 !important;
+  cursor: pointer;
+  &:hover {
+    background-color: #8c949c7b;
+  }
+`;
+
+export default NewActivityModal;

front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+
+function DynamicCanvaModal({ submitActivity, chapterId }: any) {
+  const [activityName, setActivityName] = useState("");
+  const [activityDescription, setActivityDescription] = useState("");
+
+  const handleActivityNameChange = (e: any) => {
+    setActivityName(e.target.value);
+  };
+
+  const handleActivityDescriptionChange = (e: any) => {
+    setActivityDescription(e.target.value);
+  };
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    console.log({ activityName, activityDescription, chapterId });
+    submitActivity({
+      name: activityName,
+      chapterId: chapterId,
+      type: "dynamic",
+    });
+  };
+  return (
+    <div>
+      <div>
+        <input type="text" onChange={handleActivityNameChange} placeholder="Activity Name" /> <br />
+        <input type="text" onChange={handleActivityDescriptionChange} placeholder="Activity Description" />
+        <br />
+        <button onClick={handleSubmit}>Add Activity</button>
+      </div>
+    </div>
+  );
+}
+
+export default DynamicCanvaModal;

front/components/Pages/CourseEdit/NewActivityModal/Video.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+function VideoModal({ submitFileActivity, chapterId }: any) {
+  const [video, setVideo] = React.useState(null) as any;
+  const [name, setName] = React.useState("");
+
+  const handleVideoChange = (event: React.ChangeEvent<any>) => {
+    setVideo(event.target.files[0]);
+  };
+
+  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    let status = await submitFileActivity(video, "video", { name, type: "video" }, chapterId);
+  };
+
+  /* TODO : implement some sort of progress bar for file uploads, it is not possible yet because i'm not using axios.
+   and the actual upload isn't happening here anyway, it's in the submitFileActivity function */
+
+  return (
+    <div>
+      <input type="text" placeholder="video title" onChange={handleNameChange} />
+      <br />
+      <br />
+      <input type="file" onChange={handleVideoChange} name="video" id="" />
+      <br />
+
+      <br />
+      <button onClick={handleSubmit}>Send</button>
+    </div>
+  );
+}
+
+export default VideoModal;

front/components/Pages/CourseEdit/NewChapter.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+
+function NewChapterModal({ submitChapter , closeModal }: any) {
+  const [chapterName, setChapterName] = useState("");
+  const [chapterDescription, setChapterDescription] = useState("");
+
+  const handleChapterNameChange = (e: any) => {
+    setChapterName(e.target.value);
+  };
+
+  const handleChapterDescriptionChange = (e: any) => {
+    setChapterDescription(e.target.value);
+  };
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    console.log({ chapterName, chapterDescription });
+    submitChapter({ name : chapterName, description : chapterDescription , activities : [] });
+  };
+
+  return (
+    <div>
+      <button onClick={closeModal}>X</button>
+      <input type="text" onChange={handleChapterNameChange} placeholder="Chapter Name" /> <br />
+      <input type="text" onChange={handleChapterDescriptionChange} placeholder="Chapter Description" />
+      <br />
+      <button onClick={handleSubmit}>Add Chapter</button>
+    </div>
+  );
+}
+
+export default NewChapterModal;