diff --git a/web/src/components/ResourceListingPagination/ResourceListingPagination.tsx b/web/src/components/ResourceListingPagination/ResourceListingPagination.tsx index 5c7c0d681..0a5528710 100644 --- a/web/src/components/ResourceListingPagination/ResourceListingPagination.tsx +++ b/web/src/components/ResourceListingPagination/ResourceListingPagination.tsx @@ -2,6 +2,7 @@ import React, { useCallback, useMemo } from 'react' import cx from 'classnames' import { Button, ButtonSize, Container, Layout, Pagination } from '@harness/uicore' import { useStrings } from 'framework/strings' +import { useUpdateQueryParams } from 'hooks/useUpdateQueryParams' import css from './ResourceListingPagination.module.scss' interface ResourceListingPaginationProps { @@ -22,6 +23,8 @@ export const ResourceListingPagination: React.FC setPage, scrollTop = true }) => { + const { updateQueryParams } = useUpdateQueryParams() + const { X_NEXT_PAGE, X_PREV_PAGE, totalItems, totalPages, pageSize } = useParsePaginationInfo(response) const _setPage = useCallback( (_page: number) => { @@ -35,6 +38,8 @@ export const ResourceListingPagination: React.FC }, 0) } setPage(_page) + updateQueryParams({ page: page.toString() }) + }, [setPage, scrollTop] ) diff --git a/web/src/hooks/useUpdateQueryParams.ts b/web/src/hooks/useUpdateQueryParams.ts new file mode 100644 index 000000000..7f3b42295 --- /dev/null +++ b/web/src/hooks/useUpdateQueryParams.ts @@ -0,0 +1,29 @@ +import { useLocation, useHistory } from 'react-router-dom'; +import qs from 'qs'; +import type { IStringifyOptions } from 'qs'; + +import { useQueryParams } from './useQueryParams'; + +export interface UseUpdateQueryParamsReturn { + updateQueryParams(values: T, options?: IStringifyOptions, replaceHistory?: boolean): void; + replaceQueryParams(values: T, options?: IStringifyOptions, replaceHistory?: boolean): void; +} + +export function useUpdateQueryParams>( + globalOptions?: IStringifyOptions +): UseUpdateQueryParamsReturn { + const { pathname } = useLocation(); + const { push, replace } = useHistory(); + const queryParams = useQueryParams(); + + return { + updateQueryParams(values: T, options?: IStringifyOptions, replaceHistory = false): void { + const path = `${pathname}?${qs.stringify({ ...queryParams, ...values }, { ...globalOptions, ...options })}`; + replaceHistory ? replace(path) : push(path); + }, + replaceQueryParams(values: T, options?: IStringifyOptions, replaceHistory = false): void { + const path = `${pathname}?${qs.stringify(values, { ...globalOptions, ...options })}`; + replaceHistory ? replace(path) : push(path); + } + }; +} diff --git a/web/src/pages/PullRequests/PullRequests.tsx b/web/src/pages/PullRequests/PullRequests.tsx index 868747f5c..2ed5be657 100644 --- a/web/src/pages/PullRequests/PullRequests.tsx +++ b/web/src/pages/PullRequests/PullRequests.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState } from 'react' +import React, { useEffect, useMemo, useState } from 'react' import { Container, PageBody, @@ -24,6 +24,7 @@ import { RepositoryPageHeader } from 'components/RepositoryPageHeader/Repository import { voidFn, getErrorMessage, LIST_FETCHING_LIMIT, permissionProps } from 'utils/Utils' import { usePageIndex } from 'hooks/usePageIndex' import { useGetSpaceParam } from 'hooks/useGetSpaceParam' +import { useUpdateQueryParams } from 'hooks/useUpdateQueryParams' import type { TypesPullReq, TypesRepository } from 'services/code' import { ResourceListingPagination } from 'components/ResourceListingPagination/ResourceListingPagination' import { UserPreference, useUserPreference } from 'hooks/useUserPreference' @@ -46,6 +47,25 @@ export default function PullRequests() { const space = useGetSpaceParam() const [page, setPage] = usePageIndex() + const currPageString = new URLSearchParams(window.location.href.split('?')?.[1]).get('page') + const currPage = currPageString ? parseInt(currPageString) : undefined + const { updateQueryParams } = useUpdateQueryParams() + console.log(page, currPage) + + useEffect(() => { + if (currPage) { + setPage(currPage) + updateQueryParams({ page: page.toString() }) + } + }, [window.location]) + + useEffect(() => { + if (currPage && page !== currPage && page > currPage) { + setPage(page) + } + updateQueryParams({ page: page.toString() }) + }, [page]) + const { repoMetadata, error, loading, refetch } = useGetRepositoryMetadata() const { data, @@ -56,7 +76,7 @@ export default function PullRequests() { path: `/api/v1/repos/${repoMetadata?.path}/+/pullreq`, queryParams: { limit: String(LIST_FETCHING_LIMIT), - page, + page: page, sort: filter == PullRequestFilterOption.MERGED ? 'merged' : 'number', order: 'desc', query: searchTerm,