Connect filter menu dropdown

Configure the admin boundary dropdowns to request data from the API

closes #28

app/components/AdminDropdown/BoroughDropdown.test.tsx

@@ -0,0 +1,63 @@
+import { Borough, createBorough } from "~/gen";
+import RandExp from "randexp";
+import { BoroughDropdown } from "./BoroughDropdown";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+describe("BoroughDropdown", () => {
+  let boroughs: Array<Borough> = [];
+  beforeAll(() => {
+    boroughs = Array.from(Array(1), () =>
+      createBorough({
+        id: new RandExp("^([0-9])$").gen(),
+      }),
+    );
+  });
+
+  it("should render borough form details and options", () => {
+    const updateSearchParams = vi.fn();
+    render(
+      <BoroughDropdown
+        updateSearchParams={updateSearchParams}
+        boroughs={boroughs}
+      />,
+    );
+    expect(screen.getByLabelText("Borough")).toBeInTheDocument();
+    const firstBoroughTitle = boroughs[0].title;
+    expect(screen.getByText(firstBoroughTitle)).toBeInTheDocument();
+  });
+
+  it("should set search params when next borough id is empty", async () => {
+    const updateSearchParams = vi.fn();
+    const firstBoroughId = boroughs[0].id;
+    render(
+      <BoroughDropdown
+        updateSearchParams={updateSearchParams}
+        selectValue={firstBoroughId}
+        boroughs={boroughs}
+      />,
+    );
+
+    await userEvent.selectOptions(screen.getByRole("combobox"), "");
+    expect(updateSearchParams).toHaveBeenCalledWith({
+      districtType: "cd",
+    });
+  });
+
+  it("should set search params when next borough id has a value", async () => {
+    const updateSearchParams = vi.fn();
+    const firstBoroughId = boroughs[0].id;
+    render(
+      <BoroughDropdown
+        updateSearchParams={updateSearchParams}
+        boroughs={boroughs}
+      />,
+    );
+
+    await userEvent.selectOptions(screen.getByRole("combobox"), firstBoroughId);
+    expect(updateSearchParams).toHaveBeenCalledWith({
+      districtType: "cd",
+      boroughId: firstBoroughId,
+    });
+  });
+});

app/components/AdminDropdown/BoroughDropdown.tsx

@@ -0,0 +1,47 @@
+import { Borough } from "~/gen";
+import { AdminDropdownProps, AdminDropdown } from ".";
+import { BoroughId } from "~/root";
+
+export interface BoroughDropdownProps
+  extends Pick<AdminDropdownProps, "selectValue"> {
+  updateSearchParams: (value: Record<string, string>) => void;
+  boroughs: Array<Borough> | null;
+}
+
+export function BoroughDropdown({
+  selectValue,
+  updateSearchParams,
+  boroughs,
+}: BoroughDropdownProps) {
+  const updateBoroughId = (nextBoroughId: BoroughId) => {
+    const nextSearchParams: Record<string, string> =
+      nextBoroughId !== null
+        ? {
+            districtType: "cd",
+            boroughId: nextBoroughId,
+          }
+        : {
+            districtType: "cd",
+          };
+
+    updateSearchParams(nextSearchParams);
+  };
+
+  const boroughOptions = boroughs?.map((borough) => (
+    <option key={borough.id} value={borough.id}>
+      {borough.title}
+    </option>
+  ));
+
+  return (
+    <AdminDropdown
+      formId="boroughId"
+      formLabel="Borough"
+      isSelectDisabled={boroughs === null}
+      selectValue={selectValue}
+      onSelectValueChange={updateBoroughId}
+    >
+      {boroughOptions}
+    </AdminDropdown>
+  );
+}

