chore: refactor components

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;