From ddc8e38277df0c56c6866bc613f60c29fbfcfb0d Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sun, 14 May 2023 15:38:43 +0200
Subject: [PATCH] wip: youtube activity

---
 .../course/[courseid]/edit/page.tsx           | 11 +++-
 .../[orgslug]/(withmenu)/courses/courses.tsx  | 14 ++--
 .../Create/NewActivityModal/Video.tsx         | 64 +++++++++++++++----
 front/services/courses/activities.ts          |  6 ++
 front/tailwind.config.js                      |  1 -
 5 files changed, 74 insertions(+), 22 deletions(-)

diff --git a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
index 2daca32a..22f9ef42 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
@@ -11,7 +11,7 @@ import { createChapter, deleteChapter, getCourseChaptersMetadata, updateChapters
 import { useRouter } from "next/navigation";
 import NewChapterModal from "@components/Modals/Chapters/NewChapter";
 import NewActivityModal from "@components/Modals/Activities/Create/NewActivity";
-import { createActivity, createFileActivity } from "@services/courses/activities";
+import { createActivity, createFileActivity, createYouTubeVideoActivity } from "@services/courses/activities";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
 import Modal from "@components/UI/Modal/Modal";
 import { denyAccessToUser } from "@services/utils/react/middlewares/views";
@@ -89,13 +89,20 @@ function CourseEdit(params: any) {
 
   // Submit File Upload
   const submitFileActivity = async (file: any, type: any, activity: any, chapterId: string) => {
-    console.log("submitFileActivity", file);
     await updateChaptersMetadata(courseid, data);
     await createFileActivity(file, type, activity, chapterId);
     await getCourseChapters();
     setNewActivityModal(false);
   };
 
+  // Submit YouTube Video Upload
+  const submitVideoYouTubeActivity = async (data : any, activity: any, chapterId: string) => {
+    await updateChaptersMetadata(courseid, data);
+    await createYouTubeVideoActivity(data, activity, chapterId);
+    await getCourseChapters();
+    setNewActivityModal(false);
+  };
+
   const deleteChapterUI = async (chapterId: any) => {
     console.log("deleteChapter", chapterId);
     await deleteChapter(chapterId);
diff --git a/front/app/_orgs/[orgslug]/(withmenu)/courses/courses.tsx b/front/app/_orgs/[orgslug]/(withmenu)/courses/courses.tsx
index 9d0d6269..a37f2010 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/courses/courses.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/courses/courses.tsx
@@ -16,6 +16,11 @@ interface CourseProps {
     courses: any;
 }
 
+// function to remove "course_" from the course_id
+function removeCoursePrefix(course_id: string) {
+    return course_id.replace("course_", "");
+}
+
 function Courses(props: CourseProps) {
     const orgslug = props.orgslug;
     const courses = props.courses;
@@ -29,10 +34,7 @@ function Courses(props: CourseProps) {
         setNewCourseModal(false);
     }
 
-    // function to remove "course_" from the course_id
-    function removeCoursePrefix(course_id: string) {
-        return course_id.replace("course_", "");
-    }
+    
 
 
     return (
@@ -62,7 +64,7 @@ function Courses(props: CourseProps) {
 
                     {courses.map((course: any) => (
                         <div key={course.course_id}>
-                            <AdminEditsArea course={course} course_id={course.course_id} deleteCourses={deleteCourses} />
+                            <AdminEditsArea course={course} orgslug={orgslug} course_id={course.course_id} deleteCourses={deleteCourses} />
                             <Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id))}>
                                 <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getBackendUrl()}content/uploads/img/${course.thumbnail})` }}>
 
@@ -131,7 +133,7 @@ const AdminEditsArea = (props: any) => {
                     <button className="rounded-md text-sm px-3 font-bold text-red-800 bg-red-200 w-16 flex justify-center items-center" onClick={() => props.deleteCourses(props.course_id)}>
                         Delete <Trash size={10}></Trash>
                     </button>
-                    <Link href={getUriWithOrg(props.orgslug, "/course/" + props.course_id + "/edit")}>
+                    <Link href={getUriWithOrg(props.orgslug, "/course/" + removeCoursePrefix(props.course_id) + "/edit")}>
                         <button className="rounded-md text-sm px-3 font-bold text-orange-800 bg-orange-200 w-16 flex justify-center items-center">
                             Edit <Edit2 size={10}></Edit2>
                         </button>
diff --git a/front/components/Modals/Activities/Create/NewActivityModal/Video.tsx b/front/components/Modals/Activities/Create/NewActivityModal/Video.tsx
index 36d00097..d0513edf 100644
--- a/front/components/Modals/Activities/Create/NewActivityModal/Video.tsx
+++ b/front/components/Modals/Activities/Create/NewActivityModal/Video.tsx
@@ -2,11 +2,14 @@ import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input
 import React, { useState } from "react";
 import * as Form from '@radix-ui/react-form';
 import BarLoader from "react-spinners/BarLoader";
+import { Youtube } from "lucide-react";
 
 function VideoModal({ submitFileActivity, chapterId }: any) {
   const [video, setVideo] = React.useState(null) as any;
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [name, setName] = React.useState("");
+  const [youtubeUrl, setYoutubeUrl] = React.useState("");
+  const [selectedView, setSelectedView] = React.useState("file") as any;
 
   const handleVideoChange = (event: React.ChangeEvent<any>) => {
     setVideo(event.target.files[0]);
@@ -16,18 +19,29 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
     setName(event.target.value);
   };
 
+  const handleYoutubeUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setYoutubeUrl(event.target.value);
+  };
+
   const handleSubmit = async (e: any) => {
     e.preventDefault();
     setIsSubmitting(true);
-    let status = await submitFileActivity(video, "video", { name, type: "video" }, chapterId);
+    if (selectedView === "file") {
+      let status = await submitFileActivity(video, "video", { name, type: "video" }, chapterId);
     setIsSubmitting(false);
+    }
+    if (selectedView === "youtube") {
+      let status = await submitFileActivity(video, "video", { name, type: "video" }, chapterId);
+    setIsSubmitting(false);
+    }
+    
   };
 
   /* 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 (
-      <FormLayout onSubmit={handleSubmit}>
+    <FormLayout onSubmit={handleSubmit}>
       <FormField name="video-activity-name">
         <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
           <FormLabel>Video name</FormLabel>
@@ -37,20 +51,44 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
           <Input onChange={handleNameChange} type="text" required />
         </Form.Control>
       </FormField>
-      <FormField name="video-activity-file">
-        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
-          <FormLabel>Video file</FormLabel>
-          <FormMessage match="valueMissing">Please provide a video for your activity</FormMessage>
-        </Flex>
-        <Form.Control asChild>
-          <input type="file" onChange={handleVideoChange} required />
-        </Form.Control>
-      </FormField>
+      <div className="flex flex-col rounded-md bg-gray-50 outline-dashed outline-gray-200">
+        <div className="">
+          <div className="flex m-4 justify-center space-x-2 mb-0">
+            <div onClick={() => { setSelectedView("file") }} className="rounded-full bg-slate-900 text-zinc-50 py-2 px-4 text-sm drop-shadow-md hover:cursor-pointer hover:bg-slate-700 ">Video upload</div>
+            <div onClick={() => { setSelectedView("youtube") }} className="rounded-full bg-slate-900 text-zinc-50 py-2 px-4 text-sm drop-shadow-md hover:cursor-pointer hover:bg-slate-700">YouTube Video</div>
+          </div>
+          {selectedView === "file" && (<div className="p-4 justify-center m-auto align-middle">
+            <FormField name="video-activity-file">
+              <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+                <FormLabel>Video file</FormLabel>
+                <FormMessage match="valueMissing">Please provide a video for your activity</FormMessage>
+              </Flex>
+              <Form.Control asChild>
+                <input type="file" onChange={handleVideoChange} required />
+              </Form.Control>
+            </FormField>
+          </div>)}
+          {selectedView === "youtube" && (
+
+            <div className="p-4 justify-center m-auto align-middle">
+              <FormField name="video-activity-file">
+                <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+                  <FormLabel className="flex justify-center align-middle"><Youtube className="m-auto pr-1" /><span className="flex">YouTube URL</span></FormLabel>
+                  <FormMessage match="valueMissing">Please provide a video for your activity</FormMessage>
+                </Flex>
+                <Form.Control asChild>
+                  <Input className="bg-white" onChange={handleYoutubeUrlChange} type="text" required />
+                </Form.Control>
+              </FormField>
+            </div>
+          )}
+        </div>
+      </div>
 
       <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
         <Form.Submit asChild>
-          <ButtonBlack  type="submit" css={{ marginTop: 10 }}>
-            {isSubmitting ? <BarLoader cssOverride={{borderRadius:60,}} width={60} color="#ffffff" /> : "Create activity"}
+          <ButtonBlack className="bg-black" type="submit" css={{ marginTop: 10 }}>
+            {isSubmitting ? <BarLoader cssOverride={{ borderRadius: 60, }} width={60} color="#ffffff" /> : "Create activity"}
           </ButtonBlack>
         </Form.Submit>
       </Flex>
diff --git a/front/services/courses/activities.ts b/front/services/courses/activities.ts
index 209b5325..49b41246 100644
--- a/front/services/courses/activities.ts
+++ b/front/services/courses/activities.ts
@@ -36,6 +36,12 @@ export async function createFileActivity(file: File, type: string, data: any, ch
   return res;
 }
 
+export async function createYouTubeVideoActivity(data: any, activity: any, chapter_id: any) {
+  const result = await fetch(`${getAPIUrl()}activities/youtubevideo?coursechapter_id=${chapter_id}`, RequestBody("POST", data));
+  const res = await result.json();
+  return res;
+}
+
 export async function getActivity(activity_id: any) {
   const result = await fetch(`${getAPIUrl()}activities/${activity_id}`, RequestBody("GET", null));
   const res = await result.json();
diff --git a/front/tailwind.config.js b/front/tailwind.config.js
index fcec4f79..122847cf 100644
--- a/front/tailwind.config.js
+++ b/front/tailwind.config.js
@@ -3,7 +3,6 @@ module.exports = {
   content: [
     './app/**/*.{js,jsx,ts,tsx}',
     './components/**/*.{js,jsx,ts,tsx}',
-
   ],
   theme: {
     extend: {},