refactor hook

src/components/PatchesPage/index.tsx

@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 import Checkbox from "@leafygreen-ui/checkbox";
 import { SearchInput } from "@leafygreen-ui/search-input";
 import Cookies from "js-cookie";
-import { useLocation } from "react-router-dom";
 import { Analytics } from "analytics/addPageAction";
 import PageSizeSelector, {
   usePageSizeSelector,
@@ -15,15 +14,13 @@ import {
   INCLUDE_HIDDEN_PATCHES,
 } from "constants/cookies";
 import { size } from "constants/tokens";
-import { PatchesPagePatchesFragment, PatchesInput } from "gql/generated/types";
+import { PatchesPagePatchesFragment } from "gql/generated/types";
 import { useFilterInputChangeHandler, usePageTitle } from "hooks";
 import { useQueryParam } from "hooks/useQueryParam";
-import { PatchPageQueryParams, ALL_PATCH_STATUS } from "types/patch";
-import { url } from "utils";
+import { PatchPageQueryParams } from "types/patch";
 import { ListArea } from "./ListArea";
 import { StatusSelector } from "./StatusSelector";
-
-const { getLimitFromSearch, getPageFromSearch } = url;
+import { usePatchesQueryParams } from "./usePatchesQueryParams";
 
 interface Props {
   analyticsObject: Analytics<
@@ -52,7 +49,6 @@ export const PatchesPage: React.FC<Props> = ({
   pageType,
   patches,
 }) => {
-  const { search } = useLocation();
   const setPageSize = usePageSizeSelector();
   const cookie =
     pageType === "project"
@@ -68,7 +64,7 @@ export const PatchesPage: React.FC<Props> = ({
       PatchPageQueryParams.Hidden,
       Cookies.get(INCLUDE_HIDDEN_PATCHES) === "true"
     );
-  const { limit, page } = usePatchesInputFromSearch(search);
+  const { limit, page } = usePatchesQueryParams();
   const { inputValue, setAndSubmitInputValue } = useFilterInputChangeHandler({
     urlParam: PatchPageQueryParams.PatchName,
     resetPage: true,
@@ -82,7 +78,6 @@ export const PatchesPage: React.FC<Props> = ({
   ): void => {
     setIsCommitQueueCheckboxChecked(e.target.checked);
     Cookies.set(cookie, e.target.checked ? "true" : "false");
-    // eslint-disable-next-line no-unused-expressions
     analyticsObject.sendEvent({ name: "Filter Commit Queue" });
   };
 
@@ -91,7 +86,6 @@ export const PatchesPage: React.FC<Props> = ({
   ): void => {
     setIsIncludeHiddenCheckboxChecked(e.target.checked);
     Cookies.set(INCLUDE_HIDDEN_PATCHES, e.target.checked ? "true" : "false");
-    // eslint-disable-next-line no-unused-expressions
     analyticsObject.sendEvent({ name: "Filter Hidden" });
   };
 
@@ -154,23 +148,6 @@ export const PatchesPage: React.FC<Props> = ({
   );
 };
 
-export const usePatchesInputFromSearch = (search: string): PatchesInput => {
-  const [patchName] = useQueryParam<string>(PatchPageQueryParams.PatchName, "");
-  const [rawStatuses] = useQueryParam<string[]>(
-    PatchPageQueryParams.Statuses,
-    []
-  );
-  const [hidden] = useQueryParam(PatchPageQueryParams.Hidden, false);
-  const statuses = rawStatuses.filter((v) => v && v !== ALL_PATCH_STATUS);
-  return {
-    limit: getLimitFromSearch(search),
-    includeHidden: hidden || Cookies.get(INCLUDE_HIDDEN_PATCHES) === "true",
-    page: getPageFromSearch(search),
-    patchName: `${patchName}`,
-    statuses,
-  };
-};
-
 const PaginationRow = styled.div`
   display: flex;
   justify-content: flex-end;

src/components/PatchesPage/usePatchesQueryParams.ts

@@ -0,0 +1,34 @@
+import Cookies from "js-cookie";
+import { useLocation } from "react-router-dom";
+import { INCLUDE_HIDDEN_PATCHES } from "constants/cookies";
+import { PatchesInput } from "gql/generated/types";
+import { useQueryParam } from "hooks/useQueryParam";
+import { PatchPageQueryParams, ALL_PATCH_STATUS } from "types/patch";
+import { getLimitFromSearch, getPageFromSearch } from "utils/url";
+
+/**
+ * usePatchesQueryParams is used alongside the Patches Page to transform URL state
+ * to the input value to the patches field for the User and Project GQL type.
+ * @returns - An object with all input values for the patches field except includeCommitQueue
+ * and onlyCommitQueue
+ */
+export const usePatchesQueryParams = (): Omit<
+  Required<PatchesInput>,
+  "includeCommitQueue" | "onlyCommitQueue"
+> => {
+  const { search } = useLocation();
+  const [patchName] = useQueryParam<string>(PatchPageQueryParams.PatchName, "");
+  const [rawStatuses] = useQueryParam<string[]>(
+    PatchPageQueryParams.Statuses,
+    []
+  );
+  const [hidden] = useQueryParam(PatchPageQueryParams.Hidden, false);
+  const statuses = rawStatuses.filter((v) => v && v !== ALL_PATCH_STATUS);
+  return {
+    limit: getLimitFromSearch(search),
+    includeHidden: hidden || Cookies.get(INCLUDE_HIDDEN_PATCHES) === "true",
+    page: getPageFromSearch(search),
+    patchName: `${patchName}`,
+    statuses,
+  };
+};

src/pages/ProjectPatches.tsx

@@ -1,9 +1,10 @@
 import { useQuery } from "@apollo/client";
 import Cookies from "js-cookie";
-import { useLocation, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { useProjectPatchesAnalytics } from "analytics/patches/useProjectPatchesAnalytics";
 import { ProjectBanner } from "components/Banners";
-import { PatchesPage, usePatchesInputFromSearch } from "components/PatchesPage";
+import { PatchesPage } from "components/PatchesPage";
+import { usePatchesQueryParams } from "components/PatchesPage/usePatchesQueryParams";
 import { ProjectSelect } from "components/ProjectSelect";
 import { INCLUDE_COMMIT_QUEUE_PROJECT_PATCHES } from "constants/cookies";
 import { DEFAULT_POLL_INTERVAL } from "constants/index";
@@ -23,13 +24,12 @@ export const ProjectPatches = () => {
   const analyticsObject = useProjectPatchesAnalytics();
 
   const { projectIdentifier } = useParams<{ projectIdentifier: string }>();
-  const { search } = useLocation();
   const [isCommitQueueCheckboxChecked] = useQueryParam(
     PatchPageQueryParams.CommitQueue,
     Cookies.get(INCLUDE_COMMIT_QUEUE_PROJECT_PATCHES) === "true"
   );
 
-  const patchesInput = usePatchesInputFromSearch(search);
+  const patchesInput = usePatchesQueryParams();
 
   const { data, loading, refetch, startPolling, stopPolling } = useQuery<
     ProjectPatchesQuery,

src/pages/UserPatches.tsx

@@ -1,8 +1,9 @@
 import { useQuery } from "@apollo/client";
 import Cookies from "js-cookie";
-import { useLocation, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { useUserPatchesAnalytics } from "analytics";
-import { PatchesPage, usePatchesInputFromSearch } from "components/PatchesPage";
+import { PatchesPage } from "components/PatchesPage";
+import { usePatchesQueryParams } from "components/PatchesPage/usePatchesQueryParams";
 import { INCLUDE_COMMIT_QUEUE_USER_PATCHES } from "constants/cookies";
 import { DEFAULT_POLL_INTERVAL } from "constants/index";
 import { useToastContext } from "context/toast";
@@ -18,15 +19,14 @@ import { PatchPageQueryParams } from "types/patch";
 export const UserPatches = () => {
   const dispatchToast = useToastContext();
   const { id: userId } = useParams<{ id: string }>();
-  const { search } = useLocation();
   const analyticsObject = useUserPatchesAnalytics();
 
   const [isCommitQueueCheckboxChecked] = useQueryParam(
     PatchPageQueryParams.CommitQueue,
     Cookies.get(INCLUDE_COMMIT_QUEUE_USER_PATCHES) === "true"
   );
 
-  const patchesInput = usePatchesInputFromSearch(search);
+  const patchesInput = usePatchesQueryParams();
 
   const { data, loading, refetch, startPolling, stopPolling } = useQuery<
     UserPatchesQuery,