import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { SERVER_URL } from '../../Constants';
import { TextField } from '@mui/material';
import Button from '@mui/material/Button';
// instructor view list of students enrolled in a section
// use location to get section no passed from InstructorSectionsView
// fetch the enrollments using URL /sections/{secNo}/enrollments
// display table with columns
// 'enrollment id', 'student id', 'name', 'email', 'grade'
// grade column is an input field
// hint: <input type="text" name="grade" value={e.grade}
onChange={onGradeChange} />
const EnrollmentsView = () => {
const headers = ['Enrollment Id', 'Student Id', 'Name', 'Email',
'Grade'];
const location = useLocation();
const { secNo, courseId } = location.state;
const [enrollments, setEnrollments] = useState([]);
const [message, setMessage] = useState('');
const fetchEnrollments = async () => {
try {
const response = await
fetch(`${SERVER_URL}/sections/${secNo}/enrollments`);
if (response.ok) {
const data = await response.json();
setEnrollments(data);
if (!data.length)
setMessage("No enrollments found with this section.");
}
else {
const rc = await response.json();
setMessage(rc.message);
}
} catch (err) {
setMessage("Error found: " + err);
}
}
const editChange = (event) => {
const idx =
event.target.parentElement.parentElement.parentElement.parentElement.rowIn
dex - 1;
const updatedEnrollments = [...enrollments];
updatedEnrollments[idx] = { ...updatedEnrollments[idx],
[event.target.name]: event.target.value.trim().toUpperCase() };
setEnrollments(updatedEnrollments);
}
const saveChanges = async () => {
for (let i = 0; i < enrollments.length; i++) {
let g = enrollments[i].grade.toUpperCase().trim();
if (!g.match(/^[A-DF]([-+]?|\b)$/)) {
setMessage("Enrollment " + enrollments[i].enrollmentId + "
has an invalid grade.");
return;
}
}
try {
const response = await fetch(`${SERVER_URL}/enrollments`,
{
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(enrollments),
});
if (response.ok) {
setMessage("Enrollments saved");
fetchEnrollments();
} else {
const json = await response.json();
setMessage("Response error: " + json.message);
}
} catch (err) {
setMessage("Error: " + err);
}
}
useEffect(() => {
fetchEnrollments();
}, []);
return (
<>
<h3>{courseId} Enrollments</h3>
<h5 className="Error">{message}</h5>
<table className="Center" >
<thead>
<tr>
{headers.map((h, idx) => (<th
key={idx}>{h}</th>))}
</tr>
</thead>
<tbody>
{enrollments.map((e, idx) => (
<tr key={idx}>
<td>{e.enrollmentId}</td>
<td>{e.studentId}</td>
<td>{e.name}</td>
<td>{e.email}</td>
<td><TextField style={{ padding: 10 }}
fullWidth label="grade" name="grade" defaultValue={e.grade}
onChange={editChange} /></td>
</tr>
))}
</tbody>
</table>
<Button id="saveChanges" onClick={saveChanges}>Save
Changes</Button>
</>
);
}
export default EnrollmentsView;
