fix: [code-390]: fix state in url in repo pagination

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<ResourceListingPaginationProps>
   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<ResourceListingPaginationProps>
         }, 0)
       }
       setPage(_page)
+      updateQueryParams({ page: page.toString() })
+
     },
     [setPage, scrollTop]
   )

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<T> {
+  updateQueryParams(values: T, options?: IStringifyOptions, replaceHistory?: boolean): void;
+  replaceQueryParams(values: T, options?: IStringifyOptions, replaceHistory?: boolean): void;
+}
+
+export function useUpdateQueryParams<T = Record<string, string>>(
+  globalOptions?: IStringifyOptions
+): UseUpdateQueryParamsReturn<T> {
+  const { pathname } = useLocation();
+  const { push, replace } = useHistory();
+  const queryParams = useQueryParams<T>();
+
+  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);
+    }
+  };
+}

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,