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 106x 106x 106x 106x 106x 106x 106x 106x 106x 106x 106x 106x 106x 106x 106x 106x 106x 106x 7x 7x 7x 7x 106x 2x 2x 2x 106x 3x 3x 3x 106x 50x 50x 106x 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 106x 106x 106x 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;
|