All files / components/BasicCourseSearch CourseOverTimeBuildingsSearchForm.jsx

100% Statements 26/26
100% Branches 12/12
100% Functions 5/5
100% Lines 26/26

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 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124                      2x 118x     118x 118x   118x   118x     118x       118x     118x 118x 118x   118x 9x 9x     118x   42x 21x 21x 21x           15x 15x   15x     6x 6x       42x                                                                 6x                                                          
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 [classroom, setClassroom] = useState("ALL");
 
  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;
 
          setAvailableClassrooms(classrooms);
          //not setting classroom to ALL because redundent when default value is ALL
        } 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 }}>
          <Col md="auto">
            <Form.Group controlId="CourseOverTimeBuildingsSearch.Classroom">
              <Form.Label>Classroom</Form.Label>
              <Form.Select
                value={classroom}
                onChange={(e) => setClassroom(e.target.value)}
                disabled={availableClassrooms.length === 0}
                data-testid="CourseOverTimeBuildingsSearch.ClassroomSelect"
              >
                {/* ALL at the top */}
                <option value="ALL">ALL</option>
                {availableClassrooms.map((room) => (
                  <option key={room} value={room}>
                    {room}
                  </option>
                ))}
              </Form.Select>
            </Form.Group>
          </Col>
        </Row>
 
        <Row style={{ paddingTop: 10, paddingBottom: 10 }}>
          <Col md="auto">
            <Button variant="primary" type="submit">
              Submit
            </Button>
          </Col>
        </Row>
      </Container>
    </Form>
  );
};
 
export default CourseOverTimeBuildingsSearchForm;