Generalize query params with new type and existing change param func

Generalize considering pervious query params Reset page to 1 when going to new district Remove unused import Use existing set search params util function to merge params Include admin params only when going to new district Remove unused optional param list Combine types with SearchParamChanges and update tests Remove unused AdminParams
NYCPlanning · Sep 23, 2024 · 5c2e626 · 5c2e626
1 parent bce9648
commit 5c2e626
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 104 deletions.
diff --git a/app/components/AdminDropdown/BoroughDropdown.test.tsx b/app/components/AdminDropdown/BoroughDropdown.test.tsx
@@ -14,7 +14,7 @@ describe("BoroughDropdown", () => {
     const updateSearchParams = vi.fn();
     render(
       <BoroughDropdown
-        updateSearchParams={updateSearchParams}
+        setAdminParams={updateSearchParams}
         boroughs={boroughs}
       />,
     );
@@ -28,7 +28,7 @@ describe("BoroughDropdown", () => {
     const firstBoroughId = boroughs[0].id;
     render(
       <BoroughDropdown
-        updateSearchParams={updateSearchParams}
+        setAdminParams={updateSearchParams}
         selectValue={firstBoroughId}
         boroughs={boroughs}
       />,
@@ -37,6 +37,8 @@ describe("BoroughDropdown", () => {
     await act(() => userEvent.selectOptions(screen.getByRole("combobox"), ""));
     expect(updateSearchParams).toHaveBeenCalledWith({
       districtType: "cd",
+      boroughId: null,
+      districtId: null,
     });
   });
 
@@ -45,7 +47,7 @@ describe("BoroughDropdown", () => {
     const firstBoroughId = boroughs[0].id;
     render(
       <BoroughDropdown
-        updateSearchParams={updateSearchParams}
+        setAdminParams={updateSearchParams}
         boroughs={boroughs}
       />,
     );
@@ -56,6 +58,7 @@ describe("BoroughDropdown", () => {
     expect(updateSearchParams).toHaveBeenCalledWith({
       districtType: "cd",
       boroughId: firstBoroughId,
+      districtId: null,
     });
   });
 });
diff --git a/app/components/AdminDropdown/BoroughDropdown.tsx b/app/components/AdminDropdown/BoroughDropdown.tsx
@@ -1,30 +1,24 @@
 import { Borough } from "~/gen";
 import { AdminDropdownProps, AdminDropdown } from ".";
-import { BoroughId } from "~/root";
+import { AdminParams, BoroughId } from "~/utils/types";
 
 export interface BoroughDropdownProps
   extends Pick<AdminDropdownProps, "selectValue"> {
-  updateSearchParams: (value: Record<string, string>) => void;
   boroughs: Array<Borough> | null;
+  setAdminParams: (value: AdminParams) => void;
 }
 
 export function BoroughDropdown({
   selectValue,
-  updateSearchParams,
   boroughs,
+  setAdminParams,
 }: BoroughDropdownProps) {
   const updateBoroughId = (nextBoroughId: BoroughId) => {
-    const nextSearchParams: Record<string, string> =
-      nextBoroughId !== null
-        ? {
-            districtType: "cd",
-            boroughId: nextBoroughId,
-          }
-        : {
-            districtType: "cd",
-          };
-
-    updateSearchParams(nextSearchParams);
+    setAdminParams({
+      districtType: "cd",
+      boroughId: nextBoroughId,
+      districtId: null,
+    });
   };
 
   const boroughOptions = boroughs?.map((borough) => (

diff --git a/app/components/AdminDropdown/CityCouncilDistrictDropdown.test.tsx b/app/components/AdminDropdown/CityCouncilDistrictDropdown.test.tsx
@@ -17,7 +17,7 @@ describe("CityCouncilDistrictDropdown", () => {
     const updateSearchParams = vi.fn();
     render(
       <CityCouncilDistrictDropdown
-        updateSearchParams={updateSearchParams}
+        setAdminParams={updateSearchParams}
         cityCouncilDistricts={cityCouncilDistricts}
       />,
     );
@@ -31,7 +31,7 @@ describe("CityCouncilDistrictDropdown", () => {
     const firstCityCouncilDistrictId = cityCouncilDistricts[0].id;
     render(
       <CityCouncilDistrictDropdown
-        updateSearchParams={updateSearchParams}
+        setAdminParams={updateSearchParams}
         cityCouncilDistricts={cityCouncilDistricts}
         selectValue={firstCityCouncilDistrictId}
       />,
@@ -40,6 +40,8 @@ describe("CityCouncilDistrictDropdown", () => {
     await act(() => userEvent.selectOptions(screen.getByRole("combobox"), ""));
     expect(updateSearchParams).toHaveBeenCalledWith({
       districtType: "ccd",
+      boroughId: null,
+      districtId: null,
     });
   });
 
@@ -48,7 +50,7 @@ describe("CityCouncilDistrictDropdown", () => {
     const firstCityCouncilDistrictId = cityCouncilDistricts[0].id;
     render(
       <CityCouncilDistrictDropdown
-        updateSearchParams={updateSearchParams}
+        setAdminParams={updateSearchParams}
         cityCouncilDistricts={cityCouncilDistricts}
       />,
     );
@@ -61,6 +63,7 @@ describe("CityCouncilDistrictDropdown", () => {
     );
     expect(updateSearchParams).toHaveBeenCalledWith({
       districtType: "ccd",
+      boroughId: null,
       districtId: firstCityCouncilDistrictId,
     });
   });

diff --git a/app/components/AdminDropdown/CityCouncilDistrictDropdown.tsx b/app/components/AdminDropdown/CityCouncilDistrictDropdown.tsx
@@ -1,33 +1,23 @@
 import { CityCouncilDistrict } from "~/gen";
 import { AdminDropdownProps, AdminDropdown } from ".";
-import { DistrictId } from "~/root";
+import { AdminParams, DistrictId } from "~/utils/types";
 
 export interface CityCouncilDistrictDropdownProps
   extends Pick<AdminDropdownProps, "selectValue"> {
-  updateSearchParams: (value: Record<string, string>) => void;
   cityCouncilDistricts: Array<CityCouncilDistrict> | null;
+  setAdminParams: (value: AdminParams) => void;
 }
 export function CityCouncilDistrictDropdown({
   selectValue,
-  updateSearchParams,
   cityCouncilDistricts,
+  setAdminParams,
 }: CityCouncilDistrictDropdownProps) {
   const updateDistrictId = (nextDistrictId: DistrictId) => {
-    const districtType = "ccd";
-
-    if (nextDistrictId === null) {
-      updateSearchParams({
-        districtType,
-      });
-      return;
-    }
-    if (nextDistrictId !== null) {
-      updateSearchParams({
-        districtType,
-        districtId: nextDistrictId,
-      });
-      return;
-    }
+    setAdminParams({
+      districtType: "ccd",
+      boroughId: null,
+      districtId: nextDistrictId,
+    });
   };
 
   const cityCouncilDistrictOptions = cityCouncilDistricts?.map((cd) => (

diff --git a/app/components/AdminDropdown/CommunityDistrictDropdown.test.tsx b/app/components/AdminDropdown/CommunityDistrictDropdown.test.tsx
@@ -20,7 +20,7 @@ describe("CommunityDistrictDropdown", () => {
     render(
       <CommunityDistrictDropdown
         boroughId={boroughId}
-        updateSearchParams={updateSearchParams}
+        setAdminParams={updateSearchParams}
         communityDistricts={communityDistricts}
       />,
     );
@@ -36,14 +36,18 @@ describe("CommunityDistrictDropdown", () => {
     render(
       <CommunityDistrictDropdown
         boroughId={null}
-        updateSearchParams={updateSearchParams}
+        setAdminParams={updateSearchParams}
         selectValue={firstCommunityDistrictId}
         communityDistricts={communityDistricts}
       />,
     );
 
     await act(() => userEvent.selectOptions(screen.getByRole("combobox"), ""));
-    expect(updateSearchParams).toHaveBeenCalledWith({ districtType: "cd" });
+    expect(updateSearchParams).toHaveBeenCalledWith({
+      districtType: "cd",
+      boroughId: null,
+      districtId: null,
+    });
   });
 
   it("should set search params when nextDistrictID is empty", async () => {
@@ -53,7 +57,7 @@ describe("CommunityDistrictDropdown", () => {
     render(
       <CommunityDistrictDropdown
         boroughId={boroughId}
-        updateSearchParams={updateSearchParams}
+        setAdminParams={updateSearchParams}
         selectValue={firstCommunityDistrictId}
         communityDistricts={communityDistricts}
       />,
@@ -63,6 +67,7 @@ describe("CommunityDistrictDropdown", () => {
     expect(updateSearchParams).toHaveBeenCalledWith({
       districtType: "cd",
       boroughId,
+      districtId: null,
     });
   });
 
@@ -72,7 +77,7 @@ describe("CommunityDistrictDropdown", () => {
     render(
       <CommunityDistrictDropdown
         boroughId={boroughId}
-        updateSearchParams={updateSearchParams}
+        setAdminParams={updateSearchParams}
         selectValue={null}
         communityDistricts={communityDistricts}
       />,

diff --git a/app/components/AdminDropdown/CommunityDistrictDropdown.tsx b/app/components/AdminDropdown/CommunityDistrictDropdown.tsx
@@ -1,44 +1,27 @@
 import { CommunityDistrict } from "~/gen";
 import { AdminDropdown, AdminDropdownProps } from ".";
-import { BoroughId, DistrictId } from "~/root";
-
+import { AdminParams, BoroughId, DistrictId } from "~/utils/types";
 export interface CommunityDistrictDropdownProps
   extends Pick<AdminDropdownProps, "selectValue"> {
   boroughId: BoroughId;
-  updateSearchParams: (value: Record<string, string>) => void;
   communityDistricts: Array<CommunityDistrict> | null;
+  setAdminParams: (value: AdminParams) => void;
 }
+
 export function CommunityDistrictDropdown({
   selectValue,
-  updateSearchParams,
   boroughId,
   communityDistricts,
+  setAdminParams,
 }: 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;
-    }
+    setAdminParams({
+      districtType: "cd",
+      boroughId: boroughId,
+      districtId: nextDistrictId,
+    });
   };
+
   const communityDistrictOptions = communityDistricts?.map((cd) => (
     <option key={cd.id} value={cd.id}>
       {cd.id}

diff --git a/app/components/AdminDropdown/DistrictTypeDropdown.test.tsx b/app/components/AdminDropdown/DistrictTypeDropdown.test.tsx
@@ -6,18 +6,22 @@ import { act } from "react";
 describe("DistrictTypeDropdown", () => {
   it("should render district type form details and options", () => {
     const updateSearchParams = vi.fn();
-    render(<DistrictTypeDropdown updateSearchParams={updateSearchParams} />);
+    render(<DistrictTypeDropdown setAdminParams={updateSearchParams} />);
     expect(screen.getByLabelText("District Type")).toBeInTheDocument();
     expect(screen.getByText("Community District")).toBeInTheDocument();
     expect(screen.getByText("City Council District")).toBeInTheDocument();
   });
 
   it("should update search params when changing the district type", async () => {
     const updateSearchParams = vi.fn();
-    render(<DistrictTypeDropdown updateSearchParams={updateSearchParams} />);
+    render(<DistrictTypeDropdown setAdminParams={updateSearchParams} />);
     await act(() =>
       userEvent.selectOptions(screen.getByRole("combobox"), "cd"),
     );
-    expect(updateSearchParams).toHaveBeenCalledWith({ districtType: "cd" });
+    expect(updateSearchParams).toHaveBeenCalledWith({
+      districtType: "cd",
+      boroughId: null,
+      districtId: null,
+    });
   });
 });
diff --git a/app/components/AdminDropdown/DistrictTypeDropdown.tsx b/app/components/AdminDropdown/DistrictTypeDropdown.tsx
@@ -1,24 +1,34 @@
+import { AdminParams } from "~/utils/types";
 import { AdminDropdownProps, AdminDropdown } from ".";
 import { analytics } from "../../utils/analytics";
 
 export interface DistrictTypeDropdownProps
   extends Pick<AdminDropdownProps, "selectValue"> {
-  updateSearchParams: (value: Record<string, string>) => void;
+  setAdminParams: (value: AdminParams) => void;
 }
 
 export function DistrictTypeDropdown({
   selectValue,
-  updateSearchParams,
+  setAdminParams,
 }: DistrictTypeDropdownProps) {
   const updateDistrictType = (nextDistrictType: string | null) => {
-    const nextSearchParams: Record<string, string> =
-      nextDistrictType === null ? {} : { districtType: nextDistrictType };
+    if (
+      nextDistrictType !== "cd" &&
+      nextDistrictType !== "ccd" &&
+      nextDistrictType !== null
+    )
+      throw new Error("invalid district type selected");
+
     analytics({
       category: "Dropdown Menu",
       action: "Change District Type",
       name: nextDistrictType,
     });
-    updateSearchParams(nextSearchParams);
+    setAdminParams({
+      districtType: nextDistrictType,
+      boroughId: null,
+      districtId: null,
+    });
   };
 
   return (

diff --git a/app/components/Pagination.tsx b/app/components/Pagination.tsx
@@ -1,7 +1,7 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
 import { Box, HStack } from "@nycplanning/streetscape";
 import { Link, useSearchParams } from "@remix-run/react";
-import { setNewSearchParamsString } from "~/utils/utils";
+import { setNewSearchParams } from "~/utils/utils";
 
 export interface PaginationProps {
   total: number;
@@ -19,9 +19,9 @@ export const Pagination = ({ total }: PaginationProps) => {
     <HStack gap={2}>
       <Link
         to={{
-          search: setNewSearchParamsString(searchParams, {
+          search: setNewSearchParams(searchParams, {
             page: page - 1,
-          }),
+          }).toString(),
         }}
       >
         <Box
@@ -49,9 +49,9 @@ export const Pagination = ({ total }: PaginationProps) => {
       </Box>
       <Link
         to={{
-          search: setNewSearchParamsString(searchParams, {
+          search: setNewSearchParams(searchParams, {
             page: page + 1,
-          }),
+          }).toString(),
         }}
       >
         <Box