Fix auto scroll (#1644)

src/categories/index.tsx

@@ -15,7 +15,7 @@ import {
   CategoryUrlQueryParams
 } from "./urls";
 import { CategoryCreateView } from "./views/CategoryCreate";
-import CategoryDetailsView, { getActiveTab } from "./views/CategoryDetails";
+import CategoryDetailsView from "./views/CategoryDetails";
 import CategoryListComponent from "./views/CategoryList";
 
 interface CategoryDetailsRouteParams {
@@ -25,10 +25,7 @@ const CategoryDetails: React.FC<RouteComponentProps<
   CategoryDetailsRouteParams
 >> = ({ location, match }) => {
   const qs = parseQs(location.search.substr(1));
-  const params: CategoryUrlQueryParams = {
+  const params: CategoryUrlQueryParams = qs;
-    ...qs,
-    activeTab: getActiveTab(qs.activeTab)
-  };
 
   return (
     <CategoryDetailsView

src/categories/urls.ts

@@ -10,7 +10,6 @@ import {
   Sort,
   TabActionDialog
 } from "../types";
-import { CategoryPageTab } from "./components/CategoryUpdatePage";
 
 const categorySectionUrl = "/categories/";
 
@@ -40,10 +39,7 @@ export type CategoryUrlDialog =
   | "delete"
   | "delete-categories"
   | "delete-products";
-export type CategoryUrlQueryParams = BulkAction &
+export type CategoryUrlQueryParams = BulkAction & Dialog<CategoryUrlDialog>;
-  Dialog<CategoryUrlDialog> &
-  Pagination &
-  ActiveTab<CategoryPageTab>;
 export const categoryUrl = (id: string, params?: CategoryUrlQueryParams) =>
   categoryPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
 

src/categories/views/CategoryDetails.tsx

@@ -4,11 +4,11 @@ import ActionDialog from "@saleor/components/ActionDialog";
 import NotFoundPage from "@saleor/components/NotFoundPage";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useBulkActions from "@saleor/hooks/useBulkActions";
+import useLocalPaginator, {
+  useSectionLocalPaginationState
+} from "@saleor/hooks/useLocalPaginator";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import usePaginator, {
-  createPaginationState
-} from "@saleor/hooks/usePaginator";
 import { commonMessages, errorMessages } from "@saleor/intl";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
@@ -18,7 +18,7 @@ import {
   usePrivateMetadataUpdate
 } from "@saleor/utils/metadata/updateMetadata";
 import { getParsedDataForJsonStringField } from "@saleor/utils/richText/misc";
-import React from "react";
+import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { PAGINATE_BY } from "../../config";
@@ -65,7 +65,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
 }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
-  const paginate = usePaginator();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
   );
@@ -73,7 +72,19 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
   const [updateMetadata] = useMetadataUpdate({});
   const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
-  const paginationState = createPaginationState(PAGINATE_BY, params);
+  const [activeTab, setActiveTab] = useState<CategoryPageTab>(
+    CategoryPageTab.categories
+  );
+  const [paginationState, setPaginationState] = useSectionLocalPaginationState(
+    PAGINATE_BY,
+    activeTab
+  );
+  const paginate = useLocalPaginator(setPaginationState);
+  const changeTab = (tab: CategoryPageTab) => {
+    reset();
+    setActiveTab(tab);
+  };
+
   const { data, loading, refetch } = useCategoryDetailsQuery({
     displayLoader: true,
     variables: { ...paginationState, id }
@@ -155,26 +166,16 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
     }
   });
 
-  const changeTab = (tabName: CategoryPageTab) => {
-    reset();
-    navigate(
-      categoryUrl(id, {
-        activeTab: tabName
-      })
-    );
-  };
-
   const [openModal, closeModal] = createDialogActionHandlers<
     CategoryUrlDialog,
     CategoryUrlQueryParams
   >(navigate, params => categoryUrl(id, params), params);
 
   const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
-    params.activeTab === CategoryPageTab.categories
+    activeTab === CategoryPageTab.categories
       ? maybe(() => data.category.children.pageInfo)
       : maybe(() => data.category.products.pageInfo),
-    paginationState,
+    paginationState
-    params
   );
 
   const handleUpdate = async (formData: CategoryUpdateData) => {
@@ -208,7 +209,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
       <WindowTitle title={maybe(() => data.category.name)} />
       <CategoryUpdatePage
         changeTab={changeTab}
-        currentTab={params.activeTab}
+        currentTab={activeTab}
         category={maybe(() => data.category)}
         disabled={loading}
         errors={updateResult.data?.categoryUpdate.errors || []}

src/collections/urls.ts

@@ -44,9 +44,7 @@ export type CollectionUrlDialog =
   | "assign"
   | "unassign"
   | ChannelsAction;
-export type CollectionUrlQueryParams = BulkAction &
+export type CollectionUrlQueryParams = BulkAction & Dialog<CollectionUrlDialog>;
-  Pagination &
-  Dialog<CollectionUrlDialog>;
 export type CollectionCreateUrlQueryParams = Dialog<ChannelsAction>;
 export const collectionUrl = (id: string, params?: CollectionUrlQueryParams) =>
   collectionPath(encodeURIComponent(id)) + "?" + stringifyQs(params);

src/collections/views/CollectionDetails.tsx

@@ -12,12 +12,12 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
 import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "@saleor/config";
 import useBulkActions from "@saleor/hooks/useBulkActions";
 import useChannels from "@saleor/hooks/useChannels";
+import useLocalPaginator, {
+  useLocalPaginationState
+} from "@saleor/hooks/useLocalPaginator";
 import useLocalStorage from "@saleor/hooks/useLocalStorage";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import usePaginator, {
-  createPaginationState
-} from "@saleor/hooks/usePaginator";
 import { commonMessages, errorMessages } from "@saleor/intl";
 import useProductSearch from "@saleor/searches/useProductSearch";
 import { arrayDiff } from "@saleor/utils/arrays";
@@ -67,7 +67,6 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
   );
