From 5c2e62648269119b1d648a5080d89ddf219fad11 Mon Sep 17 00:00:00 2001
From: pratishta <ypradhi9@gmail.com>
Date: Wed, 11 Sep 2024 11:03:53 -0400
Subject: [PATCH] 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
---
 .../AdminDropdown/BoroughDropdown.test.tsx    |  9 ++--
 .../AdminDropdown/BoroughDropdown.tsx         | 22 ++++------
 .../CityCouncilDistrictDropdown.test.tsx      |  9 ++--
 .../CityCouncilDistrictDropdown.tsx           | 26 ++++-------
 .../CommunityDistrictDropdown.test.tsx        | 15 ++++---
 .../CommunityDistrictDropdown.tsx             | 37 +++++-----------
 .../DistrictTypeDropdown.test.tsx             | 10 +++--
 .../AdminDropdown/DistrictTypeDropdown.tsx    | 20 ++++++---
 app/components/Pagination.tsx                 | 10 ++---
 app/root.tsx                                  | 44 ++++++++++++-------
 app/utils/types.ts                            | 14 ++++++
 app/utils/utils.ts                            | 10 +++--
 12 files changed, 122 insertions(+), 104 deletions(-)
 create mode 100644 app/utils/types.ts

diff --git a/app/components/AdminDropdown/BoroughDropdown.test.tsx b/app/components/AdminDropdown/BoroughDropdown.test.tsx
index 1695b0e..70d6d6b 100644
--- 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
index a2a1d23..3e08526 100644
--- 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
index 386cea2..5730324 100644
--- 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
index 251c00e..6638457 100644
--- 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
index 6bee34c..2e23fdf 100644
--- 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
index 601f857..998469c 100644
--- 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
index be9f00d..ede1273 100644
--- a/app/components/AdminDropdown/DistrictTypeDropdown.test.tsx
+++ b/app/components/AdminDropdown/DistrictTypeDropdown.test.tsx
@@ -6,7 +6,7 @@ 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();
@@ -14,10 +14,14 @@ describe("DistrictTypeDropdown", () => {
 
   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
index 905256f..e23d55e 100644
--- 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
index 00b4393..d489890 100644
--- 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
diff --git a/app/root.tsx b/app/root.tsx
index 29bb5f3..6681e43 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -37,7 +37,6 @@ import {
   CommunityDistrictDropdown,
   CityCouncilDistrictDropdown,
 } from "./components/AdminDropdown";
-import { URLSearchParamsInit } from "react-router-dom";
 import {
   GoToCityCouncilDistrictBtn,
   GoToDistrictBtn,
@@ -46,10 +45,13 @@ import { GoToCommunityDistrictBtn } from "./components/GoToDistrictBtn/GoToCommu
 import { WelcomePanel } from "./components/WelcomePanel";
 import { useEffect } from "react";
 import { initializeMatomoTagManager } from "./utils/analytics";
-
-export type BoroughId = null | string;
-export type DistrictType = null | "cd" | "ccd";
-export type DistrictId = null | string;
+import { setNewSearchParams } from "~/utils/utils";
+import {
+  BoroughId,
+  DistrictId,
+  DistrictType,
+  SearchParamChanges,
+} from "./utils/types";
 
 export const links: LinksFunction = () => {
   return [
@@ -61,6 +63,8 @@ export const links: LinksFunction = () => {
   ];
 };
 
+const adminParamKeys = ["districtType", "boroughId", "districtId"];
+
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
   const districtType = url.searchParams.get("districtType") as DistrictType;
@@ -163,20 +167,26 @@ export default function App() {
       (FindCityCouncilDistrictsQueryResponse | { cityCouncilDistricts: null })
   >();
 
-  const updateSearchParams = (
-    nextSearchParams:
-      | URLSearchParamsInit
-      | ((prev: URLSearchParams) => URLSearchParamsInit)
-      | undefined,
-  ) => setSearchParams(nextSearchParams, { replace: true });
+  const updateSearchParams = (nextSearchParams: SearchParamChanges) => {
+    const mergedParams = setNewSearchParams(searchParams, nextSearchParams);
+    setSearchParams(mergedParams);
+  };
 
   const goToDistrict = (currentPath: string) => (nextPath: string) => {
     // Avoid adding the same path to the history stack multiple times
-    if (currentPath !== `/${nextPath}`)
+    if (currentPath !== `/${nextPath}`) {
+      const nextAdminParams = new URLSearchParams();
+      searchParams.forEach((value, key) => {
+        if (adminParamKeys.includes(key)) {
+          nextAdminParams.set(key, value);
+        }
+      });
+
       navigate({
         pathname: nextPath,
-        search: `?${searchParams.toString()}`,
+        search: `?${nextAdminParams.toString()}`,
       });
+    }
   };
 
   const goToNextDistrict = goToDistrict(pathname);
@@ -202,12 +212,12 @@ export default function App() {
                     <VStack>
                       <DistrictTypeDropdown
                         selectValue={districtType}
-                        updateSearchParams={updateSearchParams}
+                        setAdminParams={updateSearchParams}
                       />
                       <BoroughDropdown
                         selectValue={boroughId}
-                        updateSearchParams={updateSearchParams}
                         boroughs={loaderData.boroughs}
+                        setAdminParams={updateSearchParams}
                       />
 
                       {districtType !== "ccd" ? (
@@ -215,13 +225,13 @@ export default function App() {
                           boroughId={boroughId}
                           selectValue={districtId}
                           communityDistricts={loaderData.communityDistricts}
-                          updateSearchParams={updateSearchParams}
+                          setAdminParams={updateSearchParams}
                         />
                       ) : (
                         <CityCouncilDistrictDropdown
                           selectValue={districtId}
                           cityCouncilDistricts={loaderData.cityCouncilDistricts}
-                          updateSearchParams={updateSearchParams}
+                          setAdminParams={updateSearchParams}
                         />
                       )}
                     </VStack>
diff --git a/app/utils/types.ts b/app/utils/types.ts
new file mode 100644
index 0000000..0aaee73
--- /dev/null
+++ b/app/utils/types.ts
@@ -0,0 +1,14 @@
+export type BoroughId = null | string;
+export type DistrictType = null | "cd" | "ccd";
+export type DistrictId = null | string;
+
+export type AdminParams = {
+  districtType: DistrictType;
+  districtId: DistrictId;
+  boroughId: BoroughId;
+};
+
+export type SearchParamChanges = Record<
+  string,
+  string | number | null | undefined
+>;
diff --git a/app/utils/utils.ts b/app/utils/utils.ts
index 3daef98..ed8a61f 100644
--- a/app/utils/utils.ts
+++ b/app/utils/utils.ts
@@ -1,4 +1,5 @@
 import { compareAsc, format, getMonth, getYear } from "date-fns";
+import { SearchParamChanges } from "./types";
 
 const getFiscalYearForDate = (date: Date): number => {
   const year = getYear(date);
@@ -17,18 +18,19 @@ export const currentDate = () => {
 };
 
 // from https://www.jacobparis.com/content/remix-pagination
-export function setNewSearchParamsString(
+export function setNewSearchParams(
   searchParams: URLSearchParams,
-  changes: Record<string, string | number | undefined>,
+  changes: SearchParamChanges,
 ) {
   const newSearchParams = new URLSearchParams(searchParams);
+
   for (const [key, value] of Object.entries(changes)) {
-    if (value === undefined) {
+    if (value === (undefined || null)) {
       newSearchParams.delete(key);
       continue;
     }
     newSearchParams.set(key, String(value));
   }
 
-  return newSearchParams.toString();
+  return newSearchParams;
 }