Enhancements to pagination navigation (#2063)

* Update macaw to include Paginator changes

* Add link support to TablePagination component

* Rewrite usePaginator to use context and links instead of onClick

* Refactor ProductList to use new usePaginator hook

* Add decorator for PaginatorContext in ProductList stories

* Refactor AppList to use new usePaginator hook

* Refactor AttributeList to use new usePaginator hook

* Add missing pagination props for local pagination to AttributeValues

* Refactor CategoryList to use new usePaginator hook

* Refactor CategoryDetails to use useLocalPaginator and context

* Refactor CollectionList to use new usePaginator hook

* Refactor CollectionProducts to use new usePaginator hook

* Refactor CustomerList to use new usePaginator hook

* Refactor VoucherDetailsPage to use PaginationContext

* Refactor SaleDetails to use PaginatorContext

* Refactor SaleList to use new usePaginator hook

* Refactor VoucherList to use new usePaginator hook

* Fix type error in paginatorContextValues fixture

* Refactor GitfCardList to use new usePaginator hook

* Remove unused imports

* Refactor MenuList to use new usePaginator hook

* Refactor OrderDraftList to use new usePaginator hook

* Refactor OrderListPage to use new usePaginator hook

* Refactor PageList to use new usePaginator hook

* Refactor PageTypeList to use new usePaginator hook

* Refactor PermissionGroupList to use new usePaginator hook

* Refactor PluginsList to use new usePaginator hook

* Refactor ProductTypeList to use new usePaginator hook

* Refactor ShippingMethodProducts to use PaginationContext

* Refactor ShippingZonesList to use new usePaginator hook

* Refactor StaffList to use new usePaginator hook

* Fix TS errors

* Update TranslationEntities and TranslationFields to use new usePaginator

* Refactor WarehouseList to use new usePaginator hook

* Fix errors in stories that didn't use PaginationContextDecorator

* Mention changes in changelog

* Update to latest macaw version, update snapshots

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable, unreleased changes to this project will be documented in this file.
 - Added links instead of imperative navigation with onClick - #1969 by @taniotanio7
 - Fixed clearing attribute values - #2047 by @witoszekdev
 - Fixed EditorJS integration in RichTextEditor input - #2052 by @witoszekdev
+- Added links to table pagination buttons - #2063 by @witoszekdev
+- Using push instead of replace to history stack for pagination navigation - #2063 by @witoszekdev
 
 ## 3.1
 ### PREVIEW FEATURES

package-lock.json

@@ -2263,6 +2263,38 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.2.tgz",
+      "integrity": "sha512-FRVAkSNU/vGXLIsgbggcs70GkXKEOXgBBbNpYPNHSaKsCAMMd00NrjbtKTesxkdv9xm9N3+XiDlcFGY6WnatBg=="
+    },
+    "@floating-ui/dom": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.2.tgz",
+      "integrity": "sha512-z1DnEa7F3d8Fm/eXSbii8UEGpcjZGkQaYYUI0WpEVgD3vBfebDW8j/3ysusxonuMexoigA+A3b/fYH7sEqiwyg==",
+      "requires": {
+        "@floating-ui/core": "^0.7.2"
+      }
+    },
+    "@floating-ui/react-dom": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-0.7.1.tgz",
+      "integrity": "sha512-Dd7e8AupUjzcjeGf1g3EItf/QRtEWKF5GGyEs5WA5n3zlHvEgZ4XrZM6ANhUnzgE3pUQAaXkcXLnibgFp1YBRw==",
+      "requires": {
+        "@floating-ui/dom": "^0.5.1",
+        "use-isomorphic-layout-effect": "^1.1.1"
+      }
+    },
+    "@floating-ui/react-dom-interactions": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom-interactions/-/react-dom-interactions-0.5.0.tgz",
+      "integrity": "sha512-rfON7mkHjCeogd0BSXPa8GBp1TMxEytJQqGVlCouSUonJ4POqdHsqcxRnCh0yAaGVaL/nB/J1vq28V4RdoLszg==",
+      "requires": {
+        "@floating-ui/react-dom": "^0.7.0",
+        "aria-hidden": "^1.1.3",
+        "use-isomorphic-layout-effect": "^1.1.1"
+      }
+    },
     "@formatjs/cli": {
       "version": "4.8.3",
       "resolved": "https://registry.npmjs.org/@formatjs/cli/-/cli-4.8.3.tgz",
@@ -5277,10 +5309,11 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.5.2",
+      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.6.1.tgz",
-      "integrity": "sha512-fAbIGLnMo9BiVuR6W6MMZUprIutS+f4i1oEG8PX7+WM4rMZbvD204wxvHyx5dXSrU1DhLzDR4MK7dEGK/jykHA==",
+      "integrity": "sha512-C7WPbuQQTtDH3MVKg//74rSxUheav7TKubw8VytZsUEBWFSVpuzV8Hw+T6riKYJWOtTfYPNUkJlGi1B257hoQQ==",
       "requires": {
+        "@floating-ui/react-dom-interactions": "^0.5.0",
         "clsx": "^1.1.1",
         "downshift": "^6.1.7",
         "lodash": "^4.17.21",
@@ -8194,6 +8227,14 @@
       "integrity": "sha1-7L0W+JSbFXGDcRsb2jNPN4QBhas=",
       "dev": true
     },
+    "aria-hidden": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.1.3.tgz",
+      "integrity": "sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==",
+      "requires": {
+        "tslib": "^1.0.0"
+      }
+    },
     "arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -30914,6 +30955,11 @@
       "resolved": "https://registry.npmjs.org/use-force-update/-/use-force-update-1.0.7.tgz",
       "integrity": "sha512-k5dppYhO+I5X/cd7ildbrzeMZJkWwdAh5adaIk0qKN2euh7J0h2GBGBcB4QZ385eyHHnp7LIygvebdRx3XKdwA=="
     },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA=="
+    },
     "use-react-router": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/use-react-router/-/use-react-router-1.0.7.tgz",

package.json

@@ -29,7 +29,7 @@
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
-    "@saleor/macaw-ui": "^0.5.2",
+    "@saleor/macaw-ui": "^0.6.1",
     "@saleor/sdk": "^0.4.4",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",

src/apps/components/AppsListPage/AppListPage.stories.tsx

