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 109 | 1x 1x 1x 1x 1x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 80x 212x 212x 2x 2x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 212x 1x | import Modal from "react-bootstrap/Modal";
import { Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
import { useEffect } from "react";
import React 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;
|