app/components/AdminDropdown/CityCouncilDistrictDropdown.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from "@testing-library/react";
+import RandExp from "randexp";
+import { CityCouncilDistrict, createCityCouncilDistrict } from "~/gen";
+import { CityCouncilDistrictDropdown } from "./CityCouncilDistrictDropdown";
+import userEvent from "@testing-library/user-event";
+
+describe("CityCouncilDistrictDropdown", () => {
+  let cityCouncilDistricts: Array<CityCouncilDistrict> = [];
+
+  beforeAll(() => {
+    cityCouncilDistricts = Array.from(Array(1), () =>
+      createCityCouncilDistrict({
+        id: new RandExp("^([0-9]{1,2})$").gen(),
+      }),
+    );
+  });
+
+  it("should have city council district form details and options", () => {
+    const updateSearchParams = vi.fn();
+    render(
+      <CityCouncilDistrictDropdown
+        updateSearchParams={updateSearchParams}
+        cityCouncilDistricts={cityCouncilDistricts}
+      />,
+    );
+    expect(screen.getByLabelText("District Number")).toBeInTheDocument();
+    const firstCityCouncilDistrictId = cityCouncilDistricts[0].id;
+    expect(screen.getByText(firstCityCouncilDistrictId)).toBeInTheDocument();
+  });
+
+  it("should set the search params when next district id is null", async () => {
+    const updateSearchParams = vi.fn();
+    const firstCityCouncilDistrictId = cityCouncilDistricts[0].id;
+    render(
+      <CityCouncilDistrictDropdown
+        updateSearchParams={updateSearchParams}
+        cityCouncilDistricts={cityCouncilDistricts}
+        selectValue={firstCityCouncilDistrictId}
+      />,
+    );
+
+    await userEvent.selectOptions(screen.getByRole("combobox"), "");
+    expect(updateSearchParams).toHaveBeenCalledWith({
+      districtType: "ccd",
+    });
+  });
+
+  it("should set the search params when next district id has a value", async () => {
+    const updateSearchParams = vi.fn();
+    const firstCityCouncilDistrictId = cityCouncilDistricts[0].id;
+    render(
+      <CityCouncilDistrictDropdown
+        updateSearchParams={updateSearchParams}
+        cityCouncilDistricts={cityCouncilDistricts}
+      />,
+    );
+
+    await userEvent.selectOptions(
+      screen.getByRole("combobox"),
+      firstCityCouncilDistrictId,
+    );
+    expect(updateSearchParams).toHaveBeenCalledWith({
+      districtType: "ccd",
+      districtId: firstCityCouncilDistrictId,
+    });
+  });
+});

app/components/AdminDropdown/CityCouncilDistrictDropdown.tsx

@@ -0,0 +1,49 @@
+import { CityCouncilDistrict } from "~/gen";
+import { AdminDropdownProps, AdminDropdown } from ".";
+import { DistrictId } from "~/root";
+
+export interface CityCouncilDistrictDropdownProps
+  extends Pick<AdminDropdownProps, "selectValue"> {
+  updateSearchParams: (value: Record<string, string>) => void;
+  cityCouncilDistricts: Array<CityCouncilDistrict> | null;
+}
+export function CityCouncilDistrictDropdown({
+  selectValue,
+  updateSearchParams,
+  cityCouncilDistricts,
+}: CityCouncilDistrictDropdownProps) {
+  const updateDistrictId = (nextDistrictId: DistrictId) => {
+    const districtType = "ccd";
+
+    if (nextDistrictId === null) {
+      updateSearchParams({
+        districtType,
+      });
+      return;
+    }
+    if (nextDistrictId !== null) {
+      updateSearchParams({
+        districtType,
+        districtId: nextDistrictId,
+      });
+      return;
+    }
+  };
+
+  const cityCouncilDistrictOptions = cityCouncilDistricts?.map((cd) => (
+    <option key={cd.id} value={cd.id}>
+      {cd.id}
+    </option>
+  ));
+  return (
+    <AdminDropdown
+      formId="districtId"
+      formLabel="District Number"
+      isSelectDisabled={cityCouncilDistricts === null}
+      selectValue={selectValue}
+      onSelectValueChange={updateDistrictId}
+    >
+      {cityCouncilDistrictOptions}
+    </AdminDropdown>
+  );
+}

app/components/AdminDropdown/CommunityDistrictDropdown.test.tsx

