Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | 1x 1x 1x 1x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 75x 192x 192x 2x 2x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 192x 1x | import Modal from "react-bootstrap/Modal";
import { Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
import { useEffect } from "react";
function CourseModal({
onSubmitAction,
showModal,
toggleShowModal,
initialContents,
buttonText = "Create",
modalTitle = "Create Course",
}) {
const {
register,
formState: { errors },
handleSubmit,
reset,
} = useForm({});
// Reset form when initialContents changes (e.g., when editing)
useEffect(() => {
reset(initialContents);
}, [initialContents, reset]);
const closeModal = () => {
toggleShowModal(false);
};
return (
<Modal
show={showModal}
onHide={closeModal}
centered={true}
data-testid={"CourseModal-base"}
>
<Modal.Header>
<Modal.Title>{modalTitle}</Modal.Title>
<button
type="button"
className="btn-close"
aria-label="Close"
data-testid={"CourseModal-closeButton"}
onClick={closeModal}
></button>
</Modal.Header>
<Form onSubmit={handleSubmit(onSubmitAction)}>
<Modal.Body>
<Form.Group>
<Form.Label htmlFor="courseName">Course Name</Form.Label>
<Form.Control
data-testid={"CourseModal-courseName"}
id="courseName"
type="text"
isInvalid={Boolean(errors.courseName)}
{...register("courseName", {
required: "Course Name is required.",
})}
/>
<Form.Control.Feedback type="invalid">
{errors.courseName?.message}
</Form.Control.Feedback>
<Form.Label htmlFor="term">Term</Form.Label>
<Form.Control
data-testid={"CourseModal-term"}
id="term"
type="text"
isInvalid={Boolean(errors.term)}
{...register("term", {
required: "Course Term is required.",
})}
/>
<Form.Control.Feedback type="invalid">
{errors.term?.message}
</Form.Control.Feedback>
</Form.Group>
<Form.Group>
<Form.Label htmlFor="school">School</Form.Label>
<Form.Control
data-testid={"CourseModal-school"}
id="school"
type="text"
isInvalid={Boolean(errors.school)}
{...register("school", {
required: "School is required.",
})}
/>
<Form.Control.Feedback type="invalid">
{errors.school?.message}
</Form.Control.Feedback>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<button
type="submit"
className="btn btn-primary"
data-testid="CourseModal-submit"
>
{buttonText}
</button>
</Modal.Footer>
</Form>
</Modal>
);
}
export default CourseModal;
|