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 | 2x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 3x 3x 40x 28x 12x 12x 12x 5x 5x 5x 7x 7x 28x 40x | import { useEffect, useState } from "react";
import axios from "axios";
import { Form, Button, Container, Row, Col } from "react-bootstrap";
 
import { allBuildings } from "fixtures/buildingFixtures";
import { quarterRange } from "main/utils/quarterUtilities";
 
import { useSystemInfo } from "main/utils/systemInfo";
import SingleQuarterDropdown from "../Quarters/SingleQuarterDropdown";
import SingleBuildingDropdown from "../Buildings/SingleBuildingDropdown";
 
const CourseOverTimeBuildingsSearchForm = ({ fetchJSON }) => {
  const { data: systemInfo } = useSystemInfo();
 
  // stryker-disable OptionalChaining
  const startQtr = systemInfo?.startQtrYYYYQ ?? "20232";
  const endQtr = systemInfo?.endQtrYYYYQ ?? "20254";
  // stryker-enable OptionalChaining
  const availableQuarters = quarterRange(startQtr, endQtr);
 
  const localQuarter = localStorage.getItem(
    "CourseOverTimeBuildingsSearch.Quarter",
  );
  const localBuildingCode = localStorage.getItem(
    "CourseOverTimeBuildingsSearch.BuildingCode",
  );
 
  const [Quarter, setQuarter] = useState(
    localQuarter || availableQuarters[0].yyyyq,
  );
  const [buildingCode, setBuildingCode] = useState(localBuildingCode || "");
  const [availableClassrooms, setAvailableClassrooms] = useState([]);
 
  const handleSubmit = (event) => {
    event.preventDefault();
    fetchJSON(event, { Quarter, buildingCode, classroom: "" });
  };
 
  useEffect(() => {
    async function fetchClassrooms() {
      if (Quarter && buildingCode) {
        try {
          console.log("Fetching classrooms with:", { Quarter, buildingCode });
          const response = await axios.get(
            "/api/public/courseovertime/buildingsearch/classrooms",
            {
              params: { quarter: Quarter, buildingCode },
            },
          );
          console.log("Classrooms returned:", response.data);
          const classrooms = response.data.sort();
 
          setAvailableClassrooms(classrooms);
        } catch (error) {
          console.error("Error fetching classrooms", error);
          setAvailableClassrooms([]);
        }
      }
    }
    fetchClassrooms();
  }, [Quarter, buildingCode]);
 
  return (
    <Form onSubmit={handleSubmit}>
      <Container>
        <Row>
          <Col md="auto">
            <SingleQuarterDropdown
              quarters={availableQuarters}
              quarter={Quarter}
              setQuarter={setQuarter}
              controlId={"CourseOverTimeBuildingsSearch.Quarter"}
              label={"Quarter"}
            />
          </Col>
          <Col md="auto">
            <SingleBuildingDropdown
              buildings={allBuildings}
              building={buildingCode}
              setBuilding={setBuildingCode}
              controlId={"CourseOverTimeBuildingsSearch.BuildingCode"}
              label={"Building Name"}
            />
          </Col>
        </Row>
        <Row style={{ paddingTop: 10, paddingBottom: 10 }}>
          <Col md="auto">
            <Button variant="primary" type="submit">
              Submit
            </Button>
          </Col>
        </Row>
        {availableClassrooms.length > 0 && (
          <div data-testid="available-classrooms">
            {availableClassrooms.join(", ")}
          </div>
        )}
      </Container>
    </Form>
  );
};
 
export default CourseOverTimeBuildingsSearchForm;
  |