From 7c59b4fce174c2eca29c62ca51402b351923b5d0 Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Tue, 31 Oct 2023 14:50:07 -0400 Subject: [PATCH] refactor hook --- src/components/PatchesPage/index.tsx | 31 +++-------------- .../PatchesPage/usePatchesQueryParams.ts | 34 +++++++++++++++++++ src/pages/ProjectPatches.tsx | 8 ++--- src/pages/UserPatches.tsx | 8 ++--- 4 files changed, 46 insertions(+), 35 deletions(-) create mode 100644 src/components/PatchesPage/usePatchesQueryParams.ts diff --git a/src/components/PatchesPage/index.tsx b/src/components/PatchesPage/index.tsx index 02432e4189..3cc69cb7cd 100644 --- a/src/components/PatchesPage/index.tsx +++ b/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 = ({ pageType, patches, }) => { - const { search } = useLocation(); const setPageSize = usePageSizeSelector(); const cookie = pageType === "project" @@ -68,7 +64,7 @@ export const PatchesPage: React.FC = ({ 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 = ({ ): 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 = ({ ): 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 = ({ ); }; -export const usePatchesInputFromSearch = (search: string): PatchesInput => { - const [patchName] = useQueryParam(PatchPageQueryParams.PatchName, ""); - const [rawStatuses] = useQueryParam( - 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; diff --git a/src/components/PatchesPage/usePatchesQueryParams.ts b/src/components/PatchesPage/usePatchesQueryParams.ts new file mode 100644 index 0000000000..fa5de986bb --- /dev/null +++ b/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, + "includeCommitQueue" | "onlyCommitQueue" +> => { + const { search } = useLocation(); + const [patchName] = useQueryParam(PatchPageQueryParams.PatchName, ""); + const [rawStatuses] = useQueryParam( + 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, + }; +}; diff --git a/src/pages/ProjectPatches.tsx b/src/pages/ProjectPatches.tsx index 875f81094c..911cb2e0d1 100644 --- a/src/pages/ProjectPatches.tsx +++ b/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, diff --git a/src/pages/UserPatches.tsx b/src/pages/UserPatches.tsx index 0700affeb1..ea54864c6b 100644 --- a/src/pages/UserPatches.tsx +++ b/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,7 +19,6 @@ 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( @@ -26,7 +26,7 @@ export const UserPatches = () => { Cookies.get(INCLUDE_COMMIT_QUEUE_USER_PATCHES) === "true" ); - const patchesInput = usePatchesInputFromSearch(search); + const patchesInput = usePatchesQueryParams(); const { data, loading, refetch, startPolling, stopPolling } = useQuery< UserPatchesQuery,