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 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 66x 168x 168x 2x 2x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 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;
|