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 | 1x 1x 1x 1x 1x 107x 107x 107x 107x 107x 107x 107x 107x 107x 107x 107x 107x 107x 107x 107x 107x 107x 107x 7x 7x 7x 7x 107x 2x 2x 2x 107x 3x 3x 3x 107x 51x 51x 107x 16x 16x 16x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 56x 107x 107x 107x 1x | import { Button, Form } from "react-bootstrap";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useBackend } from "main/utils/useBackend";
import CommonsSelect from "main/components/Commons/CommonsSelect";
function SetCowHealthForm({
submitAction = () => {},
testid = "SetCowHealthForm",
}) {
const localHealthValue = localStorage.getItem(`${testid}-health`);
const [healthValue, setHealthValue] = useState(localHealthValue || 100);
const { data: commons } = useBackend(
["/api/commons/all"],
{ url: "/api/commons/all" },
[],
);
const [selectedCommons, setSelectedCommons] = useState(null);
const [selectedCommonsName, setSelectedCommonsName] = useState(null);
const {
handleSubmit,
register,
formState: { errors },
} = useForm();
const handleHealthValueChange = (e) => {
const newValue = e.target.value;
setHealthValue(newValue);
localStorage.setItem(`${testid}-health`, newValue);
};
const handleCommonsSelection = (id, name) => {
setSelectedCommons(id);
setSelectedCommonsName(name);
};
const onSubmit = () => {
const params = { selectedCommons, healthValue, selectedCommonsName };
submitAction(params);
};
if (!commons || commons.length === 0) {
return <div>There are no commons on which to run this job.</div>;
}
if (selectedCommons === null) {
setSelectedCommons(commons[0].id);
setSelectedCommonsName(commons[0].name);
}
return (
<Form onSubmit={handleSubmit(onSubmit)}>
<Form.Group className="mb-3">
<Form.Text htmlFor="description">
Set the cow health for all cows in a single commons.
</Form.Text>
</Form.Group>
<CommonsSelect
commons={commons}
selectedCommons={selectedCommons}
handleCommonsSelection={handleCommonsSelection}
testid={testid}
/>
<Form.Group className="mb-3">
<Form.Label htmlFor="healthValue">Health [0-100]</Form.Label>
<Form.Control
data-testid={`${testid}-healthValue`}
id="healthValue"
type="number"
step="1"
value={healthValue}
{...register("healthValue", {
required: "Health Value is required",
min: { value: 0, message: "Health Value must be ≥ 0" },
max: { value: 100, message: "Health Value must be ≤ 100" },
})}
onChange={handleHealthValueChange}
/>
<Form.Control.Feedback type="invalid">
{errors.healthValue?.message}
</Form.Control.Feedback>
</Form.Group>
<Button type="submit" data-testid="SetCowHealthForm-Submit-Button">
Set Cow Health
</Button>
</Form>
);
}
export default SetCowHealthForm;
|