@@ -6,6 +6,7 @@ import {
   tabPageProps
 } from "@saleor/fixtures";
 import Decorator from "@saleor/storybook/Decorator";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -30,13 +31,12 @@ const props: AppsListPageProps = {
   onAppInProgressRemove: () => undefined,
   onAppInstallRetry: () => undefined,
   onCustomAppRemove: () => undefined,
-  onInstalledAppRemove: () => undefined,
+  onInstalledAppRemove: () => undefined
-  onNextPage: () => undefined,
-  onPreviousPage: () => undefined
 };
 
 storiesOf("Views / Apps / Apps list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <AppsListPage {...props} />)
   .add("loading", () => (
     <AppsListPage

src/apps/components/InstalledApps/InstalledApps.tsx

@@ -11,7 +11,7 @@ import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
 import { IconButton } from "@saleor/components/IconButton";
 import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { AppsListQuery } from "@saleor/graphql";
 import { DeleteIcon, ResponsiveTable } from "@saleor/macaw-ui";
@@ -36,10 +36,7 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
   onRemove,
   settings,
   disabled,
-  onNextPage,
-  onPreviousPage,
   onUpdateListSettings,
-  pageInfo,
   ...props
 }) => {
   const intl = useIntl();
@@ -57,16 +54,10 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
       <ResponsiveTable>
         <TableFooter>
           <TableRow>
-            <TablePagination
+            <TablePaginationWithContext
               colSpan={numberOfColumns}
               settings={settings}
-              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-              onNextPage={onNextPage}
               onUpdateListSettings={onUpdateListSettings}
-              hasPreviousPage={
-                pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-              }
-              onPreviousPage={onPreviousPage}
             />
           </TableRow>
         </TableFooter>

src/apps/views/AppsList/AppsList.tsx

@@ -19,7 +19,8 @@ import useLocalStorage from "@saleor/hooks/useLocalStorage";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { ListViews } from "@saleor/types";
 import getAppErrorMessage from "@saleor/utils/errors/app";
@@ -62,7 +63,6 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
   const intl = useIntl();
   const navigate = useNavigator();
   const { updateListSettings, settings } = useListSettings(ListViews.APPS_LIST);
-  const paginate = usePaginator();
   const paginationState = createPaginationState(settings?.rowNumber, params);
   const queryVariables = {
     sort: {
@@ -95,11 +95,11 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
     }
   });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    data?.apps?.pageInfo,
+    pageInfo: data?.apps?.pageInfo,
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const {
     data: customAppsData,
@@ -278,7 +278,7 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
   const customApps = customAppsData?.apps?.edges;
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <AppDeleteDialog
         confirmButtonState={deleteAppOpts.status}
         name={getCurrentAppName(
@@ -307,9 +307,6 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
         loadingAppsInProgress={loadingAppsInProgress}
         disabled={loading || customAppsLoading}
         settings={settings}
-        pageInfo={pageInfo}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onUpdateListSettings={updateListSettings}
         onAppInstallRetry={onAppInstallRetry}
         getCustomAppHref={id => customAppUrl(id)}
@@ -329,7 +326,7 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
           })
         }
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 

src/attributes/components/AttributeList/AttributeList.tsx

@@ -8,7 +8,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { AttributeFragment } from "@saleor/graphql";
 import { translateBoolean } from "@saleor/intl";
@@ -71,9 +71,6 @@ const AttributeList: React.FC<AttributeListProps> = ({
   attributes,
   disabled,
   isChecked,
-  onNextPage,
-  onPreviousPage,
-  pageInfo,
   selected,
   sort,
   toggle,
@@ -172,15 +169,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
       </TableHead>
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext colSpan={numberOfColumns} />
-            colSpan={numberOfColumns}
-            hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-            onNextPage={onNextPage}
-            hasPreviousPage={
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-            }
-            onPreviousPage={onPreviousPage}
-          />
         </TableRow>
       </TableFooter>
       <TableBody>

src/attributes/components/AttributeValues/AttributeValues.tsx

@@ -20,12 +20,18 @@ import {
 } from "@saleor/graphql";
 import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
 import { renderCollection, stopPropagation } from "@saleor/misc";
-import { ListProps, RelayToFlat, ReorderAction } from "@saleor/types";
+import {
+  ListProps,
+  PaginateListProps,
+  RelayToFlat,
+  ReorderAction
+} from "@saleor/types";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 export interface AttributeValuesProps
-  extends Pick<ListProps, Exclude<keyof ListProps, "getRowHref">> {
+  extends Pick<ListProps, Exclude<keyof ListProps, "getRowHref">>,
+    PaginateListProps {
   disabled: boolean;
   values: RelayToFlat<AttributeValueListFragment>;
   onValueAdd: () => void;

src/attributes/views/AttributeList/AttributeList.tsx

@@ -18,7 +18,8 @@ import {
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
@@ -48,7 +49,6 @@ interface AttributeListProps {
 
 const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
   const navigate = useNavigator();
-  const paginate = usePaginator();
   const notify = useNotifier();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
@@ -131,16 +131,16 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
     handleTabChange(tabs.length + 1);
   };
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    maybe(() => data.attributes.pageInfo),
+    pageInfo: maybe(() => data.attributes.pageInfo),
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const handleSort = createSortHandler(navigate, attributeListUrl, params);
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <AttributeListPage
         attributes={mapEdgesToItems(data?.attributes)}
         currentTab={currentTab}
@@ -150,14 +150,11 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
         isChecked={isSelected}
         onAll={resetFilters}
         onFilterChange={changeFilters}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onSearchChange={handleSearchChange}
         onSort={handleSort}
         onTabChange={handleTabChange}
         onTabDelete={() => openModal("delete-search")}
         onTabSave={() => openModal("save-search")}
-        pageInfo={pageInfo}
         selected={listElements.length}
         sort={getSortParams(params)}
         tabs={tabs.map(tab => tab.name)}
@@ -199,7 +196,7 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
         onSubmit={handleTabDelete}
         tabName={maybe(() => tabs[currentTab - 1].name, "...")}
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 AttributeList.displayName = "AttributeList";

src/categories/components/CategoryList/CategoryList.tsx

@@ -5,7 +5,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { CategoryFragment } from "@saleor/graphql";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -58,15 +58,12 @@ const CategoryList: React.FC<CategoryListProps> = props => {
     disabled,
     settings,
     sort,
-    pageInfo,
     isChecked,
     isRoot,
     selected,
     toggle,
     toggleAll,
     toolbar,
-    onNextPage,
-    onPreviousPage,
     onUpdateListSettings,
     onSort
   } = props;
@@ -136,16 +133,10 @@ const CategoryList: React.FC<CategoryListProps> = props => {
       </TableHead>
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext
             colSpan={numberOfColumns}
             settings={settings}
-            hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-            onNextPage={onNextPage}
             onUpdateListSettings={onUpdateListSettings}
-            hasPreviousPage={
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-            }
-            onPreviousPage={onPreviousPage}
           />
         </TableRow>
       </TableFooter>

src/categories/components/CategoryListPage/CategoryListPage.tsx

@@ -36,7 +36,6 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
   disabled,
   initialSearch,
   isChecked,
-  pageInfo,
   selected,
   settings,
   tabs,
@@ -44,8 +43,6 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
   toggleAll,
   toolbar,
   onAll,
-  onNextPage,
-  onPreviousPage,
   onSearchChange,
   onTabChange,
   onTabDelete,
@@ -95,14 +92,11 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
           disabled={disabled}
           isChecked={isChecked}
           isRoot={true}
-          pageInfo={pageInfo}
           selected={selected}
           settings={settings}
           toggle={toggle}
           toggleAll={toggleAll}
           toolbar={toolbar}
-          onNextPage={onNextPage}
-          onPreviousPage={onPreviousPage}
           onUpdateListSettings={onUpdateListSettings}
           {...listProps}
         />

src/categories/components/CategoryProductList/CategoryProductList.tsx

@@ -5,7 +5,7 @@ import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { CategoryDetailsQuery } from "@saleor/graphql";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -59,14 +59,11 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
   const {
     disabled,
     isChecked,
-    pageInfo,
     products,
     selected,
     toggle,
     toggleAll,
-    toolbar,
+    toolbar
-    onNextPage,
-    onPreviousPage
   } = props;
 
   const classes = useStyles(props);
@@ -100,15 +97,7 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
         </TableHead>
         <TableFooter>
           <TableRow>
-            <TablePagination
+            <TablePaginationWithContext colSpan={numberOfColumns} />
-              colSpan={numberOfColumns}
-              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-              onNextPage={onNextPage}
-              hasPreviousPage={
-                pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-              }
-              onPreviousPage={onPreviousPage}
-            />
           </TableRow>
         </TableFooter>
         <TableBody>

src/categories/components/CategoryProducts/CategoryProducts.tsx

@@ -21,9 +21,6 @@ interface CategoryProductsProps extends PageListProps, ListActions {
 export const CategoryProducts: React.FC<CategoryProductsProps> = ({
   products,
   disabled,
-  pageInfo,
-  onNextPage,
-  onPreviousPage,
   categoryId,
   categoryName,
   isChecked,
@@ -79,9 +76,6 @@ export const CategoryProducts: React.FC<CategoryProductsProps> = ({
       <CategoryProductList
         products={products}
         disabled={disabled}
-        pageInfo={pageInfo}
-        onNextPage={onNextPage}
-        onPreviousPage={onPreviousPage}
         selected={selected}
         isChecked={isChecked}
         toggle={toggle}

src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx

@@ -45,17 +45,11 @@ export interface CategoryUpdatePageProps
   category: CategoryDetailsQuery["category"];
   products: RelayToFlat<CategoryDetailsQuery["category"]["products"]>;
   subcategories: RelayToFlat<CategoryDetailsQuery["category"]["children"]>;
-  pageInfo: {
-    hasNextPage: boolean;
-    hasPreviousPage: boolean;
-  };
   saveButtonBarState: ConfirmButtonTransitionState;
   addProductHref: string;
   onImageDelete: () => void;
   onSubmit: (data: CategoryUpdateData) => SubmitPromise;
   onImageUpload(file: File);
-  onNextPage();
-  onPreviousPage();
   onDelete();
 }
 
@@ -69,13 +63,10 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
   category,
   disabled,
   errors,
-  pageInfo,
   products,
   saveButtonBarState,
   subcategories,
   onDelete,
-  onNextPage,
-  onPreviousPage,
   onSubmit,
   onImageDelete,
   onImageUpload,
@@ -191,14 +182,11 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
                 disabled={disabled}
                 isChecked={isChecked}
                 isRoot={false}
-                pageInfo={pageInfo}
                 selected={selected}
                 sort={undefined}
                 toggle={toggle}
                 toggleAll={toggleAll}
                 toolbar={subcategoryListToolbar}
-                onNextPage={onNextPage}
-                onPreviousPage={onPreviousPage}
                 onSort={() => undefined}
               />
             </Card>
@@ -209,9 +197,6 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
               categoryName={category?.name}
               products={products}
               disabled={disabled}
-              pageInfo={pageInfo}
-              onNextPage={onNextPage}
-              onPreviousPage={onPreviousPage}
               toggle={toggle}
               toggleAll={toggleAll}
               selected={selected}

src/categories/views/CategoryDetails.tsx

@@ -21,6 +21,7 @@ import useLocalPaginator, {
 } from "@saleor/hooks/useLocalPaginator";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import { PaginatorContext } from "@saleor/hooks/usePaginator";
 import { commonMessages, errorMessages } from "@saleor/intl";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
@@ -174,7 +175,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
     CategoryUrlQueryParams
   >(navigate, params => categoryUrl(id, params), params);
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const { pageInfo, ...paginationFunctions } = paginate(
     activeTab === CategoryPageTab.categories
       ? maybe(() => data.category.children.pageInfo)
       : maybe(() => data.category.products.pageInfo),
@@ -208,7 +209,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
   );
 
   return (
-    <>
+    <PaginatorContext.Provider value={{ ...pageInfo, ...paginationFunctions }}>
       <WindowTitle title={maybe(() => data.category.name)} />
       <CategoryUpdatePage
         categoryId={id}
@@ -239,9 +240,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
             }
           })
         }
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
-        pageInfo={pageInfo}
         onSubmit={handleSubmit}
         products={mapEdgesToItems(data?.category?.products)}
         saveButtonBarState={updateResult.status}
@@ -371,7 +369,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
           />
         </DialogContentText>
       </ActionDialog>
-    </>
+    </PaginatorContext.Provider>
   );
 };
 export default CategoryDetails;

src/categories/views/CategoryList/CategoryList.tsx

@@ -14,7 +14,8 @@ import useListSettings from "@saleor/hooks/useListSettings";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import { maybe } from "@saleor/misc";
@@ -49,7 +50,6 @@ interface CategoryListProps {
 
 export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
   const navigate = useNavigator();
-  const paginate = usePaginator();
 
   const { isSelected, listElements, toggle, toggleAll, reset } = useBulkActions(
     params.ids
@@ -117,11 +117,11 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
     handleTabChange(tabs.length + 1);
   };
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    maybe(() => data.categories.pageInfo),
+    pageInfo: maybe(() => data.categories.pageInfo),
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const handleCategoryBulkDelete = (data: CategoryBulkDeleteMutation) => {
     if (data.categoryBulkDelete.errors.length === 0) {
@@ -141,7 +141,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
   const handleSort = createSortHandler(navigate, categoryListUrl, params);
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <CategoryListPage
         categories={mapEdgesToItems(data?.categories)}
         currentTab={currentTab}
@@ -156,10 +156,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
         sort={getSortParams(params)}
         onSort={handleSort}
         disabled={loading}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onUpdateListSettings={updateListSettings}
-        pageInfo={pageInfo}
         isChecked={isSelected}
         selected={listElements.length}
         toggle={toggle}
@@ -235,7 +232,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
         onSubmit={handleTabDelete}
         tabName={maybe(() => tabs[currentTab - 1].name, "...")}
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 export default CategoryList;

src/collections/components/CollectionList/CollectionList.tsx

@@ -14,7 +14,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import TooltipTableCellHeader from "@saleor/components/TooltipTableCellHeader";
 import { commonTooltipMessages } from "@saleor/components/TooltipTableCellHeader/messages";
@@ -73,11 +73,8 @@ const CollectionList: React.FC<CollectionListProps> = props => {
     disabled,
     settings,
     sort,
-    onNextPage,
-    onPreviousPage,
     onUpdateListSettings,
     onSort,
-    pageInfo,
     isChecked,
     selected,
     selectedChannelId,
@@ -150,16 +147,10 @@ const CollectionList: React.FC<CollectionListProps> = props => {
       </TableHead>
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext
             colSpan={numberOfColumns}
             settings={settings}
-            hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-            onNextPage={onNextPage}
             onUpdateListSettings={onUpdateListSettings}
-            hasPreviousPage={
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-            }
-            onPreviousPage={onPreviousPage}
           />
         </TableRow>
       </TableFooter>

src/collections/components/CollectionProducts/CollectionProducts.tsx

@@ -15,7 +15,7 @@ import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableB
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { CollectionDetailsQuery } from "@saleor/graphql";
 import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
@@ -67,10 +67,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
     collection,
     disabled,
     onAdd,
-    onNextPage,
-    onPreviousPage,
     onProductUnassign,
-    pageInfo,
     isChecked,
     selected,
     toggle,
@@ -154,13 +151,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
         </TableHead>
         <TableFooter>
           <TableRow>
-            <TablePagination
+            <TablePaginationWithContext colSpan={numberOfColumns} />
-              colSpan={numberOfColumns}
-              hasNextPage={pageInfo?.hasNextPage}
-              onNextPage={onNextPage}
-              hasPreviousPage={pageInfo?.hasPreviousPage}
-              onPreviousPage={onPreviousPage}
-            />
           </TableRow>
         </TableFooter>
         <TableBody>

src/collections/views/CollectionDetails.tsx

@@ -31,6 +31,7 @@ import useLocalPaginator, {
 import useLocalStorage from "@saleor/hooks/useLocalStorage";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import { PaginatorContext } from "@saleor/hooks/usePaginator";
 import { commonMessages, errorMessages } from "@saleor/intl";
 import useProductSearch from "@saleor/searches/useProductSearch";
 import { arrayDiff } from "@saleor/utils/arrays";
@@ -255,13 +256,13 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
     updateCollectionOpts.data?.collectionUpdate.errors
   );
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const { pageInfo, ...paginationValues } = paginate(
     data?.collection?.products?.pageInfo,
     paginationState
   );
 
   return (
-    <>
+    <PaginatorContext.Provider value={{ ...pageInfo, ...paginationValues }}>
       <WindowTitle title={data?.collection?.name} />
       {!!allChannels?.length && (
         <ChannelsAvailabilityDialog
@@ -302,9 +303,6 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
           })
         }
         onSubmit={handleSubmit}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
-        pageInfo={pageInfo}
         onProductUnassign={(productId, event) => {
           event.stopPropagation();
           unassignProduct({
@@ -448,7 +446,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
           />
         </DialogContentText>
       </ActionDialog>
-    </>
+    </PaginatorContext.Provider>
   );
 };
 export default CollectionDetails;

src/collections/views/CollectionList/CollectionList.tsx

@@ -15,7 +15,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { commonMessages } from "@saleor/intl";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
@@ -55,7 +56,6 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
   const navigate = useNavigator();
   const intl = useIntl();
   const notify = useNotifier();
-  const paginate = usePaginator();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
   );
@@ -159,16 +159,16 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
     handleTabChange(tabs.length + 1);
   };
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    maybe(() => data.collections.pageInfo),
+    pageInfo: maybe(() => data.collections.pageInfo),
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const handleSort = createSortHandler(navigate, collectionListUrl, params);
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <CollectionListPage
         currentTab={currentTab}
         initialSearch={params.query || ""}
@@ -181,11 +181,8 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
         disabled={loading}
         collections={mapEdgesToItems(data?.collections)}
         settings={settings}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onSort={handleSort}
         onUpdateListSettings={updateListSettings}
-        pageInfo={pageInfo}
         sort={getSortParams(params)}
         toolbar={
           <IconButton
@@ -251,7 +248,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
         onSubmit={handleTabDelete}
         tabName={maybe(() => tabs[currentTab - 1].name, "...")}
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 export default CollectionList;

src/components/Attributes/Attributes.stories.tsx

@@ -1,5 +1,6 @@
 import Attributes, { AttributesProps } from "@saleor/components/Attributes";
 import { fetchMoreProps } from "@saleor/fixtures";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -31,6 +32,7 @@ const props: AttributesProps = {
 
 storiesOf("Attributes / Attributes", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <Attributes {...props} />)
   .add("selected", () => (
     <Attributes {...props} attributes={ATTRIBUTES_SELECTED} />

src/components/TablePagination/TablePagination.tsx

@@ -5,6 +5,7 @@ import {
 } from "@saleor/macaw-ui";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
+import { Link, LinkProps } from "react-router-dom";
 
 import { ListSettings } from "../../types";
 
@@ -22,17 +23,28 @@ const messages = defineMessages({
 });
 
 export interface PaginationProps
-  extends Omit<MacawPaginationProps, "labels" | "rowNumber"> {
+  extends Omit<
+    MacawPaginationProps,
+    "labels" | "rowNumber" | "nextIconButtonProps" | "prevIconButtonProps"
+  > {
   component?: React.ElementType;
   colSpan?: number;
   settings?: ListSettings;
   onUpdateListSettings?: ListSettingsUpdate;
+  prevHref?: string;
+  nextHref?: string;
+  disabled?: boolean;
 }
 export const TablePagination: React.FC<PaginationProps> = ({
   component,
   colSpan,
   settings,
   onUpdateListSettings,
+  nextHref,
+  prevHref,
+  hasNextPage,
+  hasPreviousPage,
+  disabled,
   ...rest
 }) => {
   const intl = useIntl();
@@ -40,8 +52,10 @@ export const TablePagination: React.FC<PaginationProps> = ({
 
   return (
     <Wrapper colSpan={colSpan || 1000}>
-      <Pagination
+      <Pagination<LinkProps>
         {...rest}
+        hasNextPage={hasNextPage && !disabled}
+        hasPreviousPage={hasPreviousPage && !disabled}
         labels={{
           noOfRows: intl.formatMessage(messages.noOfRows)
         }}
@@ -51,6 +65,12 @@ export const TablePagination: React.FC<PaginationProps> = ({
             ? value => onUpdateListSettings("rowNumber", value)
             : undefined
         }
+        nextIconButtonProps={
+          nextHref ? { component: Link, to: nextHref } : undefined
+        }
+        prevIconButtonProps={
+          prevHref ? { component: Link, to: prevHref } : undefined
+        }
       />
     </Wrapper>
   );

src/components/TablePagination/TablePaginationWithContext.tsx

@@ -0,0 +1,50 @@
+import { usePaginatorContext } from "@saleor/hooks/usePaginator";
+import React from "react";
+
+import TablePagination, { PaginationProps } from "./TablePagination";
+
+export type TablePaginationWithContextProps = Omit<
+  PaginationProps,
+  | "nextHref"
+  | "prevHref"
+  | "hasNextPage"
+  | "hasPreviousPage"
+  | "onNextPage"
+  | "onPreviousPage"
+>;
+export const TablePaginationWithContext = (
+  props: TablePaginationWithContextProps
+) => {
+  const {
+    hasNextPage,
+    hasPreviousPage,
+    paginatorType,
+    ...paginationProps
+  } = usePaginatorContext();
+
+  if (paginatorType === "click") {
+    const { loadNextPage, loadPreviousPage } = paginationProps;
+
+    return (
+      <TablePagination
+        {...props}
+        hasNextPage={hasNextPage}
+        hasPreviousPage={hasPreviousPage}
+        onNextPage={loadNextPage}
+        onPreviousPage={loadPreviousPage}
+      />
+    );
+  }
+
+  const { prevPageHref, nextPageHref } = paginationProps;
+
+  return (
+    <TablePagination
+      {...props}
+      hasNextPage={hasNextPage}
+      hasPreviousPage={hasPreviousPage}
+      prevHref={prevPageHref}
+      nextHref={nextPageHref}
+    />
+  );
+};

src/components/TablePagination/index.ts

@@ -1,3 +1,4 @@
 export { default } from "./TablePagination";
 export * from "./TablePagination";
 export * from "./TablePaginationActions";
+export * from "./TablePaginationWithContext";

src/customers/components/CustomerList/CustomerList.tsx

@@ -8,7 +8,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { CustomerListUrlSortField, customerUrl } from "@saleor/customers/urls";
 import { ListCustomersQuery, PermissionEnum } from "@saleor/graphql";
@@ -54,9 +54,6 @@ const CustomerList: React.FC<CustomerListProps> = props => {
     settings,
     disabled,
     customers,
-    pageInfo,
-    onNextPage,
-    onPreviousPage,
     onUpdateListSettings,
     onSort,
     toolbar,
@@ -129,16 +126,10 @@ const CustomerList: React.FC<CustomerListProps> = props => {
       </TableHead>
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext
             colSpan={numberOfColumns}
             settings={settings}
-            hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-            onNextPage={onNextPage}
             onUpdateListSettings={onUpdateListSettings}
-            hasPreviousPage={
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-            }
-            onPreviousPage={onPreviousPage}
           />
         </TableRow>
       </TableFooter>

src/customers/views/CustomerList/CustomerList.tsx

@@ -15,7 +15,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
@@ -54,7 +55,6 @@ interface CustomerListProps {
 export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
-  const paginate = usePaginator();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
   );
@@ -122,11 +122,11 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
     handleTabChange(tabs.length + 1);
   };
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    maybe(() => data.customers.pageInfo),
+    pageInfo: maybe(() => data.customers.pageInfo),
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const [
     bulkRemoveCustomers,
@@ -148,7 +148,7 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
   const handleSort = createSortHandler(navigate, customerListUrl, params);
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <WindowTitle title={intl.formatMessage(sectionNames.customers)} />
       <CustomerListPage
         currentTab={currentTab}
@@ -164,9 +164,6 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
         customers={mapEdgesToItems(data?.customers)}
         settings={settings}
         disabled={loading}
-        pageInfo={pageInfo}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onUpdateListSettings={updateListSettings}
         onSort={handleSort}
         toolbar={
@@ -230,7 +227,7 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
         onSubmit={handleTabDelete}
         tabName={maybe(() => tabs[currentTab - 1].name, "...")}
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 export default CustomerList;

src/discounts/components/DiscountCategories/DiscountCategories.tsx

@@ -13,7 +13,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { SaleDetailsFragment, VoucherDetailsFragment } from "@saleor/graphql";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
@@ -38,11 +38,8 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
   const {
     discount,
     disabled,
-    pageInfo,
     onCategoryAssign,
     onCategoryUnassign,
-    onPreviousPage,
-    onNextPage,
     toolbar,
     toggle,
     toggleAll,
@@ -94,15 +91,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
         </TableHead>
         <TableFooter>
           <TableRow>
-            <TablePagination
+            <TablePaginationWithContext colSpan={numberOfColumns} />
-              colSpan={numberOfColumns}
-              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-              onNextPage={onNextPage}
-              hasPreviousPage={
-                pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-              }
-              onPreviousPage={onPreviousPage}
-            />
           </TableRow>
         </TableFooter>
         <TableBody>

src/discounts/components/DiscountCollections/DiscountCollections.tsx

@@ -13,7 +13,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { SaleDetailsFragment, VoucherDetailsFragment } from "@saleor/graphql";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
@@ -38,11 +38,8 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
   const {
     discount: sale,
     disabled,
-    pageInfo,
     onCollectionAssign,
     onCollectionUnassign,
-    onPreviousPage,
-    onNextPage,
     isChecked,
     selected,
     toggle,
@@ -92,15 +89,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
         </TableHead>
         <TableFooter>
           <TableRow>
-            <TablePagination
+            <TablePaginationWithContext colSpan={numberOfColumns} />
-              colSpan={numberOfColumns}
-              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-              onNextPage={onNextPage}
-              hasPreviousPage={
-                pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-              }
-              onPreviousPage={onPreviousPage}
-            />
           </TableRow>
         </TableFooter>
         <TableBody>

src/discounts/components/DiscountProducts/DiscountProducts.tsx

@@ -14,7 +14,7 @@ import Skeleton from "@saleor/components/Skeleton";
 import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { SaleDetailsFragment, VoucherDetailsFragment } from "@saleor/graphql";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
@@ -41,11 +41,8 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
   const {
     products,
     disabled,
-    pageInfo,
-    onPreviousPage,
     onProductAssign,
     onProductUnassign,
-    onNextPage,
     isChecked,
     selected,
     toggle,
@@ -101,15 +98,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
         </TableHead>
         <TableFooter>
           <TableRow>
-            <TablePagination
+            <TablePaginationWithContext colSpan={numberOfColumns} />
-              colSpan={numberOfColumns}
-              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-              onNextPage={onNextPage}
-              hasPreviousPage={
-                pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-              }
-              onPreviousPage={onPreviousPage}
-            />
           </TableRow>
         </TableFooter>
         <TableBody>

src/discounts/components/DiscountVariants/DiscountVariants.tsx

@@ -13,7 +13,7 @@ import Skeleton from "@saleor/components/Skeleton";
 import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { SaleDetailsFragment } from "@saleor/graphql";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
@@ -38,11 +38,8 @@ const DiscountVariants: React.FC<SaleVariantsProps> = props => {
   const {
     variants,
     disabled,
-    pageInfo,
-    onPreviousPage,
     onVariantAssign,
     onVariantUnassign,
-    onNextPage,
     isChecked,
     selected,
     toggle,
@@ -100,15 +97,7 @@ const DiscountVariants: React.FC<SaleVariantsProps> = props => {
         </TableHead>
         <TableFooter>
           <TableRow>
-            <TablePagination
+            <TablePaginationWithContext colSpan={numberOfColumns} />
-              colSpan={numberOfColumns}
-              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-              onNextPage={onNextPage}
-              hasPreviousPage={
-                pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-              }
-              onPreviousPage={onPreviousPage}
-            />
           </TableRow>
         </TableFooter>
         <TableBody>

src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx

@@ -106,7 +106,6 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
   onSubmit,
   onTabClick,
   openChannelsModal,
-  pageInfo,
   sale,
   saveButtonBarState,
   onCategoryAssign,
@@ -114,8 +113,6 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
   onChannelsChange,
   onCollectionAssign,
   onCollectionUnassign,
-  onNextPage,
-  onPreviousPage,
   onProductAssign,
   onProductUnassign,
   onVariantAssign,
@@ -277,9 +274,6 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
                     disabled={disabled}
                     onCategoryAssign={onCategoryAssign}
                     onCategoryUnassign={onCategoryUnassign}
-                    onNextPage={onNextPage}
-                    onPreviousPage={onPreviousPage}
-                    pageInfo={pageInfo}
                     discount={sale}
                     isChecked={isChecked}
                     selected={selected}
@@ -292,9 +286,6 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
                     disabled={disabled}
                     onCollectionAssign={onCollectionAssign}
                     onCollectionUnassign={onCollectionUnassign}
-                    onNextPage={onNextPage}
-                    onPreviousPage={onPreviousPage}
-                    pageInfo={pageInfo}
                     discount={sale}
                     isChecked={isChecked}
                     selected={selected}
@@ -305,11 +296,8 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
                 ) : activeTab === SaleDetailsPageTab.products ? (
                   <DiscountProducts
                     disabled={disabled}
-                    onNextPage={onNextPage}
-                    onPreviousPage={onPreviousPage}
                     onProductAssign={onProductAssign}
                     onProductUnassign={onProductUnassign}
-                    pageInfo={pageInfo}
                     products={mapEdgesToItems(sale?.products)}
                     isChecked={isChecked}
                     selected={selected}
@@ -320,11 +308,8 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
                 ) : (
                   <DiscountVariants
                     disabled={disabled}
-                    onNextPage={onNextPage}
-                    onPreviousPage={onPreviousPage}
                     onVariantAssign={onVariantAssign}
                     onVariantUnassign={onVariantUnassign}
-                    pageInfo={pageInfo}
                     variants={mapEdgesToItems(sale?.variants)}
                     isChecked={isChecked}
                     selected={selected}

src/discounts/components/SaleList/SaleList.tsx

@@ -7,7 +7,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import TooltipTableCellHeader from "@saleor/components/TooltipTableCellHeader";
 import { commonTooltipMessages } from "@saleor/components/TooltipTableCellHeader/messages";
@@ -71,11 +71,8 @@ const SaleList: React.FC<SaleListProps> = props => {
   const {
     settings,
     disabled,
-    onNextPage,
-    onPreviousPage,
     onUpdateListSettings,
     onSort,
-    pageInfo,
     sales,
     selectedChannelId,
     isChecked,
@@ -174,16 +171,10 @@ const SaleList: React.FC<SaleListProps> = props => {
       </TableHead>
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext
             colSpan={numberOfColumns}
             settings={settings}
-            hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-            onNextPage={onNextPage}
             onUpdateListSettings={onUpdateListSettings}
-            hasPreviousPage={
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-            }
-            onPreviousPage={onPreviousPage}
           />
         </TableRow>
       </TableFooter>

src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx

@@ -109,7 +109,6 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
   channelListings = [],
   disabled,
   errors,
-  pageInfo,
   saveButtonBarState,
   voucher,
   onCategoryAssign,
@@ -119,8 +118,6 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
   onCountryUnassign,
   onCollectionAssign,
   onCollectionUnassign,
-  onNextPage,
-  onPreviousPage,
   onProductAssign,
   onProductUnassign,
   onTabClick,
@@ -309,9 +306,6 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                         disabled={disabled}
                         onCategoryAssign={onCategoryAssign}
                         onCategoryUnassign={onCategoryUnassign}
-                        onNextPage={onNextPage}
-                        onPreviousPage={onPreviousPage}
-                        pageInfo={pageInfo}
                         discount={voucher}
                         isChecked={isChecked}
                         selected={selected}
@@ -324,9 +318,6 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                         disabled={disabled}
                         onCollectionAssign={onCollectionAssign}
                         onCollectionUnassign={onCollectionUnassign}
-                        onNextPage={onNextPage}
-                        onPreviousPage={onPreviousPage}
-                        pageInfo={pageInfo}
                         discount={voucher}
                         isChecked={isChecked}
                         selected={selected}
@@ -337,11 +328,8 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                     ) : (
                       <DiscountProducts
                         disabled={disabled}
-                        onNextPage={onNextPage}
-                        onPreviousPage={onPreviousPage}
                         onProductAssign={onProductAssign}
                         onProductUnassign={onProductUnassign}
-                        pageInfo={pageInfo}
                         products={mapEdgesToItems(voucher?.products)}
                         isChecked={isChecked}
                         selected={selected}

src/discounts/components/VoucherList/VoucherList.tsx

@@ -7,7 +7,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import TooltipTableCellHeader from "@saleor/components/TooltipTableCellHeader";
 import { commonTooltipMessages } from "@saleor/components/TooltipTableCellHeader/messages";
@@ -88,11 +88,8 @@ const VoucherList: React.FC<VoucherListProps> = props => {
   const {
     settings,
     disabled,
-    onNextPage,
-    onPreviousPage,
     onUpdateListSettings,
     onSort,
-    pageInfo,
     vouchers,
     isChecked,
     selected,
@@ -228,16 +225,10 @@ const VoucherList: React.FC<VoucherListProps> = props => {
       </TableHead>
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext
             colSpan={numberOfColumns}
             settings={settings}
-            hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-            onNextPage={onNextPage}
             onUpdateListSettings={onUpdateListSettings}
-            hasPreviousPage={
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-            }
-            onPreviousPage={onPreviousPage}
           />
         </TableRow>
       </TableFooter>

src/discounts/views/SaleDetails/SaleDetails.tsx

@@ -40,6 +40,7 @@ import useLocalPaginator, {
 import useLocalStorage from "@saleor/hooks/useLocalStorage";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import { PaginatorContext } from "@saleor/hooks/usePaginator";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
@@ -251,7 +252,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
       }
     });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const { pageInfo, ...paginationValues } = paginate(
     tabPageInfo,
     paginationState
   );
@@ -269,7 +270,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
   );
 
   return (
-    <>
+    <PaginatorContext.Provider value={{ ...pageInfo, ...paginationValues }}>
       <WindowTitle title={intl.formatMessage(sectionNames.sales)} />
       {!!allChannels?.length && (
         <ChannelsAvailabilityDialog
@@ -295,11 +296,8 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
         disabled={loading || saleCataloguesRemoveOpts.loading}
         errors={saleUpdateOpts.data?.saleUpdate.errors || []}
         selectedChannelId={selectedChannel}
-        pageInfo={pageInfo}
         openChannelsModal={handleChannelsModalOpen}
         onChannelsChange={setCurrentChannels}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onCategoryAssign={() => openModal("assign-category")}
         onCollectionAssign={() => openModal("assign-collection")}
         onCollectionUnassign={collectionId =>
@@ -589,7 +587,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
           />
         </DialogContentText>
       </ActionDialog>
-    </>
+    </PaginatorContext.Provider>
   );
 };
 export default SaleDetails;

src/discounts/views/SaleList/SaleList.tsx

@@ -13,7 +13,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
@@ -52,7 +53,6 @@ interface SaleListProps {
 export const SaleList: React.FC<SaleListProps> = ({ params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
-  const paginate = usePaginator();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
   );
@@ -141,11 +141,11 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
 
   const canOpenBulkActionDialog = maybe(() => params.ids.length > 0);
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    maybe(() => data.sales.pageInfo),
+    pageInfo: maybe(() => data.sales.pageInfo),
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const [saleBulkDelete, saleBulkDeleteOpts] = useSaleBulkDeleteMutation({
     onCompleted: data => {
@@ -171,7 +171,7 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
     });
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <WindowTitle title={intl.formatMessage(sectionNames.sales)} />
       <SaleListPage
         currentTab={currentTab}
@@ -187,9 +187,6 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
         sales={mapEdgesToItems(data?.sales)}
         settings={settings}
         disabled={loading}
-        pageInfo={pageInfo}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onSort={handleSort}
         onUpdateListSettings={updateListSettings}
         isChecked={isSelected}
@@ -251,7 +248,7 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
         onSubmit={handleTabDelete}
         tabName={maybe(() => tabs[currentTab - 1].name, "...")}
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 export default SaleList;

src/discounts/views/VoucherDetails/VoucherDetails.tsx

@@ -40,6 +40,7 @@ import useLocalPaginator, {
 } from "@saleor/hooks/useLocalPaginator";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import { PaginatorContext } from "@saleor/hooks/usePaginator";
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
@@ -263,13 +264,13 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
       }
     });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const { pageInfo, ...paginationValues } = paginate(
     tabPageInfo,
     paginationState
   );
 
   return (
-    <>
+    <PaginatorContext.Provider value={{ ...pageInfo, ...paginationValues }}>
       <WindowTitle title={intl.formatMessage(sectionNames.vouchers)} />
       {!!allChannels?.length && (
         <ChannelsAvailabilityDialog
@@ -303,9 +304,6 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
           ...(updateChannelsOpts.data?.voucherChannelListingUpdate.errors || [])
         ]}
         selectedChannelId={channel?.id}
-        pageInfo={pageInfo}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onCategoryAssign={() => openModal("assign-category")}
         onCollectionAssign={() => openModal("assign-collection")}
         onCollectionUnassign={collectionId =>
@@ -605,7 +603,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
           />
         </DialogContentText>
       </ActionDialog>
-    </>
+    </PaginatorContext.Provider>
   );
 };
 export default VoucherDetails;

src/discounts/views/VoucherList/VoucherList.tsx

@@ -16,7 +16,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
@@ -55,7 +56,6 @@ interface VoucherListProps {
 export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
-  const paginate = usePaginator();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
   );
@@ -145,11 +145,11 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
 
   const canOpenBulkActionDialog = maybe(() => params.ids.length > 0);
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    data?.vouchers?.pageInfo,
+    pageInfo: data?.vouchers?.pageInfo,
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const [
     voucherBulkDelete,
@@ -178,7 +178,7 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
   const handleSort = createSortHandler(navigate, voucherListUrl, params);
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <WindowTitle title={intl.formatMessage(sectionNames.vouchers)} />
       <VoucherListPage
         currentTab={currentTab}
@@ -194,9 +194,6 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
         settings={settings}
         vouchers={mapEdgesToItems(data?.vouchers)}
         disabled={loading}
-        pageInfo={pageInfo}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onUpdateListSettings={updateListSettings}
         onSort={handleSort}
         isChecked={isSelected}
@@ -258,7 +255,7 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
         onSubmit={handleTabDelete}
         tabName={maybe(() => tabs[currentTab - 1].name, "...")}
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 export default VoucherList;

src/fixtures.ts

@@ -5,6 +5,7 @@ import {
   UserDetailsQuery
 } from "@saleor/graphql";
 
+import { PaginatorContextValues } from "./hooks/usePaginator";
 import {
   FetchMoreProps,
   FilterPageProps,
@@ -303,6 +304,16 @@ export const tabPageProps: TabPageProps = {
   tabs: ["Tab X"]
 };
 
+export const paginatorContextValues: PaginatorContextValues = {
+  endCursor: "",
+  startCursor: "",
+  hasNextPage: false,
+  hasPreviousPage: false,
+  nextPageHref: "",
+  prevPageHref: "",
+  paginatorType: "link"
+};
+
 export const searchPageProps: SearchPageProps = {
   initialSearch: "",
   onSearchChange: () => undefined

src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTableFooter.tsx

@@ -6,8 +6,6 @@ import React from "react";
 import { useGiftCardList } from "../providers/GiftCardListProvider";
 
 const GiftCardsListTableFooter: React.FC = () => {
-  const paginate = usePaginator();
-
   const {
     settings,
     updateListSettings,
@@ -17,23 +15,20 @@ const GiftCardsListTableFooter: React.FC = () => {
     numberOfColumns
   } = useGiftCardList();
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    apiPageInfo,
+    pageInfo: apiPageInfo,
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   return (
     <TableFooter>
       <TableRow>
         <TablePagination
+          {...paginationValues}
           settings={settings}
           colSpan={numberOfColumns}
-          hasNextPage={pageInfo ? pageInfo.hasNextPage : false}
-          onNextPage={loadNextPage}
           onUpdateListSettings={updateListSettings}
-          onPreviousPage={loadPreviousPage}
-          hasPreviousPage={pageInfo ? pageInfo.hasPreviousPage : false}
         />
       </TableRow>
     </TableFooter>

src/hooks/useLocalPaginator.ts

@@ -117,6 +117,7 @@ function useLocalPaginator(
     return {
       loadNextPage,
       loadPreviousPage,
+      paginatorType: "click" as const,
       pageInfo: newPageInfo
     };
   }

src/hooks/usePaginator.ts

@@ -1,7 +1,7 @@
 import { stringifyQs } from "@saleor/utils/urls";
+import { createContext, useContext, useMemo } from "react";
 
 import { Pagination } from "../types";
-import useNavigator from "./useNavigator";
 
 export interface PageInfo {
   endCursor: string;
@@ -36,50 +36,105 @@ export function createPaginationState(
       };
 }
 
-function usePaginator() {
+interface UsePaginatorArgs {
-  const navigate = useNavigator();
+  pageInfo: PageInfo;
+  paginationState: PaginationState;
+  queryString: Pagination;
+}
 
-  function paginate(
+function usePaginator({
-    pageInfo: PageInfo,
+  queryString,
-    paginationState: PaginationState,
+  paginationState,
-    queryString: Pagination
+  pageInfo
-  ) {
+}: UsePaginatorArgs) {
-    const loadNextPage = () =>
+  const newPageInfo = useMemo<PageInfo>(
-      navigate(
+    () =>
-        "?" +
+      pageInfo
-          stringifyQs({
-            ...queryString,
-            after: pageInfo.endCursor,
-            before: undefined
-          }),
-        { replace: true, resetScroll: true }
-      );
-
-    const loadPreviousPage = () =>
-      navigate(
-        "?" +
-          stringifyQs({
-            ...queryString,
-            after: undefined,
-            before: pageInfo.startCursor
-          }),
-        { replace: true, resetScroll: true }
-      );
-
-    const newPageInfo = pageInfo
         ? {
             ...pageInfo,
             hasNextPage: !!paginationState.before || pageInfo.hasNextPage,
             hasPreviousPage: !!paginationState.after || pageInfo.hasPreviousPage
           }
-      : undefined;
+        : undefined,
+    [paginationState, pageInfo]
+  );
+
+  const nextPageHref = useMemo(() => {
+    if (!newPageInfo?.hasNextPage || !pageInfo?.endCursor) {
+      return undefined;
+    }
+
+    return (
+      "?" +
+      stringifyQs({
+        ...queryString,
+        after: pageInfo.endCursor,
+        before: undefined
+      })
+    );
+  }, [pageInfo?.endCursor, newPageInfo?.hasNextPage, queryString]);
+
+  const prevPageHref = useMemo(() => {
+    if (!newPageInfo?.hasPreviousPage || !pageInfo?.startCursor) {
+      return undefined;
+    }
+    return (
+      "?" +
+      stringifyQs({
+        ...queryString,
+        after: undefined,
+        before: pageInfo.startCursor
+      })
+    );
+  }, [pageInfo?.startCursor, newPageInfo?.hasPreviousPage, queryString]);
 
   return {
-      loadNextPage,
+    nextPageHref,
-      loadPreviousPage,
+    prevPageHref,
-      pageInfo: newPageInfo
+    paginatorType: "link" as const,
+    ...newPageInfo
   };
 }
-  return paginate;
+
-}
 export default usePaginator;
+
+export interface PaginatorContextValuesCommon {
+  hasNextPage?: boolean;
+  hasPreviousPage?: boolean;
+  endCursor?: string;
+  startCursor?: string;
+}
+
+export type PaginatorContextValues = PaginatorContextValuesCommon &
+  (
+    | {
+        paginatorType: "link";
+        nextPageHref?: string;
+        prevPageHref?: string;
+        loadNextPage?: never;
+        loadPreviousPage?: never;
+      }
+    | {
+        paginatorType: "click";
+        nextPageHref?: never;
+        prevPageHref?: never;
+        loadNextPage: () => void;
+        loadPreviousPage: () => void;
+      }
+  );
+
+export const PaginatorContext = createContext<PaginatorContextValues | null>(
+  null
+);
+
+export const usePaginatorContext = () => {
+  const context = useContext(PaginatorContext);
+
+  if (context === null) {
+    throw new Error(
+      "usePaginatorContext must be used within a PaginatorContext.Provider"
+    );
+  }
+
+  return context;
+};

src/navigation/components/MenuList/MenuList.tsx

@@ -12,7 +12,7 @@ import Skeleton from "@saleor/components/Skeleton";
 import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { MenuFragment } from "@saleor/graphql";
 import { DeleteIcon, makeStyles } from "@saleor/macaw-ui";
@@ -64,11 +64,8 @@ const MenuList: React.FC<MenuListProps> = props => {
     isChecked,
     menus,
     onDelete,
-    onNextPage,
-    onPreviousPage,
     onUpdateListSettings,
     onSort,
-    pageInfo,
     selected,
     sort,
     toggle,
@@ -121,16 +118,10 @@ const MenuList: React.FC<MenuListProps> = props => {
         </TableHead>
         <TableFooter>
           <TableRow>
-            <TablePagination
+            <TablePaginationWithContext
               colSpan={numberOfColumns}
               settings={settings}
-              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-              onNextPage={onNextPage}
               onUpdateListSettings={onUpdateListSettings}
-              hasPreviousPage={
-                pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-              }
-              onPreviousPage={onPreviousPage}
             />
           </TableRow>
         </TableFooter>

src/navigation/views/MenuList/MenuList.tsx

@@ -13,7 +13,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { buttonMessages, commonMessages } from "@saleor/intl";
 import { getStringOrPlaceholder, maybe } from "@saleor/misc";
@@ -36,7 +37,6 @@ interface MenuListProps {
 const MenuList: React.FC<MenuListProps> = ({ params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
-  const paginate = usePaginator();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
   );
@@ -72,11 +72,11 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
     variables: queryVariables
   });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    maybe(() => data.menus.pageInfo),
+    pageInfo: maybe(() => data.menus.pageInfo),
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const [menuCreate, menuCreateOpts] = useMenuCreateMutation({
     onCompleted: data => {
@@ -126,7 +126,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
   const handleSort = createSortHandler(navigate, menuListUrl, params);
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <MenuListPage
         disabled={loading}
         menus={mapEdgesToItems(data?.menus)}
@@ -139,11 +139,8 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
             })
           )
         }
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onUpdateListSettings={updateListSettings}
         onSort={handleSort}
-        pageInfo={pageInfo}
         isChecked={isSelected}
         selected={listElements.length}
         sort={getSortParams(params)}
@@ -242,7 +239,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
           />
         </DialogContentText>
       </ActionDialog>
-    </>
+    </PaginatorContext.Provider>
   );
 };
 export default MenuList;

src/orders/components/OrderDraftList/OrderDraftList.tsx

@@ -6,7 +6,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { OrderDraftListQuery } from "@saleor/graphql";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -63,9 +63,6 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
     disabled,
     settings,
     orders,
-    pageInfo,
-    onPreviousPage,
-    onNextPage,
     onUpdateListSettings,
     onSort,
     isChecked,
@@ -148,16 +145,10 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
       </TableHead>
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext
             colSpan={numberOfColumns}
             settings={settings}
-            hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-            onNextPage={onNextPage}
             onUpdateListSettings={onUpdateListSettings}
-            hasPreviousPage={
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-            }
-            onPreviousPage={onPreviousPage}
           />
         </TableRow>
       </TableFooter>

src/orders/components/OrderList/OrderList.tsx

@@ -11,7 +11,7 @@ import Money from "@saleor/components/Money";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { OrderListQuery } from "@saleor/graphql";
 import { makeStyles, Pill } from "@saleor/macaw-ui";
@@ -82,9 +82,6 @@ export const OrderList: React.FC<OrderListProps> = props => {
     disabled,
     settings,
     orders,
-    pageInfo,
-    onPreviousPage,
-    onNextPage,
     onUpdateListSettings,
     onSort,
     sort
@@ -183,16 +180,11 @@ export const OrderList: React.FC<OrderListProps> = props => {
       </TableHead>
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext
             colSpan={numberOfColumns}
             settings={settings}
-            hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
+            disabled={disabled}
-            onNextPage={onNextPage}
             onUpdateListSettings={onUpdateListSettings}
-            hasPreviousPage={
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-            }
-            onPreviousPage={onPreviousPage}
           />
         </TableRow>
       </TableFooter>

src/orders/views/OrderDraftList/OrderDraftList.tsx

@@ -18,7 +18,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import { maybe } from "@saleor/misc";
@@ -57,7 +58,6 @@ interface OrderDraftListProps {
 export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
-  const paginate = usePaginator();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
   );
@@ -165,11 +165,11 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
     variables: queryVariables
   });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    maybe(() => data.draftOrders.pageInfo),
+    pageInfo: maybe(() => data.draftOrders.pageInfo),
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const handleSort = createSortHandler(navigate, orderDraftListUrl, params);
 
@@ -181,7 +181,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
     });
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <OrderDraftListPage
         currentTab={currentTab}
         filterOpts={getFilterOpts(params)}
@@ -197,10 +197,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
         disabled={loading}
         settings={settings}
         orders={mapEdgesToItems(data?.draftOrders)}
-        pageInfo={pageInfo}
         onAdd={() => openModal("create-order")}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onSort={handleSort}
         onUpdateListSettings={updateListSettings}
         isChecked={isSelected}
@@ -273,7 +270,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
           })
         }
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 

src/orders/views/OrderList/OrderList.tsx

@@ -14,7 +14,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { getStringOrPlaceholder } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
@@ -53,7 +54,6 @@ interface OrderListProps {
 export const OrderList: React.FC<OrderListProps> = ({ params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
-  const paginate = usePaginator();
   const { updateListSettings, settings } = useListSettings(
     ListViews.ORDER_LIST
   );
@@ -140,16 +140,16 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
     variables: queryVariables
   });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    data?.orders?.pageInfo,
+    pageInfo: data?.orders?.pageInfo,
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const handleSort = createSortHandler(navigate, orderListUrl, params);
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <OrderListPage
         settings={settings}
         currentTab={currentTab}
@@ -157,11 +157,8 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
         filterOpts={getFilterOpts(params, channelOpts)}
         limits={limitOpts.data?.shop.limits}
         orders={mapEdgesToItems(data?.orders)}
-        pageInfo={pageInfo}
         sort={getSortParams(params)}
         onAdd={() => openModal("create-order")}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onUpdateListSettings={updateListSettings}
         onSort={handleSort}
         onSearchChange={handleSearchChange}
@@ -203,7 +200,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
           }
         />
       )}
-    </>
+    </PaginatorContext.Provider>
   );
 };
 

src/pageTypes/components/PageTypeList/PageTypeList.tsx

@@ -4,7 +4,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { PageTypeFragment } from "@saleor/graphql";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -39,9 +39,6 @@ const PageTypeList: React.FC<PageTypeListProps> = props => {
   const {
     disabled,
     pageTypes,
-    pageInfo,
-    onNextPage,
-    onPreviousPage,
     onSort,
     isChecked,
     selected,
@@ -82,14 +79,9 @@ const PageTypeList: React.FC<PageTypeListProps> = props => {
       </TableHead>
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext
             colSpan={numberOfColumns}
-            hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
+            disabled={disabled}
-            onNextPage={onNextPage}
-            hasPreviousPage={
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-            }
-            onPreviousPage={onPreviousPage}
           />
         </TableRow>
       </TableFooter>

src/pageTypes/components/PageTypeListPage/PageTypeListPage.stories.tsx

@@ -1,4 +1,5 @@
 import { PageTypeListUrlSortField } from "@saleor/pageTypes/urls";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -28,6 +29,7 @@ const props: PageTypeListPageProps = {
 
 storiesOf("Views / Page types / Page types list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <PageTypeListPage {...props} />)
   .add("loading", () => (
     <PageTypeListPage {...props} disabled={true} pageTypes={undefined} />

src/pageTypes/views/PageTypeList/PageTypeList.tsx

@@ -13,7 +13,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { commonMessages } from "@saleor/intl";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
@@ -50,7 +51,6 @@ interface PageTypeListProps {
 
 export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
   const navigate = useNavigator();
-  const paginate = usePaginator();
   const notify = useNotifier();
   const {
     isSelected,
@@ -119,11 +119,11 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
     handleTabChange(tabs.length + 1);
   };
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    data?.pageTypes?.pageInfo,
+    pageInfo: data?.pageTypes?.pageInfo,
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const handleSort = createSortHandler(navigate, pageTypeListUrl, params);
 
@@ -165,7 +165,7 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
   const pageTypesData = mapEdgesToItems(data?.pageTypes);
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <PageTypeListPage
         currentTab={currentTab}
         initialSearch={params.query || ""}
@@ -177,9 +177,6 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
         tabs={tabs.map(tab => tab.name)}
         disabled={loading}
         pageTypes={pageTypesData}
-        pageInfo={pageInfo}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onSort={handleSort}
         isChecked={isSelected}
         selected={selectedPageTypes.length}
@@ -224,7 +221,7 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
         onSubmit={handleTabDelete}
         tabName={getStringOrPlaceholder(tabs[currentTab - 1]?.name)}
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 PageTypeList.displayName = "PageTypeList";

src/pages/components/PageList/PageList.tsx

@@ -10,7 +10,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { PageFragment } from "@saleor/graphql";
 import { makeStyles, Pill } from "@saleor/macaw-ui";
@@ -58,11 +58,8 @@ const PageList: React.FC<PageListProps> = props => {
     settings,
     pages,
     disabled,
-    onNextPage,
-    pageInfo,
     onSort,
     onUpdateListSettings,
-    onPreviousPage,
     isChecked,
     selected,
     sort,
@@ -136,16 +133,11 @@ const PageList: React.FC<PageListProps> = props => {
         </TableHead>
         <TableFooter>
           <TableRow>
-            <TablePagination
+            <TablePaginationWithContext
               colSpan={numberOfColumns}
               settings={settings}
-              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
+              disabled={disabled}
-              onNextPage={onNextPage}
               onUpdateListSettings={onUpdateListSettings}
-              hasPreviousPage={
-                pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-              }
-              onPreviousPage={onPreviousPage}
             />
           </TableRow>
         </TableFooter>

src/pages/views/PageList/PageList.tsx

@@ -12,7 +12,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import { maybe } from "@saleor/misc";
@@ -39,7 +40,6 @@ interface PageListProps {
 export const PageList: React.FC<PageListProps> = ({ params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
-  const paginate = usePaginator();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
   );
@@ -65,11 +65,11 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
     variables: queryVariables
   });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    maybe(() => data.pages.pageInfo),
+    pageInfo: maybe(() => data.pages.pageInfo),
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const [openModal, closeModal] = createDialogActionHandlers<
     PageListUrlDialog,
@@ -115,14 +115,11 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
   const handleSort = createSortHandler(navigate, pageListUrl, params);
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <PageListPage
         disabled={loading}
         settings={settings}
         pages={mapEdgesToItems(data?.pages)}
-        pageInfo={pageInfo}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onUpdateListSettings={updateListSettings}
         onSort={handleSort}
         actionDialogOpts={{
@@ -263,7 +260,7 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
           }}
         />
       </ActionDialog>
-    </>
+    </PaginatorContext.Provider>
   );
 };
 

src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx

@@ -9,7 +9,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
 import TableCellHeader from "@saleor/components/TableCellHeader";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { PermissionGroupFragment } from "@saleor/graphql";
 import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
@@ -65,16 +65,7 @@ interface PermissionGroupListProps
 }
 
 const PermissionGroupList: React.FC<PermissionGroupListProps> = props => {
-  const {
+  const { disabled, permissionGroups, onDelete, onSort, sort } = props;
-    disabled,
-    permissionGroups,
-    pageInfo,
-    onDelete,
-    onNextPage,
-    onPreviousPage,
-    onSort,
-    sort
-  } = props;
   const classes = useStyles(props);
 
   return (
@@ -107,14 +98,9 @@ const PermissionGroupList: React.FC<PermissionGroupListProps> = props => {
       </TableHead>
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext
             colSpan={numberOfColumns}
-            hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
+            disabled={disabled}
-            onNextPage={onNextPage}
-            hasPreviousPage={
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-            }
-            onPreviousPage={onPreviousPage}
           />
         </TableRow>
       </TableFooter>

src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.stories.tsx

@@ -9,6 +9,7 @@ import PermissionGroupListPage, {
 import { permissionGroups } from "@saleor/permissionGroups/fixtures";
 import { PermissionGroupListUrlSortField } from "@saleor/permissionGroups/urls";
 import Decorator from "@saleor/storybook/Decorator";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -27,6 +28,7 @@ const props: PermissionGroupListPageProps = {
 
 storiesOf("Views / Permission Groups / Permission Group List", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <PermissionGroupListPage {...props} />)
   .add("loading", () => (
     <PermissionGroupListPage

src/permissionGroups/views/PermissionGroupList/PermissionGroupList.tsx

@@ -8,7 +8,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { getStringOrPlaceholder } from "@saleor/misc";
 import PermissionGroupDeleteDialog from "@saleor/permissionGroups/components/PermissionGroupDeleteDialog";
@@ -36,7 +37,6 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
   params
 }) => {
   const navigate = useNavigator();
-  const paginate = usePaginator();
   const notify = useNotifier();
   const intl = useIntl();
   const { updateListSettings, settings } = useListSettings(
@@ -58,11 +58,11 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
     variables: queryVariables
   });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    data?.permissionGroups.pageInfo,
+    pageInfo: data?.permissionGroups.pageInfo,
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const handleSort = createSortHandler(
     navigate,
@@ -100,16 +100,13 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
   });
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <PermissionGroupListPage
         disabled={loading}
         settings={settings}
-        pageInfo={pageInfo}
         sort={getSortParams(params)}
         permissionGroups={permissionGroups}
         onDelete={id => openModal("remove", { id })}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onUpdateListSettings={updateListSettings}
         onSort={handleSort}
       />
@@ -129,7 +126,7 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
         open={params.action === "remove"}
         onClose={closeModal}
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 

src/plugins/components/PluginsList/PluginsList.tsx

@@ -1,7 +1,7 @@
 import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import { PluginBaseFragment } from "@saleor/graphql";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { EditIcon, makeStyles } from "@saleor/macaw-ui";
@@ -37,12 +37,9 @@ const PluginList: React.FC<PluginListProps> = props => {
     settings,
     plugins,
     disabled,
-    onNextPage,
-    pageInfo,
     sort,
     onSort,
-    onUpdateListSettings,
+    onUpdateListSettings
-    onPreviousPage
   } = props;
   const classes = useStyles(props);
   const navigate = useNavigator();
@@ -53,16 +50,11 @@ const PluginList: React.FC<PluginListProps> = props => {
       <PluginListTableHead sort={sort} onSort={onSort} />
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext
             colSpan={totalColSpan}
-            settings={settings}
-            hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-            onNextPage={onNextPage}
             onUpdateListSettings={onUpdateListSettings}
-            hasPreviousPage={
+            settings={settings}
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : false
+            disabled={disabled}
-            }
-            onPreviousPage={onPreviousPage}
           />
         </TableRow>
       </TableFooter>

src/plugins/views/PluginList/PluginList.tsx

@@ -8,7 +8,8 @@ import useListSettings from "@saleor/hooks/useListSettings";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
@@ -43,7 +44,6 @@ interface PluginsListProps {
 
 export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
   const navigate = useNavigator();
-  const paginate = usePaginator();
   const { updateListSettings, settings } = useListSettings(
     ListViews.PLUGINS_LIST
   );
@@ -103,11 +103,11 @@ export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
     handleTabChange(tabs.length + 1);
   };
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    maybe(() => data.plugins.pageInfo),
+    pageInfo: maybe(() => data.plugins.pageInfo),
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const handleSort = createSortHandler(navigate, pluginListUrl, params);
   const channelsSearchWithLoadMoreProps = useChannelsSearchWithLoadMore();
@@ -115,7 +115,7 @@ export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
   const filterOpts = getFilterOpts(params, channelsSearchWithLoadMoreProps);
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <PluginsListPage
         currentTab={currentTab}
         disabled={loading}
@@ -123,14 +123,11 @@ export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
         initialSearch={params.query || ""}
         settings={settings}
         plugins={mapEdgesToItems(data?.plugins)}
-        pageInfo={pageInfo}
         sort={getSortParams(params)}
         tabs={getFilterTabs().map(tab => tab.name)}
         onAll={resetFilters}
         onFilterChange={changeFilters}
         onSearchChange={handleSearchChange}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onSort={handleSort}
         onTabSave={() => openModal("save-search")}
         onTabDelete={() => openModal("delete-search")}
@@ -150,7 +147,7 @@ export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
         onSubmit={handleFilterTabDelete}
         tabName={maybe(() => tabs[currentTab - 1].name, "...")}
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 

src/productTypes/components/ProductTypeList/ProductTypeList.tsx

@@ -10,7 +10,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { ProductTypeFragment } from "@saleor/graphql";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -61,9 +61,6 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
   const {
     disabled,
     productTypes,
-    pageInfo,
-    onNextPage,
-    onPreviousPage,
     onSort,
     isChecked,
     selected,
@@ -127,15 +124,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
       </TableHead>
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext colSpan={numberOfColumns} />
-            colSpan={numberOfColumns}
-            hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-            onNextPage={onNextPage}
-            hasPreviousPage={
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-            }
-            onPreviousPage={onPreviousPage}
-          />
         </TableRow>
       </TableFooter>
       <TableBody>

src/productTypes/views/ProductTypeList/ProductTypeList.tsx

@@ -12,7 +12,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { commonMessages } from "@saleor/intl";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
@@ -53,7 +54,6 @@ interface ProductTypeListProps {
 export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
-  const paginate = usePaginator();
   const {
     isSelected,
     listElements: selectedProductTypes,
@@ -123,11 +123,11 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
     handleTabChange(tabs.length + 1);
   };
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    maybe(() => data.productTypes.pageInfo),
+    pageInfo: maybe(() => data.productTypes.pageInfo),
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const handleSort = createSortHandler(navigate, productTypeListUrl, params);
 
@@ -169,7 +169,7 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
     });
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <ProductTypeListPage
         currentTab={currentTab}
         filterOpts={getFilterOpts(params)}
@@ -183,9 +183,6 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
         tabs={tabs.map(tab => tab.name)}
         disabled={loading}
         productTypes={productTypesData}
-        pageInfo={pageInfo}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onSort={handleSort}
         isChecked={isSelected}
         selected={selectedProductTypes.length}
@@ -229,7 +226,7 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
         onSubmit={handleTabDelete}
         tabName={maybe(() => tabs[currentTab - 1].name, "...")}
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 ProductTypeList.displayName = "ProductTypeList";

src/products/components/ProductList/ProductList.tsx

@@ -19,7 +19,7 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import TooltipTableCellHeader from "@saleor/components/TooltipTableCellHeader";
 import { commonTooltipMessages } from "@saleor/components/TooltipTableCellHeader/messages";
@@ -137,15 +137,12 @@ export const ProductList: React.FC<ProductListProps> = props => {
     disabled,
     isChecked,
     gridAttributes,
-    pageInfo,
     products,
     selected,
     sort,
     toggle,
     toggleAll,
     toolbar,
-    onNextPage,
-    onPreviousPage,
     onUpdateListSettings,
     onSort,
     selectedChannelId,
@@ -323,16 +320,10 @@ export const ProductList: React.FC<ProductListProps> = props => {
         </TableHead>
         <TableFooter>
           <TableRow>
-            <TablePagination
+            <TablePaginationWithContext
               colSpan={numberOfColumns}
               settings={settings}
-              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-              onNextPage={onNextPage}
               onUpdateListSettings={onUpdateListSettings}
-              hasPreviousPage={
-                pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-              }
-              onPreviousPage={onPreviousPage}
             />
           </TableRow>
         </TableFooter>

src/products/components/ProductList/ProductListAttribute.stories.tsx

@@ -1,5 +1,6 @@
 import { ProductListAttributeFragment } from "@saleor/graphql";
 import Decorator from "@saleor/storybook/Decorator";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -85,6 +86,7 @@ const attributes: ProductListAttributeFragment[] = [
 
 storiesOf("Views / Products / Product list / Attribute display", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => (
     <ProductListAttribute
       attribute="attribute:3"

src/products/views/ProductList/ProductList.tsx

@@ -34,7 +34,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { commonMessages } from "@saleor/intl";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
@@ -86,7 +87,6 @@ interface ProductListProps {
 export const ProductList: React.FC<ProductListProps> = ({ params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
-  const paginate = usePaginator();
   const { queue } = useBackgroundTask();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
@@ -341,14 +341,14 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
     channelOpts
   );
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    data?.products?.pageInfo,
+    pageInfo: data?.products?.pageInfo,
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <ProductListPage
         activeAttributeSortId={params.attributeId}
         sort={{
@@ -387,10 +387,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
         products={mapEdgesToItems(data?.products)}
         onColumnQueryChange={availableInGridAttributesOpts.search}
         onFetchMore={availableInGridAttributesOpts.loadMore}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onUpdateListSettings={updateListSettings}
-        pageInfo={pageInfo}
         onAll={resetFilters}
         toolbar={
           <IconButton
@@ -497,7 +494,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
         onSubmit={handleFilterTabDelete}
         tabName={maybe(() => tabs[currentTab - 1].name, "...")}
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 export default ProductList;

src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.stories.tsx

@@ -1,5 +1,6 @@
 import { shippingZone } from "@saleor/shipping/fixtures";
 import Decorator from "@saleor/storybook//Decorator";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import { storiesOf } from "@storybook/react";
 import React from "react";
@@ -15,14 +16,8 @@ const products = mapEdgesToItems(
 const props: ShippingMethodProductsProps = {
   disabled: false,
   isChecked: () => undefined,
-  onNextPage: () => undefined,
-  onPreviousPage: () => undefined,
   onProductAssign: () => undefined,
   onProductUnassign: () => undefined,
-  pageInfo: {
-    hasNextPage: false,
-    hasPreviousPage: false
-  },
   products,
   selected: products.length,
   toggle: () => undefined,
@@ -32,4 +27,5 @@ const props: ShippingMethodProductsProps = {
 
 storiesOf("Shipping / ShippingMethodProducts", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <ShippingMethodProducts {...props} />);

src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.tsx

@@ -13,7 +13,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import { ShippingZoneQuery } from "@saleor/graphql";
 import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
 import { renderCollection } from "@saleor/misc";
@@ -58,10 +58,7 @@ const numberOfColumns = 3;
 const ShippingMethodProducts: React.FC<ShippingMethodProductsProps> = props => {
   const {
     disabled,
-    pageInfo,
     products,
-    onNextPage,
-    onPreviousPage,
     onProductAssign,
     onProductUnassign,
     isChecked,
@@ -112,16 +109,9 @@ const ShippingMethodProducts: React.FC<ShippingMethodProductsProps> = props => {
             </TableHead>
             <TableFooter>
               <TableRow>
-                <TablePagination
+                <TablePaginationWithContext
                   colSpan={numberOfColumns}
-                  hasNextPage={
+                  disabled={disabled}
-                    pageInfo && !disabled ? pageInfo.hasNextPage : false
-                  }
-                  onNextPage={onNextPage}
-                  hasPreviousPage={
-                    pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-                  }
-                  onPreviousPage={onPreviousPage}
                 />
               </TableRow>
             </TableFooter>

src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.stories.tsx

@@ -1,6 +1,7 @@
 import { ShippingMethodTypeEnum } from "@saleor/graphql";
 import { shippingZone } from "@saleor/shipping/fixtures";
 import Decorator from "@saleor/storybook//Decorator";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -47,11 +48,9 @@ const props: ShippingZoneRatesPageProps = {
   isChecked: () => undefined,
   onChannelsChange: () => undefined,
   onDelete: () => undefined,
-  onNextPage: () => undefined,
   onPostalCodeAssign: () => undefined,
   onPostalCodeInclusionChange: () => undefined,
   onPostalCodeUnassign: () => undefined,
-  onPreviousPage: () => undefined,
   onProductAssign: () => undefined,
   onProductUnassign: () => undefined,
   onSubmit: () => undefined,
@@ -70,6 +69,7 @@ const props: ShippingZoneRatesPageProps = {
 
 storiesOf("Views / Shipping / Shipping rate", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("create price rate", () => <ShippingZoneRatesPage {...props} />)
   .add("create weight rate", () => (
     <ShippingZoneRatesPage {...props} variant={ShippingMethodTypeEnum.WEIGHT} />

src/shipping/components/ShippingZonesList/ShippingZonesList.tsx

@@ -12,7 +12,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
 import TableHead from "@saleor/components/TableHead";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { ShippingZoneFragment } from "@saleor/graphql";
 import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
@@ -54,11 +54,8 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
   const {
     disabled,
     settings,
-    onNextPage,
-    onPreviousPage,
     onRemove,
     onUpdateListSettings,
-    pageInfo,
     shippingZones,
     isChecked,
     selected,
@@ -118,16 +115,11 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
         </TableHead>
         <TableFooter>
           <TableRow>
-            <TablePagination
+            <TablePaginationWithContext
               colSpan={numberOfColumns}
               settings={settings}
-              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
+              disabled={disabled}
-              onNextPage={onNextPage}
               onUpdateListSettings={onUpdateListSettings}
-              hasPreviousPage={
-                pageInfo && !disabled ? pageInfo.hasPreviousPage : false
-              }
-              onPreviousPage={onPreviousPage}
             />
           </TableRow>
         </TableFooter>

src/shipping/views/RateUpdate.tsx

@@ -25,6 +25,7 @@ import useLocalPaginator, {
 } from "@saleor/hooks/useLocalPaginator";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import { PaginatorContext } from "@saleor/hooks/usePaginator";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import {
   getById,
@@ -107,7 +108,7 @@ export const RateUpdate: React.FC<RateUpdateProps> = ({
     []
   );
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const { pageInfo, ...paginationValues } = paginate(
     rate?.excludedProducts.pageInfo,
     paginationState
   );
@@ -314,7 +315,7 @@ export const RateUpdate: React.FC<RateUpdateProps> = ({
   };
 
   return (
-    <>
+    <PaginatorContext.Provider value={{ ...pageInfo, ...paginationValues }}>
       <WindowTitle title={intl.formatMessage(sectionNames.shipping)} />
       {!!allChannels?.length && (
         <ChannelsAvailabilityDialog
@@ -397,9 +398,6 @@ export const RateUpdate: React.FC<RateUpdateProps> = ({
         selected={listElements.length}
         toggle={toggle}
         toggleAll={toggleAll}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
-        pageInfo={pageInfo}
         toolbar={
           <Button onClick={() => openModal("unassign-product")}>
             <FormattedMessage
@@ -420,7 +418,7 @@ export const RateUpdate: React.FC<RateUpdateProps> = ({
         onSubmit={code => onPostalCodeAssign(code)}
         open={params.action === "add-range"}
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 

src/shipping/views/ShippingZonesList.tsx

@@ -13,7 +13,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages } from "@saleor/intl";
@@ -46,7 +47,6 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
 }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
-  const paginate = usePaginator();
   const shop = useShop();
   const { user } = useUser();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
@@ -126,14 +126,14 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
     }
   });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    maybe(() => data.shippingZones.pageInfo),
+    pageInfo: maybe(() => data.shippingZones.pageInfo),
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <ShippingZonesListPage
         defaultWeightUnit={shop?.defaultWeightUnit}
         settings={settings}
@@ -143,10 +143,7 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
           updateDefaultWeightUnitOpts.loading
         }
         shippingZones={mapEdgesToItems(data?.shippingZones)}
-        pageInfo={pageInfo}
         onUpdateListSettings={updateListSettings}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onRemove={id =>
           openModal("remove", {
             id
@@ -246,7 +243,7 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
           />
         </DialogContentText>
       </ActionDialog>
-    </>
+    </PaginatorContext.Provider>
   );
 };
 ShippingZonesList.displayName = "ShippingZonesList";

src/staff/components/StaffList/StaffList.tsx

@@ -9,7 +9,7 @@ import {
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { StaffListQuery } from "@saleor/graphql";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -82,11 +82,8 @@ const StaffList: React.FC<StaffListProps> = props => {
   const {
     settings,
     disabled,
-    onNextPage,
-    onPreviousPage,
     onUpdateListSettings,
     onSort,
-    pageInfo,
     sort,
     staffMembers
   } = props;
@@ -132,18 +129,11 @@ const StaffList: React.FC<StaffListProps> = props => {
       </TableHead>
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext
             colSpan={numberOfColumns}
+            disabled={disabled}
             settings={settings}
-            hasNextPage={
-              pageInfo && !disabled ? pageInfo.hasNextPage : undefined
-            }
-            onNextPage={onNextPage}
             onUpdateListSettings={onUpdateListSettings}
-            hasPreviousPage={
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : undefined
-            }
-            onPreviousPage={onPreviousPage}
           />
         </TableRow>
       </TableFooter>

src/staff/components/StaffListPage/StaffListPage.stories.tsx

@@ -11,6 +11,7 @@ import { StaffMemberStatus } from "@saleor/graphql";
 import { staffMembers } from "@saleor/staff/fixtures";
 import { StaffListUrlSortField } from "@saleor/staff/urls";
 import Decorator from "@saleor/storybook/Decorator";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -39,6 +40,7 @@ const props: StaffListPageProps = {
 
 storiesOf("Views / Staff / Staff members", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <StaffListPage {...props} />)
   .add("when loading", () => (
     <StaffListPage {...props} disabled={true} staffMembers={undefined} />

src/staff/views/StaffList/StaffList.tsx

@@ -11,7 +11,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
 import usePaginator, {
-  createPaginationState
+  createPaginationState,
+  PaginatorContext
 } from "@saleor/hooks/usePaginator";
 import { commonMessages } from "@saleor/intl";
 import { getStringOrPlaceholder } from "@saleor/misc";
@@ -55,7 +56,6 @@ interface StaffListProps {
 export const StaffList: React.FC<StaffListProps> = ({ params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
-  const paginate = usePaginator();
   const { updateListSettings, settings } = useListSettings(
     ListViews.STAFF_MEMBERS_LIST
   );
@@ -94,11 +94,11 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
     }
   });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    staffQueryData?.staffUsers.pageInfo,
+    pageInfo: staffQueryData?.staffUsers.pageInfo,
     paginationState,
-    params
+    queryString: params
-  );
+  });
 
   const handleSort = createSortHandler(navigate, staffListUrl, params);
 
@@ -167,7 +167,7 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
     });
 
   return (
-    <>
+    <PaginatorContext.Provider value={paginationValues}>
       <StaffListPage
         currentTab={currentTab}
         filterOpts={getFilterOpts(params)}
@@ -182,12 +182,9 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
         disabled={loading || addStaffMemberData.loading || limitOpts.loading}
         limits={limitOpts.data?.shop.limits}
         settings={settings}
-        pageInfo={pageInfo}
         sort={getSortParams(params)}
         staffMembers={mapEdgesToItems(staffQueryData?.staffUsers)}
         onAdd={() => openModal("add")}
-        onNextPage={loadNextPage}
-        onPreviousPage={loadPreviousPage}
         onUpdateListSettings={updateListSettings}
         onSort={handleSort}
       />
@@ -222,7 +219,7 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
         onSubmit={handleTabDelete}
         tabName={getStringOrPlaceholder(tabs[currentTab - 1]?.name)}
       />
-    </>
+    </PaginatorContext.Provider>
   );
 };
 

src/storybook/PaginatorContextDecorator.tsx

@@ -0,0 +1,9 @@
+import { paginatorContextValues } from "@saleor/fixtures";
+import { PaginatorContext } from "@saleor/hooks/usePaginator";
+import React from "react";
+
+export const PaginatorContextDecorator = storyFn => (
+  <PaginatorContext.Provider value={paginatorContextValues}>
+    {storyFn()}
+  </PaginatorContext.Provider>
+);

src/storybook/stories/attributes/AttributeListPage.tsx

@@ -11,6 +11,7 @@ import {
   sortPageProps,
   tabPageProps
 } from "@saleor/fixtures";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -50,6 +51,7 @@ const props: AttributeListPageProps = {
 
 storiesOf("Views / Attributes / Attribute list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <AttributeListPage {...props} />)
   .add("loading", () => (
     <AttributeListPage {...props} attributes={undefined} disabled={true} />

src/storybook/stories/categories/CategoryListPage.tsx

@@ -10,6 +10,7 @@ import {
   sortPageProps,
   tabPageProps
 } from "@saleor/fixtures";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -31,6 +32,7 @@ const categoryTableProps: CategoryTableProps = {
 
 storiesOf("Views / Categories / Category list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <CategoryListPage {...categoryTableProps} />)
   .add("loading", () => (
     <CategoryListPage {...categoryTableProps} categories={undefined} />

src/storybook/stories/categories/CategoryUpdatePage.tsx

@@ -1,5 +1,6 @@
 import placeholderImage from "@assets/images/placeholder255x255.png";
 import { ProductErrorCode } from "@saleor/graphql";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import { storiesOf } from "@storybook/react";
 import React from "react";
@@ -25,13 +26,7 @@ const updateProps: Omit<CategoryUpdatePageProps, "classes"> = {
   onDelete: () => undefined,
   onImageDelete: () => undefined,
   onImageUpload: () => undefined,
-  onNextPage: undefined,
-  onPreviousPage: undefined,
   onSubmit: () => undefined,
-  pageInfo: {
-    hasNextPage: true,
-    hasPreviousPage: true
-  },
   productListToolbar: null,
   products: mapEdgesToItems(category.products),
   saveButtonBarState: "default",
@@ -42,6 +37,7 @@ const updateProps: Omit<CategoryUpdatePageProps, "classes"> = {
 
 storiesOf("Views / Categories / Update category", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <CategoryUpdatePage {...updateProps} />)
   .add("products", () => (
     <CategoryUpdatePage

src/storybook/stories/collections/CollectionDetailsPage.tsx

@@ -2,6 +2,7 @@ import placeholderCollectionImage from "@assets/images/block1.jpg";
 import placeholderProductImage from "@assets/images/placeholder60x60.png";
 import { createCollectionChannelsData } from "@saleor/channels/utils";
 import { CollectionErrorCode } from "@saleor/graphql";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -40,6 +41,7 @@ const props: Omit<CollectionDetailsPageProps, "classes"> = {
 
 storiesOf("Views / Collections / Collection detailsCollection details", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <CollectionDetailsPage {...props} />)
   .add("loading", () => (
     <CollectionDetailsPage {...props} collection={undefined} disabled={true} />

src/storybook/stories/collections/CollectionListPage.tsx

@@ -1,4 +1,5 @@
 import { CollectionListUrlSortField } from "@saleor/collections/urls";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -35,6 +36,7 @@ const props: CollectionListPageProps = {
 
 storiesOf("Views / Collections / Collection list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <CollectionListPage {...props} />)
   .add("loading", () => (
     <CollectionListPage {...props} collections={undefined} disabled={true} />

src/storybook/stories/customers/CustomerListPage.tsx

@@ -1,4 +1,5 @@
 import { CustomerListUrlSortField } from "@saleor/customers/urls";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -55,6 +56,7 @@ const CustomerListPage = props => (
 
 storiesOf("Views / Customers / Customer list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <CustomerListPage {...props} />)
   .add("loading", () => (
     <CustomerListPage {...props} disabled={true} customers={undefined} />

src/storybook/stories/discounts/SaleDetailsPage.tsx

@@ -1,6 +1,7 @@
 import { channelsList } from "@saleor/channels/fixtures";
 import { createSaleChannels } from "@saleor/channels/utils";
 import { DiscountErrorCode } from "@saleor/graphql";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -27,8 +28,6 @@ const props: SaleDetailsPageProps = {
   onChannelsChange: () => undefined,
   onCollectionAssign: () => undefined,
   onCollectionUnassign: () => undefined,
-  onNextPage: () => undefined,
-  onPreviousPage: () => undefined,
   onProductAssign: () => undefined,
   onProductUnassign: () => undefined,
   onVariantAssign: () => undefined,
@@ -37,10 +36,6 @@ const props: SaleDetailsPageProps = {
   onSubmit: () => undefined,
   onTabClick: () => undefined,
   openChannelsModal: () => undefined,
-  pageInfo: {
-    hasNextPage: true,
-    hasPreviousPage: false
-  },
   productListToolbar: null,
   variantListToolbar: null,
   sale,
@@ -51,6 +46,7 @@ const props: SaleDetailsPageProps = {
 
 storiesOf("Views / Discounts / Sale details", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <SaleDetailsPage {...props} />)
   .add("loading", () => (
     <SaleDetailsPage {...props} sale={undefined} disabled={true} />

src/storybook/stories/discounts/SaleListPage.tsx

@@ -1,5 +1,6 @@
 import { SaleListUrlSortField } from "@saleor/discounts/urls";
 import { DiscountStatusEnum, DiscountValueTypeEnum } from "@saleor/graphql";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -59,6 +60,7 @@ const props: SaleListPageProps = {
 
 storiesOf("Views / Discounts / Sale list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <SaleListPage {...props} />)
   .add("loading", () => <SaleListPage {...props} sales={undefined} />)
   .add("no data", () => <SaleListPage {...props} sales={[]} />)

src/storybook/stories/discounts/VoucherDetailsPage.tsx

@@ -1,6 +1,7 @@
 import { channelsList } from "@saleor/channels/fixtures";
 import { createChannelsDataWithDiscountPrice } from "@saleor/channels/utils";
 import { DiscountErrorCode } from "@saleor/graphql";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -48,6 +49,7 @@ const props: VoucherDetailsPageProps = {
 
 storiesOf("Views / Discounts / Voucher details", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <VoucherDetailsPage {...props} />)
   .add("loading", () => (
     <VoucherDetailsPage {...props} disabled={true} voucher={undefined} />

src/storybook/stories/discounts/VoucherListPage.tsx

@@ -1,5 +1,6 @@
 import { VoucherListUrlSortField } from "@saleor/discounts/urls";
 import { DiscountStatusEnum, VoucherDiscountType } from "@saleor/graphql";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -68,6 +69,7 @@ const props: VoucherListPageProps = {
 
 storiesOf("Views / Discounts / Voucher list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <VoucherListPage {...props} />)
   .add("loading", () => <VoucherListPage {...props} vouchers={undefined} />)
   .add("no data", () => <VoucherListPage {...props} vouchers={[]} />)

src/storybook/stories/navigation/MenuListPage.tsx

@@ -1,4 +1,5 @@
 import { MenuListUrlSortField } from "@saleor/navigation/urls";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -27,6 +28,7 @@ const props: MenuListPageProps = {
 
 storiesOf("Views / Navigation / Menu list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <MenuListPage {...props} />)
   .add("loading", () => (
     <MenuListPage {...props} disabled={true} menus={undefined} />

src/storybook/stories/orders/OrderDraftListPage.tsx

@@ -1,4 +1,5 @@
 import { OrderDraftListUrlSortField } from "@saleor/orders/urls";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -49,6 +50,7 @@ const props: OrderDraftListPageProps = {
 
 storiesOf("Views / Orders / Draft order list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <OrderDraftListPage {...props} />)
   .add("loading", () => (
     <OrderDraftListPage {...props} disabled orders={undefined} />

src/storybook/stories/orders/OrderListPage.tsx

@@ -4,6 +4,7 @@ import OrderListPage, {
   OrderListPageProps
 } from "@saleor/orders/components/OrderListPage";
 import { OrderListUrlSortField } from "@saleor/orders/urls";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -83,6 +84,7 @@ const props: OrderListPageProps = {
 
 storiesOf("Views / Orders / Order list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <OrderListPage {...props} />)
   .add("loading", () => (
     <OrderListPage

src/storybook/stories/pages/PageListPage.tsx

@@ -1,4 +1,5 @@
 import { PageListUrlSortField } from "@saleor/pages/urls";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -33,6 +34,7 @@ const props: PageListPageProps = {
 
 storiesOf("Views / Pages / Page list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <PageListPage {...props} />)
   .add("loading", () => (
     <PageListPage {...props} disabled={true} pages={undefined} />

src/storybook/stories/plugins/PluginsListPage.tsx

@@ -1,5 +1,6 @@
 import { PluginConfigurationType } from "@saleor/graphql";
 import { PluginListUrlSortField } from "@saleor/plugins/urls";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -52,6 +53,7 @@ const props: PluginsListPageProps = {
 
 storiesOf("Views / Plugins / Plugin list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <PluginsListPage {...props} />)
   .add("loading", () => (
     <PluginsListPage {...props} disabled={true} plugins={undefined} />

src/storybook/stories/productTypes/ProductTypeListPage.tsx

@@ -1,5 +1,6 @@
 import { ProductTypeConfigurable, ProductTypeEnum } from "@saleor/graphql";
 import { ProductTypeListUrlSortField } from "@saleor/productTypes/urls";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -43,6 +44,7 @@ const props: ProductTypeListPageProps = {
 
 storiesOf("Views / Product types / Product types list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <ProductTypeListPage {...props} />)
   .add("loading", () => (
     <ProductTypeListPage {...props} disabled={true} productTypes={undefined} />

src/storybook/stories/products/ProductListPage.tsx

@@ -4,6 +4,7 @@ import { products as productListFixture } from "@saleor/products/fixtures";
 import { ProductListUrlSortField } from "@saleor/products/urls";
 import { productListFilterOpts } from "@saleor/products/views/ProductList/fixtures";
 import { attributes } from "@saleor/productTypes/fixtures";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { ListViews } from "@saleor/types";
 import { storiesOf } from "@storybook/react";
 import React from "react";
@@ -57,6 +58,7 @@ const props: ProductListPageProps = {
 
 storiesOf("Views / Products / Product list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <ProductListPage {...props} />)
   .add("loading", () => (
     <ProductListPage

src/storybook/stories/shipping/ShippingZonesListPage.tsx

@@ -1,4 +1,5 @@
 import { WeightUnitsEnum } from "@saleor/graphql";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -25,6 +26,7 @@ const props: ShippingZonesListPageProps = {
 
 storiesOf("Views / Shipping / Shipping zones list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => <ShippingZonesListPage {...props} />)
   .add("loading", () => (
     <ShippingZonesListPage

src/storybook/stories/translations/TranslationsEntitiesListPage.tsx

@@ -1,4 +1,5 @@
 import { LanguageCodeEnum } from "@saleor/graphql";
+import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -33,6 +34,7 @@ const props: TranslationsEntitiesListPageProps = {
 
 storiesOf("Views / Translations / Entity list", module)
   .addDecorator(Decorator)
+  .addDecorator(PaginatorContextDecorator)
   .add("default", () => (
     <TranslationsEntitiesListPage {...props}>
       <TranslationsEntitiesList
@@ -50,12 +52,6 @@ storiesOf("Views / Translations / Entity list", module)
           }
         ]}
         getRowHref={() => ""}
-        onNextPage={() => undefined}
-        onPreviousPage={() => undefined}
-        pageInfo={{
-          hasNextPage: true,
-          hasPreviousPage: false
-        }}
       />
     </TranslationsEntitiesListPage>
   ));

src/translations/components/TranslationFields/TranslationFields.tsx

@@ -5,7 +5,7 @@ import CardTitle from "@saleor/components/CardTitle";
 import Grid from "@saleor/components/Grid";
 import Hr from "@saleor/components/Hr";
 import Skeleton from "@saleor/components/Skeleton";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { buttonMessages } from "@saleor/intl";
 import {
@@ -257,20 +257,8 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
             ))}
           </Grid>
           {pagination && (
-            <TablePagination
+            <TablePaginationWithContext
               colSpan={numberOfColumns}
-              hasNextPage={
-                pagination.pageInfo && !disabled
-                  ? pagination.pageInfo.hasNextPage
-                  : false
-              }
-              onNextPage={pagination.onNextPage}
-              hasPreviousPage={
-                pagination.pageInfo && !disabled
-                  ? pagination.pageInfo.hasPreviousPage
-                  : false
-              }
-              onPreviousPage={pagination.onPreviousPage}
               settings={pagination.settings}
               onUpdateListSettings={pagination.onUpdateListSettings}
               component="div"

src/translations/components/TranslationsAttributesPage/TranslationsAttributesPage.tsx

@@ -29,12 +29,6 @@ export interface TranslationsAttributesPageProps
   data: AttributeTranslationDetailsFragment;
   settings?: ListSettings;
   onUpdateListSettings?: ListSettingsUpdate;
-  pageInfo: {
-    hasNextPage: boolean;
-    hasPreviousPage: boolean;
-  };
-  onNextPage: () => void;
-  onPreviousPage: () => void;
 }
 
 export const fieldNames = {
@@ -55,10 +49,7 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
   onEdit,
   onSubmit,
   settings,
-  onUpdateListSettings,
+  onUpdateListSettings
-  pageInfo,
-  onNextPage,
-  onPreviousPage
 }) => {
   const intl = useIntl();
 
@@ -134,10 +125,7 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
           richTextResetKey={languageCode}
           pagination={{
             settings,
-            onUpdateListSettings,
+            onUpdateListSettings
-            pageInfo,
-            onNextPage,
-            onPreviousPage
           }}
           onEdit={onEdit}
           onDiscard={onDiscard}

src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx

@@ -7,7 +7,7 @@ import {
 } from "@material-ui/core";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
-import TablePagination from "@saleor/components/TablePagination";
+import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
@@ -46,14 +46,7 @@ const useStyles = makeStyles(
   { name: "TranslationsEntitiesList" }
 );
 const TranslationsEntitiesList: React.FC<TranslationsEntitiesListProps> = props => {
-  const {
+  const { disabled, entities, getRowHref } = props;
-    disabled,
-    entities,
-    onNextPage,
-    onPreviousPage,
-    getRowHref,
-    pageInfo
-  } = props;
 
   const classes = useStyles(props);
   const intl = useIntl();
@@ -79,17 +72,7 @@ const TranslationsEntitiesList: React.FC<TranslationsEntitiesListProps> = props
       </TableHead>
       <TableFooter>
         <TableRow>
-          <TablePagination
+          <TablePaginationWithContext colSpan={2} disabled={disabled} />
-            colSpan={2}
-            hasNextPage={
-              pageInfo && !disabled ? pageInfo.hasNextPage : undefined
-            }
-            onNextPage={onNextPage}
-            hasPreviousPage={
-              pageInfo && !disabled ? pageInfo.hasPreviousPage : undefined
-            }
-            onPreviousPage={onPreviousPage}
-          />
         </TableRow>
       </TableFooter>
       <TableBody>

src/translations/views/EntityLists/TranslationsAttributeList.tsx

@@ -1,5 +1,5 @@
 import { useAttributeTranslationsQuery } from "@saleor/graphql";
-import usePaginator from "@saleor/hooks/usePaginator";
+import usePaginator, { PaginatorContext } from "@saleor/hooks/usePaginator";
 import TranslationsEntitiesList from "@saleor/translations/components/TranslationsEntitiesList";
 import {
   languageEntityUrl,
@@ -14,20 +14,19 @@ const TranslationsAttributeList: React.FC<TranslationsEntityListProps> = ({
   params,
   variables
 }) => {
-  const paginate = usePaginator();
-
   const { data, loading } = useAttributeTranslationsQuery({
     displayLoader: true,
     variables
   });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    data?.translations?.pageInfo,
+    pageInfo: data?.translations?.pageInfo,
-    variables,
+    paginationState: variables,
-    params
+    queryString: params
-  );
+  });
 
   return (
+    <PaginatorContext.Provider value={paginationValues}>
       <TranslationsEntitiesList
         disabled={loading}
         entities={mapEdgesToItems(data?.translations)?.map(
@@ -45,10 +44,8 @@ const TranslationsAttributeList: React.FC<TranslationsEntityListProps> = ({
             id
           )
         }
-      onNextPage={loadNextPage}
-      onPreviousPage={loadPreviousPage}
-      pageInfo={pageInfo}
       />
+    </PaginatorContext.Provider>
   );
 };
 

src/translations/views/EntityLists/TranslationsCategoryList.tsx

@@ -1,5 +1,5 @@
 import { useCategoryTranslationsQuery } from "@saleor/graphql";
-import usePaginator from "@saleor/hooks/usePaginator";
+import usePaginator, { PaginatorContext } from "@saleor/hooks/usePaginator";
 import TranslationsEntitiesList from "@saleor/translations/components/TranslationsEntitiesList";
 import {
   languageEntityUrl,
@@ -15,20 +15,19 @@ const TranslationsCategoryList: React.FC<TranslationsEntityListProps> = ({
   params,
   variables
 }) => {
-  const paginate = usePaginator();
-
   const { data, loading } = useCategoryTranslationsQuery({
     displayLoader: true,
     variables
   });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    data?.translations?.pageInfo,
+    pageInfo: data?.translations?.pageInfo,
-    variables,
+    paginationState: variables,
-    params
+    queryString: params
-  );
+  });
 
   return (
+    <PaginatorContext.Provider value={paginationValues}>
       <TranslationsEntitiesList
         disabled={loading}
         entities={mapEdgesToItems(data?.translations)?.map(
@@ -54,10 +53,8 @@ const TranslationsCategoryList: React.FC<TranslationsEntityListProps> = ({
             id
           )
         }
-      onNextPage={loadNextPage}
-      onPreviousPage={loadPreviousPage}
-      pageInfo={pageInfo}
       />
+    </PaginatorContext.Provider>
   );
 };
 

src/translations/views/EntityLists/TranslationsCollectionList.tsx

@@ -1,5 +1,5 @@
 import { useCollectionTranslationsQuery } from "@saleor/graphql";
-import usePaginator from "@saleor/hooks/usePaginator";
+import usePaginator, { PaginatorContext } from "@saleor/hooks/usePaginator";
 import TranslationsEntitiesList from "@saleor/translations/components/TranslationsEntitiesList";
 import {
   languageEntityUrl,
@@ -15,20 +15,19 @@ const TranslationsCollectionList: React.FC<TranslationsEntityListProps> = ({
   params,
   variables
 }) => {
-  const paginate = usePaginator();
-
   const { data, loading } = useCollectionTranslationsQuery({
     displayLoader: true,
     variables
   });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    data?.translations?.pageInfo,
+    pageInfo: data?.translations?.pageInfo,
-    variables,
+    paginationState: variables,
-    params
+    queryString: params
-  );
+  });
 
   return (
+    <PaginatorContext.Provider value={paginationValues}>
       <TranslationsEntitiesList
         disabled={loading}
         entities={mapEdgesToItems(data?.translations)?.map(
@@ -54,10 +53,8 @@ const TranslationsCollectionList: React.FC<TranslationsEntityListProps> = ({
             id
           )
         }
-      onNextPage={loadNextPage}
-      onPreviousPage={loadPreviousPage}
-      pageInfo={pageInfo}
       />
+    </PaginatorContext.Provider>
   );
 };
 

src/translations/views/EntityLists/TranslationsPageList.tsx

@@ -1,5 +1,5 @@
 import { usePageTranslationsQuery } from "@saleor/graphql";
-import usePaginator from "@saleor/hooks/usePaginator";
+import usePaginator, { PaginatorContext } from "@saleor/hooks/usePaginator";
 import TranslationsEntitiesList from "@saleor/translations/components/TranslationsEntitiesList";
 import {
   languageEntityUrl,
@@ -15,20 +15,19 @@ const TranslationsPageList: React.FC<TranslationsEntityListProps> = ({
   params,
   variables
 }) => {
-  const paginate = usePaginator();
-
   const { data, loading } = usePageTranslationsQuery({
     displayLoader: true,
     variables
   });
 
-  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+  const paginationValues = usePaginator({
-    data?.translations?.pageInfo,
+    pageInfo: data?.translations?.pageInfo,
-    variables,
+    paginationState: variables,
-    params
+    queryString: params
-  );
+  });
 
   return (
+    <PaginatorContext.Provider value={paginationValues}>
       <TranslationsEntitiesList
         disabled={loading}
         entities={mapEdgesToItems(data?.translations)?.map(
@@ -50,10 +49,8 @@ const TranslationsPageList: React.FC<TranslationsEntityListProps> = ({
         getRowHref={id =>
           languageEntityUrl(variables.language, TranslatableEntities.pages, id)
         }
-      onNextPage={loadNextPage}
-      onPreviousPage={loadPreviousPage}
-      pageInfo={pageInfo}
       />
+    </PaginatorContext.Provider>
   );
 };