@@ -0,0 +1,92 @@
+import { render, screen } from "@testing-library/react";
+import { CommunityDistrictDropdown } from "./CommunityDistrictDropdown";
+import { CommunityDistrict, createCommunityDistrict } from "~/gen";
+import RandExp from "randexp";
+import userEvent from "@testing-library/user-event";
+
+describe("CommunityDistrictDropdown", () => {
+  let communityDistricts: Array<CommunityDistrict> = [];
+  const boroughId = "1";
+  beforeAll(() => {
+    communityDistricts = Array.from(Array(1), () =>
+      createCommunityDistrict({
+        id: new RandExp("^([0-9]{2})$").gen(),
+        boroughId,
+      }),
+    );
+  });
+
+  it("should render community district form details and options", () => {
+    const updateSearchParams = vi.fn();
+    render(
+      <CommunityDistrictDropdown
+        boroughId={boroughId}
+        updateSearchParams={updateSearchParams}
+        communityDistricts={communityDistricts}
+      />,
+    );
+
+    expect(screen.getByLabelText("District Number")).toBeInTheDocument();
+    const firstCommunityDistrictId = communityDistricts[0].id;
+    expect(screen.getByText(firstCommunityDistrictId)).toBeInTheDocument();
+  });
+
+  it("should set search params when borough is null", async () => {
+    const updateSearchParams = vi.fn();
+    const firstCommunityDistrictId = communityDistricts[0].id;
+    render(
+      <CommunityDistrictDropdown
+        boroughId={null}
+        updateSearchParams={updateSearchParams}
+        selectValue={firstCommunityDistrictId}
+        communityDistricts={communityDistricts}
+      />,
+    );
+
+    await userEvent.selectOptions(screen.getByRole("combobox"), "");
+    expect(updateSearchParams).toHaveBeenCalledWith({ districtType: "cd" });
+  });
+
+  it("should set search params when nextDistrictID is empty", async () => {
+    const updateSearchParams = vi.fn();
+    const firstCommunityDistrictId = communityDistricts[0].id;
+    console.debug("fcd", firstCommunityDistrictId);
+    render(
+      <CommunityDistrictDropdown
+        boroughId={boroughId}
+        updateSearchParams={updateSearchParams}
+        selectValue={firstCommunityDistrictId}
+        communityDistricts={communityDistricts}
+      />,
+    );
+
+    await userEvent.selectOptions(screen.getByRole("combobox"), "");
+    expect(updateSearchParams).toHaveBeenCalledWith({
+      districtType: "cd",
+      boroughId,
+    });
+  });
+
+  it("should set search params when nextDistrictID has a value", async () => {
+    const updateSearchParams = vi.fn();
+    const firstCommunityDistrictId = communityDistricts[0].id;
+    render(
+      <CommunityDistrictDropdown
+        boroughId={boroughId}
+        updateSearchParams={updateSearchParams}
+        selectValue={null}
+        communityDistricts={communityDistricts}
+      />,
+    );
+
+    await userEvent.selectOptions(
+      screen.getByRole("combobox"),
+      firstCommunityDistrictId,
+    );
+    expect(updateSearchParams).toHaveBeenCalledWith({
+      districtType: "cd",
+      boroughId,
+      districtId: firstCommunityDistrictId,
+    });
+  });
+});

app/components/AdminDropdown/CommunityDistrictDropdown.tsx

@@ -0,0 +1,58 @@
+import { CommunityDistrict } from "~/gen";
+import { AdminDropdown, AdminDropdownProps } from ".";
+import { BoroughId, DistrictId } from "~/root";
+
+export interface CommunityDistrictDropdownProps
+  extends Pick<AdminDropdownProps, "selectValue"> {
+  boroughId: BoroughId;
+  updateSearchParams: (value: Record<string, string>) => void;
+  communityDistricts: Array<CommunityDistrict> | null;
+}
+export function CommunityDistrictDropdown({
+  selectValue,
+  updateSearchParams,
+  boroughId,
+  communityDistricts,
+}: CommunityDistrictDropdownProps) {
+  const updateDistrictId = (nextDistrictId: DistrictId) => {
+    const districtType = "cd";
+    if (boroughId === null) {
+      updateSearchParams({
+        districtType,
+      });
+      return;
+    }
+
+    if (boroughId !== null && nextDistrictId === null) {
+      updateSearchParams({
+        districtType,
+        boroughId,
+      });
+      return;
+    }
+    if (boroughId !== null && nextDistrictId !== null) {
+      updateSearchParams({
+        districtType,
+        boroughId,
+        districtId: nextDistrictId,
+      });
+      return;
+    }
+  };
+  const communityDistrictOptions = communityDistricts?.map((cd) => (
+    <option key={cd.id} value={cd.id}>
+      {cd.id}
+    </option>
+  ));
+  return (
+    <AdminDropdown
+      formId="districtId"
+      formLabel="District Number"
+      isSelectDisabled={communityDistricts === null}
+      selectValue={selectValue}
+      onSelectValueChange={updateDistrictId}
+    >
+      {communityDistrictOptions}
+    </AdminDropdown>
+  );
+}