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 | 1x 16x 16x 16x 13x 12x 12x 1x 1x 1x 16x 2x 2x 2x 2x 2x 16x 68x 16x 55x 55x 55x | import { compareValues } from "main/utils/sortHelper";
import React, { useState, useEffect, useRef } from "react";
import { Form } from "react-bootstrap";
const SingleClassroomDropdown = ({
building,
classrooms,
classroom,
setClassroom,
controlId,
onChange = null,
label = "Classroom",
showAll = false,
}) => {
const [value, setValue] = useState(
// Stryker disable next-line all : not sure how to test/mock local storage
localStorage.getItem(controlId) || classroom || "",
);
const isFirstRun = useRef(true);
useEffect(() => {
if (isFirstRun.current) {
isFirstRun.current = false;
return;
}
localStorage.removeItem(controlId);
// Stryker disable next-line all : not sure how to test/mock local storage
setValue("");
setClassroom("");
}, [
building, // reset when building changes
controlId, // used inside effect
setClassroom, // used inside effect
]);
const handleChange = (e) => {
const v = e.target.value;
localStorage.setItem(controlId, v);
setValue(v);
setClassroom(v);
if (onChange) onChange(e);
};
const options = (
showAll ? classrooms : classrooms.filter((c) => c.buildingCode === building)
).sort(compareValues("roomNumber"));
return (
<Form.Group controlId={controlId}>
<Form.Label>{label}</Form.Label>
<Form.Control as="select" value={value} onChange={handleChange}>
{showAll && (
<option data-testid={`${controlId}-option-all`} value="ALL">
ALL
</option>
)}
{options.map((c) => {
const slug = `${c.roomNumber}`.replace(/ /g, "");
const key = `${controlId}-option-${slug}`;
return (
<option key={key} data-testid={key} value={c.roomNumber}>
{c.roomNumber}
</option>
);
})}
</Form.Control>
</Form.Group>
);
};
export default SingleClassroomDropdown;
|