link create lecture to backend and fix iso strings

Author: Imafe

src/pages/courses/index.tsx

@@ -1,7 +1,7 @@
 import RootPage from "../root";
 import Container from "@mui/material/Container";
 import "./courses.css"; // Import CSS file for additional styling
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { backend_post, useAxiosRequest } from "../../utils";
 import { Course, Empty } from "../../types/common";
@@ -20,6 +20,7 @@ const Courses = () => {
         Empty,
         ResponseData
     >();
+    const [ course_data, setCourseData ] = useState()
 
     const alternatingColor = [
         "rgba(255, 255, 255, 0.5)",
@@ -74,13 +75,18 @@ const Courses = () => {
     };
 
     const handleCourseClick = (course_id: number) => {
-        navigate(`/course/${course_id}`);
+        navigate(`/course/${course_id}/create_lecture`);
     };
 
     const handleEnrollment =
         (courseId: number, enroll: boolean) =>
         (event: React.ChangeEvent<HTMLInputElement>) => {
-            if (enroll) backend_post("course/enroll/" + courseId, "", true);
+            if (enroll) {
+                backend_post("course/enroll/" + courseId, "", true);
+                // if (response == null) return
+                // const result = response.map((course : Course) => (course.id == courseId ? { ...course, enrolled: true } : course))
+                // console.log(result)
+            }
         };
 
     return (

src/pages/create_lecture/index.tsx

@@ -14,22 +14,24 @@ import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker
 import RootPage from "../root";
 import "./create.css"; // Import CSS file for additional styling
 import { backend_post } from "../../utils";
+import { useParams } from "react-router-dom";
 
 const CreateLecture = () => {
     // const navigate = useNavigate();
     const [regStatus, setRegStatus] = useState("");
+    const { id } = useParams();
 
     const handleResponse = (
         data: any,
         event: React.FormEvent<HTMLFormElement>
     ) => {
         console.log(data);
-        if (!("course_name" in data) || typeof data["course_name"] !== "string") {
-            setRegStatus("failed");
-            return;
-        } else {
+        if ("ok" in data) {
             setRegStatus("success");
         }
+        else{
+            setRegStatus("failed");
+        }
     };
 
     // TODO: Add first and last name validation
@@ -40,18 +42,23 @@ const CreateLecture = () => {
         const start_time = data.get("start_time")
         const end_time = data.get("end_time")
 
-        console.log(Date.parse(start_time))
-        console.log(Date.parse(end_time))
+        if (start_time == null || end_time == null) return
+        if (start_time == "" || end_time == "") return
+
+        const start_date = new Date(Date.parse(start_time.toString()))
+        const end_date = new Date(Date.parse(end_time.toString()))
 
-        // backend_post(
-        //     "course/create/",
-        //     JSON.stringify({
-        //         course_name: data.get("course_name"),
-        //     })
-        // )
-        //     .then((resp) => (resp.json()))
-        //     .then((data) => handleResponse(data, event))
-        //     .catch((error) => console.log(error));
+        backend_post(
+            "course/lecture/" + id + "/add",
+            JSON.stringify({
+                start_time: start_date.toISOString(),
+                end_time: end_date.toISOString(),
+                lecture_type: data.get("lecture_type"),
+            })
+        )
+            .then((resp) => (resp.json()))
+            .then((data) => handleResponse(data, event))
+            .catch((error) => console.log(error));
     };
 
     return (
@@ -82,10 +89,12 @@ const CreateLecture = () => {
                             <DesktopDateTimePicker 
                                 label="Start time"
                                 name="start_time"
+                                slotProps={{ textField: { required: true,},}}
                             />
                             <DesktopDateTimePicker 
                                 label="End time"
                                 name="end_time"
+                                slotProps={{ textField: { required: true,},}}
                             />
                         </LocalizationProvider>
                         <Select

src/routes/index.tsx

@@ -48,7 +48,7 @@ const AppRouter = createBrowserRouter([
             )
     },
     {
-        path: "/create_lecture",
+        path: "course/:id/create_lecture/",
         element:
             isLoggedIn() && (IsTeacher() || IsAdmin()) ? (
                 <CreateLecture />