Merge pull request #1409 from blockscout/fe-1388

fix canGoBackwards

ui/shared/pagination/Pagination.tsx

@@ -41,7 +41,7 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasPage
           aria-label="Prev page"
           w="36px"
           icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 }/> }
-          isDisabled={ !canGoBackwards || page === 1 || isLoading }
+          isDisabled={ !canGoBackwards || isLoading }
         />
       </Skeleton>
       <Skeleton isLoaded={ !showSkeleton } display="inline-block" borderRadius="base">

ui/shared/pagination/useQueryWithPages.test.tsx

@@ -68,7 +68,7 @@ it('returns correct data if there is only one page', async() => {
   expect(result.current.data).toEqual(responses.page_empty);
   expect(result.current.pagination).toMatchObject({
     page: 1,
-    canGoBackwards: true,
+    canGoBackwards: false,
     hasNextPage: false,
     isLoading: false,
     isVisible: false,
@@ -91,7 +91,7 @@ describe('if there are multiple pages', () => {
     expect(result.current.data).toEqual(responses.page_1);
     expect(result.current.pagination).toMatchObject({
       page: 1,
-      canGoBackwards: true,
+      canGoBackwards: false,
       hasNextPage: true,
       isLoading: false,
       isVisible: true,
@@ -258,7 +258,7 @@ describe('if there are multiple pages', () => {
       expect(result.current.data).toEqual(responses.page_1);
       expect(result.current.pagination).toMatchObject({
         page: 1,
-        canGoBackwards: true,
+        canGoBackwards: false,
         hasNextPage: true,
         isLoading: false,
         isVisible: true,
@@ -310,7 +310,7 @@ describe('if there are multiple pages', () => {
     expect(result.current.data).toEqual(responses.page_1);
     expect(result.current.pagination).toMatchObject({
       page: 1,
-      canGoBackwards: true,
+      canGoBackwards: false,
       hasNextPage: true,
       isLoading: false,
       isVisible: true,
@@ -404,7 +404,7 @@ describe('if there is page query param in URL', () => {
     expect(result.current.data).toEqual(responses.page_3);
     expect(result.current.pagination).toMatchObject({
       page: 3,
-      canGoBackwards: false,
+      canGoBackwards: true,
       hasNextPage: false,
       isLoading: false,
       isVisible: true,
@@ -458,7 +458,7 @@ describe('queries with filters', () => {
     expect(result.current.data).toEqual(responses.page_filtered);
     expect(result.current.pagination).toMatchObject({
       page: 1,
-      canGoBackwards: true,
+      canGoBackwards: false,
       hasNextPage: true,
       isLoading: false,
       isVisible: true,
@@ -547,7 +547,7 @@ describe('queries with sorting', () => {
     expect(result.current.data).toEqual(responses.page_sorted);
     expect(result.current.pagination).toMatchObject({
       page: 1,
-      canGoBackwards: true,
+      canGoBackwards: false,
       hasNextPage: false,
       isLoading: false,
       isVisible: false,

ui/shared/pagination/useQueryWithPages.ts

@@ -61,7 +61,6 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
   const [ hasPages, setHasPages ] = React.useState(page > 1);
 
   const isMounted = React.useRef(false);
-  const canGoBackwards = React.useRef(!router.query.page);
   const queryParams = { ...pageParams[page], ...filters, ...sorting };
 
   const scrollToTop = useCallback(() => {
@@ -107,7 +106,6 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
     let nextPageQuery: typeof router.query = { ...router.query };
     if (page === 2) {
       nextPageQuery = omit(router.query, [ 'next_page_params', 'page' ]);
-      canGoBackwards.current = true;
     } else {
       nextPageQuery.next_page_params = encodeURIComponent(JSON.stringify(pageParams[page - 1]));
       nextPageQuery.page = String(page - 1);
@@ -130,7 +128,6 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
       queryClient.removeQueries({ queryKey: [ resourceName ] });
       setPage(1);
       setPageParams({});
-      canGoBackwards.current = true;
       window.setTimeout(() => {
         // FIXME after router is updated we still have inactive queries for previously visited page (e.g third), where we came from
         // so have to remove it but with some delay :)
@@ -193,7 +190,7 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
     resetPage,
     hasPages,
     hasNextPage,
-    canGoBackwards: canGoBackwards.current,
+    canGoBackwards: Boolean(pageParams[page - 1]),
     isLoading: queryResult.isPlaceholderData,
     isVisible: hasPages || hasNextPage,
   };