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 | 1x 1x 1x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 1x | import { Button, Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router";
function CourseForm({ initialCourse, submitAction, buttonLabel = "Create" }) {
const {
register,
formState: { errors },
handleSubmit,
} = useForm({ defaultValues: initialCourse || {} });
const navigate = useNavigate();
const testIdPrefix = "CourseForm";
return (
<Form onSubmit={handleSubmit(submitAction)}>
{initialCourse && (
<Form.Group className="mb-3">
<Form.Label htmlFor="id">Id</Form.Label>
<Form.Control
data-testid={`${testIdPrefix}-id`}
id="id"
type="text"
{...register("id")}
value={initialCourse.id}
disabled
/>
</Form.Group>
)}
<Form.Group className="mb-3">
<Form.Label htmlFor="code">Course Code</Form.Label>
<Form.Control
data-testid={`${testIdPrefix}-code`}
id="code"
type="text"
isInvalid={Boolean(errors.code)}
{...register("code", {
required: "Course code is required.",
})}
/>
<Form.Control.Feedback type="invalid">
{errors.code?.message}
</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label htmlFor="name">Course Name</Form.Label>
<Form.Control
data-testid={`${testIdPrefix}-name`}
id="name"
type="text"
isInvalid={Boolean(errors.name)}
{...register("name", {
required: "Course name is required.",
})}
/>
<Form.Control.Feedback type="invalid">
{errors.name?.message}
</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label htmlFor="term">Term</Form.Label>
<Form.Control
data-testid={`${testIdPrefix}-term`}
id="term"
type="text"
isInvalid={Boolean(errors.term)}
{...register("term", {
required: "Term is required.",
})}
/>
<Form.Control.Feedback type="invalid">
{errors.term?.message}
</Form.Control.Feedback>
</Form.Group>
<Button type="submit" data-testid={`${testIdPrefix}-submit`}>
{buttonLabel}
</Button>
<Button
variant="Secondary"
onClick={() => navigate(-1)}
data-testid={`${testIdPrefix}-cancel`}
>
Cancel
</Button>
</Form>
);
}
export default CourseForm;
|