-  const paginate = usePaginator();
   const intl = useIntl();
   const { search, loadMore, result } = useProductSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
@@ -158,7 +157,11 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
     }
   });
 
-  const paginationState = createPaginationState(PAGINATE_BY, params);
+  const [paginationState, setPaginationState] = useLocalPaginationState(
+    PAGINATE_BY
+  );
+  const paginate = useLocalPaginator(setPaginationState);
+
   const handleBack = () => navigate(collectionListUrl());
 
   const [selectedChannel] = useLocalStorage("collectionListChannel", "");
@@ -255,8 +258,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
 
         const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
           data?.collection?.products?.pageInfo,
-          paginationState,
+          paginationState
-          params
         );
 
         return (

src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx

@@ -59,16 +59,6 @@ export enum SaleDetailsPageTab {
   variants = "variants"
 }
 
-export function saleDetailsPageTab(tab: string): SaleDetailsPageTab {
-  return tab === SaleDetailsPageTab.products
-    ? SaleDetailsPageTab.products
-    : tab === SaleDetailsPageTab.collections
-    ? SaleDetailsPageTab.collections
-    : tab === SaleDetailsPageTab.categories
-    ? SaleDetailsPageTab.categories
-    : SaleDetailsPageTab.variants;
-}
-
 export interface SaleDetailsPageProps
   extends Pick<ListProps, Exclude<keyof ListProps, "onRowClick">>,
     TabListActions<

src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx

@@ -52,14 +52,6 @@ export enum VoucherDetailsPageTab {
   products = "products"
 }
 
-export function voucherDetailsPageTab(tab: string): VoucherDetailsPageTab {
-  return tab === VoucherDetailsPageTab.products
-    ? VoucherDetailsPageTab.products
-    : tab === VoucherDetailsPageTab.collections
-    ? VoucherDetailsPageTab.collections
-    : VoucherDetailsPageTab.categories;
-}
-
 export interface VoucherDetailsPageFormData extends MetadataFormData {
   applyOncePerCustomer: boolean;
   applyOncePerOrder: boolean;

src/discounts/index.tsx

@@ -6,8 +6,6 @@ import { useIntl } from "react-intl";
 import { Route, RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
-import { saleDetailsPageTab } from "./components/SaleDetailsPage";
-import { voucherDetailsPageTab } from "./components/VoucherDetailsPage";
 import {
   saleAddPath,
   SaleCreateUrlQueryParams,
@@ -41,11 +39,8 @@ const SaleDetailsView: React.FC<RouteComponentProps<{ id: string }>> = ({
   match,
   location
 }) => {
-  const { activeTab, ...qs } = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1));
-  const params: SaleUrlQueryParams = {
+  const params: SaleUrlQueryParams = qs;
-    ...qs,
-    activeTab: saleDetailsPageTab(activeTab)
-  };
 
   return (
     <SaleDetailsViewComponent
@@ -76,11 +71,9 @@ const VoucherDetailsView: React.FC<RouteComponentProps<{ id: string }>> = ({
   match,
   location
 }) => {
-  const { activeTab, ...qs } = parseQs(location.search.substr(1));
+  const qs = parseQs(location.search.substr(1));
-  const params: VoucherUrlQueryParams = {
+  const params: VoucherUrlQueryParams = qs;
-    ...qs,
+
-    activeTab: voucherDetailsPageTab(activeTab)
-  };
   return (
     <VoucherDetailsViewComponent
       id={decodeURIComponent(match.params.id)}

src/discounts/urls.ts

@@ -12,8 +12,6 @@ import {
   Sort,
   TabActionDialog
 } from "../types";
-import { SaleDetailsPageTab } from "./components/SaleDetailsPage";
-import { VoucherDetailsPageTab } from "./components/VoucherDetailsPage";
 
 export const discountSection = "/discounts/";
 
@@ -60,10 +58,7 @@ export type SaleUrlDialog =
   | "unassign-variant"
   | "remove"
   | ChannelsAction;
-export type SaleUrlQueryParams = Pagination &
+export type SaleUrlQueryParams = BulkAction & Dialog<SaleUrlDialog>;
-  BulkAction &
-  Dialog<SaleUrlDialog> &
-  ActiveTab<SaleDetailsPageTab>;
 export type SaleCreateUrlQueryParams = Dialog<ChannelsAction>;
 export const saleUrl = (id: string, params?: SaleUrlQueryParams) =>
   salePath(encodeURIComponent(id)) + "?" + stringifyQs(params);
@@ -117,10 +112,7 @@ export type VoucherUrlDialog =
   | "unassign-product"
   | "remove"
   | ChannelsAction;
-export type VoucherUrlQueryParams = Pagination &
+export type VoucherUrlQueryParams = BulkAction & Dialog<VoucherUrlDialog>;
-  BulkAction &
-  Dialog<VoucherUrlDialog> &
-  ActiveTab<VoucherDetailsPageTab>;
 export type VoucherCreateUrlQueryParams = Dialog<ChannelsAction>;
 export const voucherUrl = (id: string, params?: VoucherUrlQueryParams) =>
   voucherPath(encodeURIComponent(id)) + "?" + stringifyQs(params);

src/discounts/views/SaleDetails/SaleDetails.tsx

@@ -37,12 +37,12 @@ import {
 } from "@saleor/discounts/urls";
 import useBulkActions from "@saleor/hooks/useBulkActions";
 import useChannels from "@saleor/hooks/useChannels";
+import useLocalPaginator, {
+  useSectionLocalPaginationState
+} from "@saleor/hooks/useLocalPaginator";
 import useLocalStorage from "@saleor/hooks/useLocalStorage";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import usePaginator, {
-  createPaginationState
-} from "@saleor/hooks/usePaginator";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { productUrl, productVariantEditPath } from "@saleor/products/urls";
@@ -56,7 +56,7 @@ import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
 } from "@saleor/utils/metadata/updateMetadata";
-import React from "react";
+import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { createUpdateHandler } from "./handlers";
@@ -71,7 +71,6 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
   const [updateMetadata] = useMetadataUpdate({});
   const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
   const navigate = useNavigator();
-  const paginate = usePaginator();
   const notify = useNotifier();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
     params.ids
@@ -101,14 +100,17 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
 
   const { availableChannels } = useAppChannel(false);
 
-  const paginationState = createPaginationState(PAGINATE_BY, params);
+  const [activeTab, setActiveTab] = useState<SaleDetailsPageTab>(
+    SaleDetailsPageTab.categories
+  );
+  const [paginationState, setPaginationState] = useSectionLocalPaginationState(
+    PAGINATE_BY,
+    activeTab
+  );
+  const paginate = useLocalPaginator(setPaginationState);
   const changeTab = (tab: SaleDetailsPageTab) => {
     reset();
-    navigate(
+    setActiveTab(tab);
-      saleUrl(id, {
-        activeTab: tab
-      })
-    );
   };
 
   const { data, loading } = useSaleDetails({
@@ -210,11 +212,11 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                   <TypedSaleDelete onCompleted={handleSaleDelete}>
                     {(saleDelete, saleDeleteOpts) => {
                       const tabPageInfo =
-                        params.activeTab === SaleDetailsPageTab.categories
+                        activeTab === SaleDetailsPageTab.categories
                           ? maybe(() => data.sale.categories.pageInfo)
-                          : params.activeTab === SaleDetailsPageTab.collections
+                          : activeTab === SaleDetailsPageTab.collections
                           ? maybe(() => data.sale.collections.pageInfo)
-                          : params.activeTab === SaleDetailsPageTab.products
+                          : activeTab === SaleDetailsPageTab.products
                           ? maybe(() => data.sale.products.pageInfo)
                           : maybe(() => data.sale.variants.pageInfo);
 
@@ -266,7 +268,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                         loadNextPage,
                         loadPreviousPage,
                         pageInfo
-                      } = paginate(tabPageInfo, paginationState, params);
+                      } = paginate(tabPageInfo, paginationState);
 
                       const handleUpdate = createUpdateHandler(
                         data?.sale,
@@ -335,7 +337,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                               navigate(
                                 productVariantEditPath(productId, variantId)
                               )}
-                            activeTab={params.activeTab}
+                            activeTab={activeTab}
                             onBack={() => navigate(saleListUrl())}
                             onTabClick={changeTab}
                             onSubmit={handleSubmit}

src/discounts/views/VoucherDetails/VoucherDetails.tsx

@@ -36,11 +36,11 @@ import {
 } from "@saleor/discounts/urls";
 import useBulkActions from "@saleor/hooks/useBulkActions";
 import useChannels from "@saleor/hooks/useChannels";
+import useLocalPaginator, {
+  useSectionLocalPaginationState
+} from "@saleor/hooks/useLocalPaginator";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import usePaginator, {
-  createPaginationState
-} from "@saleor/hooks/usePaginator";
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
@@ -54,7 +54,7 @@ import {
   useMetadataUpdate,
   usePrivateMetadataUpdate
 } from "@saleor/utils/metadata/updateMetadata";
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { categoryUrl } from "../../../categories/urls";
@@ -73,7 +73,6 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
   params
 }) => {
   const navigate = useNavigator();
-  const paginate = usePaginator();
   const notify = useNotifier();
   const shop = useShop();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
@@ -104,14 +103,17 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
   const [updateMetadata] = useMetadataUpdate({});
   const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
-  const paginationState = createPaginationState(PAGINATE_BY, params);
+  const [activeTab, setActiveTab] = useState<VoucherDetailsPageTab>(
+    VoucherDetailsPageTab.categories
+  );
+  const [paginationState, setPaginationState] = useSectionLocalPaginationState(
+    PAGINATE_BY,
+    activeTab
+  );
+  const paginate = useLocalPaginator(setPaginationState);
   const changeTab = (tab: VoucherDetailsPageTab) => {
     reset();
-    navigate(
+    setActiveTab(tab);
-      voucherUrl(id, {
-        activeTab: tab
-      })
-    );
   };
 
   const { data, loading } = useVoucherDetails({
@@ -246,10 +248,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                       );
 
                       const tabPageInfo =
-                        params.activeTab === VoucherDetailsPageTab.categories
+                        activeTab === VoucherDetailsPageTab.categories
                           ? maybe(() => data.voucher.categories.pageInfo)
-                          : params.activeTab ===
+                          : activeTab === VoucherDetailsPageTab.collections
-                            VoucherDetailsPageTab.collections
                           ? maybe(() => data.voucher.collections.pageInfo)
                           : maybe(() => data.voucher.products.pageInfo);
 
@@ -290,7 +291,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                         loadNextPage,
                         loadPreviousPage,
                         pageInfo
-                      } = paginate(tabPageInfo, paginationState, params);
+                      } = paginate(tabPageInfo, paginationState);
 
                       return (
                         <>
@@ -379,7 +380,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                             }
                             onProductClick={id => () =>
                               navigate(productUrl(id))}
-                            activeTab={params.activeTab}
+                            activeTab={activeTab}
                             onBack={() => navigate(voucherListUrl())}
                             onTabClick={changeTab}
                             onSubmit={handleSubmit}

src/hooks/useLocalPaginator.ts

@@ -14,6 +14,11 @@ export interface PaginationState {
   last?: number;
 }
 
+/**
+ * Local pagination state.
+ * @param paginateBy Number of items per page.
+ * @returns Pagination state and setter.
+ */
 export function useLocalPaginationState(
   paginateBy: number
 ): [PaginationState, (paginationState: PaginationState) => void] {
@@ -46,6 +51,39 @@ export function useLocalPaginationState(
   return [state, setPaginationState];
 }
 
+/**
+ * Local pagination state persisted as long as section is not changed.
+ * @param paginateBy Number of items per page.
+ * @param section Section name. When changed, pagination state is reset.
+ * @returns Pagination state and setter.
+ */
+export function useSectionLocalPaginationState(
+  paginateBy: number,
+  section: string
+): [PaginationState, (paginationState: PaginationState) => void] {
+  const [paginationSection, setPaginationSection] = useState(section);
+  const [paginationState, setPaginationState] = useLocalPaginationState(
+    paginateBy
+  );
+
+  useEffect(() => {
+    if (section !== paginationSection) {
+      setPaginationState({});
+    }
+  }, [section]);
+
+  useEffect(() => {
+    if (section !== paginationSection) {
+      setPaginationSection(section);
+    }
+  }, [paginationState]);
+
+  return [
+    section === paginationSection ? paginationState : {},
+    setPaginationState
+  ];
+}
+
 function useLocalPaginator(
   setPaginationState: (paginationState: PaginationState) => void
 ) {

src/hooks/useNavigator.ts

@@ -16,7 +16,7 @@ function useNavigator(): UseNavigatorResult {
 
   return (
     url: string,
-    { replace = false, preserveQs = false, resetScroll = true } = {}
+    { replace = false, preserveQs = false, resetScroll = false } = {}
   ) => {
     const targetUrl = preserveQs ? url + search : url;
     if (replace) {

src/hooks/usePaginator.ts

@@ -52,7 +52,7 @@ function usePaginator() {
             after: pageInfo.endCursor,
             before: undefined
           }),
-        { replace: true }
+        { replace: true, resetScroll: true }
       );
 
     const loadPreviousPage = () =>
@@ -63,7 +63,7 @@ function usePaginator() {
             after: undefined,
             before: pageInfo.startCursor
           }),
-        { replace: true }
+        { replace: true, resetScroll: true }
       );
 
     const newPageInfo = pageInfo

src/shipping/urls.ts

@@ -34,8 +34,7 @@ export type ShippingZoneUrlQueryParams = Dialog<ShippingZoneUrlDialog> &
   SingleAction &
   Partial<{
     type: ShippingMethodTypeEnum;
-  }> &
+  }>;
-  Pagination;
 export const shippingZoneUrl = (
   id: string,
   params?: ShippingZoneUrlQueryParams
@@ -50,8 +49,7 @@ export type ShippingRateUrlDialog =
 
 export type ShippingRateUrlQueryParams = Dialog<ShippingRateUrlDialog> &
   SingleAction &
-  BulkAction &
+  BulkAction;
-  Pagination;
 export type ShippingRateCreateUrlDialog = ZipCodeRangeActions | ChannelsAction;
 export type ShippingRateCreateUrlQueryParams = Dialog<
   ShippingRateCreateUrlDialog

src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx

@@ -9,11 +9,11 @@ import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
 import { PAGINATE_BY } from "@saleor/config";
 import useBulkActions from "@saleor/hooks/useBulkActions";
 import useChannels from "@saleor/hooks/useChannels";
+import useLocalPaginator, {
+  useLocalPaginationState
+} from "@saleor/hooks/useLocalPaginator";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import usePaginator, {
-  createPaginationState
-} from "@saleor/hooks/usePaginator";
 import { sectionNames } from "@saleor/intl";
 import { commonMessages } from "@saleor/intl";
 import {
@@ -80,9 +80,11 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
-  const paginate = usePaginator();
 
-  const paginationState = createPaginationState(PAGINATE_BY, params);
+  const [paginationState, setPaginationState] = useLocalPaginationState(
+    PAGINATE_BY
+  );
+  const paginate = useLocalPaginator(setPaginationState);
 
   const { data, loading, refetch } = useShippingZone({
     displayLoader: true,
@@ -110,8 +112,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
 
   const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
     rate?.excludedProducts.pageInfo,
-    paginationState,
+    paginationState
-    params
   );
 
   const [

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -4,9 +4,9 @@ import useAppChannel from "@saleor/components/AppLayout/AppChannelContext";
 import NotFoundPage from "@saleor/components/NotFoundPage";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
 import { PAGINATE_BY } from "@saleor/config";
+import { useLocalPaginationState } from "@saleor/hooks/useLocalPaginator";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import { createPaginationState } from "@saleor/hooks/usePaginator";
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages } from "@saleor/intl";
 import { getById } from "@saleor/orders/components/OrderReturnPage/utils";
@@ -61,7 +61,7 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
   const intl = useIntl();
   const shop = useShop();
 
-  const paginationState = createPaginationState(PAGINATE_BY, params);
+  const [paginationState] = useLocalPaginationState(PAGINATE_BY);
 
   const { result: searchWarehousesOpts, loadMore, search } = useWarehouseSearch(
     {

src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx

@@ -9,11 +9,11 @@ import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
 import { PAGINATE_BY } from "@saleor/config";
 import useBulkActions from "@saleor/hooks/useBulkActions";
 import useChannels from "@saleor/hooks/useChannels";
+import useLocalPaginator, {
+  useLocalPaginationState
+} from "@saleor/hooks/useLocalPaginator";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import usePaginator, {
-  createPaginationState
-} from "@saleor/hooks/usePaginator";
 import { sectionNames } from "@saleor/intl";
 import { commonMessages } from "@saleor/intl";
 import {
@@ -80,9 +80,11 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
-  const paginate = usePaginator();
 
-  const paginationState = createPaginationState(PAGINATE_BY, params);
+  const [paginationState, setPaginationState] = useLocalPaginationState(
+    PAGINATE_BY
+  );
+  const paginate = useLocalPaginator(setPaginationState);
 
   const { data, loading, refetch } = useShippingZone({
     displayLoader: true,
@@ -159,8 +161,7 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
 
   const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
     rate?.excludedProducts.pageInfo,
-    paginationState,
+    paginationState
-    params
   );
 
   const [