diff --git a/frontend/src/App.js b/frontend/src/App.js index 717c362..946d60a 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -23,7 +23,7 @@ function App() { - + diff --git a/frontend/src/pages/ManageStudentsPage.jsx b/frontend/src/pages/ManageStudentsPage.jsx index b118721..2da86f2 100644 --- a/frontend/src/pages/ManageStudentsPage.jsx +++ b/frontend/src/pages/ManageStudentsPage.jsx @@ -1,30 +1,89 @@ import { useEffect, useState } from "react"; -import { Container, Table } from "react-bootstrap"; +import { Container, Table, Button, Form } from "react-bootstrap"; import MyNavbar from "../components/MyNavbar"; import { makeRequest } from "../utils.ts"; -const ManageStutentsPage = ({cid}) => { +const ManageStutentsPage = ({ cid }) => { const [studentData, setStudentData] = useState([]); + const [showAddStudentForm, setShowAddStudentForm] = useState(false); + const submitStudentForm = async (username) => { + await makeRequest({ + url: `http://localhost:5000/user/${username}/enroll/${cid}`, + method: "POST", + }); + window.location.reload(); + return false; + }; + + const AddStudentForm = () => { + const [username, setUsername] = useState(""); + + return ( +
+
{ + submitStudentForm(username); + }} + > + + Username + setUsername(e.target.value)} + /> + + Make sure that a user with the username exists and is not already + enrolled in this course + + + +
+
+ ); + }; useEffect(() => { - // makeRequest({ - // url: `http://localhost:5000/course/${cid}/students`, - // method: "GET", - // }) - // .then((req) => req.json()) - // .then((data) => { - // setStudentData(data.courses); - // }) - // .catch((err) => { - // console.error(err); - // }); + makeRequest({ + url: `http://localhost:5000/course/${cid}/students`, + method: "GET", + }) + .then((req) => req.json()) + .then(async (data) => { + setStudentData(data.students); + }) + .catch((err) => { + console.error(err); + }); }, []); + const sendUnenrollRequest = (uid) => { + makeRequest({ + url: `http://localhost:5000/user/${uid}/enroll/${cid}`, + method: "DELETE", + }).then((resp) => { + window.location.reload(); + }); + }; + return (

Manage Students

+ + {showAddStudentForm && } @@ -41,6 +100,16 @@ const ManageStutentsPage = ({cid}) => { + ); })}
{student.id} {student.username} {student.email} +
+ +
+