diff --git a/src/categories/index.tsx b/src/categories/index.tsx index 3de1ea6fc..8e120e14a 100644 --- a/src/categories/index.tsx +++ b/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> = ({ location, match }) => { const qs = parseQs(location.search.substr(1)); - const params: CategoryUrlQueryParams = { - ...qs, - activeTab: getActiveTab(qs.activeTab) - }; + const params: CategoryUrlQueryParams = qs; return ( & - Pagination & - ActiveTab; +export type CategoryUrlQueryParams = BulkAction & Dialog; export const categoryUrl = (id: string, params?: CategoryUrlQueryParams) => categoryPath(encodeURIComponent(id)) + "?" + stringifyQs(params); diff --git a/src/categories/views/CategoryDetails.tsx b/src/categories/views/CategoryDetails.tsx index 169c314f4..4ab7abc07 100644 --- a/src/categories/views/CategoryDetails.tsx +++ b/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 = ({ }) => { 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 = ({ const [updateMetadata] = useMetadataUpdate({}); const [updatePrivateMetadata] = usePrivateMetadataUpdate({}); - const paginationState = createPaginationState(PAGINATE_BY, params); + const [activeTab, setActiveTab] = useState( + 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 = ({ } }); - 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, - params + paginationState ); const handleUpdate = async (formData: CategoryUpdateData) => { @@ -208,7 +209,7 @@ export const CategoryDetails: React.FC = ({ data.category.name)} /> data.category)} disabled={loading} errors={updateResult.data?.categoryUpdate.errors || []} diff --git a/src/collections/urls.ts b/src/collections/urls.ts index d6e1a05e8..0fbab26c8 100644 --- a/src/collections/urls.ts +++ b/src/collections/urls.ts @@ -44,9 +44,7 @@ export type CollectionUrlDialog = | "assign" | "unassign" | ChannelsAction; -export type CollectionUrlQueryParams = BulkAction & - Pagination & - Dialog; +export type CollectionUrlQueryParams = BulkAction & Dialog; export type CollectionCreateUrlQueryParams = Dialog; export const collectionUrl = (id: string, params?: CollectionUrlQueryParams) => collectionPath(encodeURIComponent(id)) + "?" + stringifyQs(params); diff --git a/src/collections/views/CollectionDetails.tsx b/src/collections/views/CollectionDetails.tsx index d4e4c5266..1fd0502de 100644 --- a/src/collections/views/CollectionDetails.tsx +++ b/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 = ({ 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 = ({ } }); - 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 = ({ const { loadNextPage, loadPreviousPage, pageInfo } = paginate( data?.collection?.products?.pageInfo, - paginationState, - params + paginationState ); return ( diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx index 46d499ea1..d7cbb3daf 100644 --- a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx +++ b/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>, TabListActions< diff --git a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx index b73cf5162..6e1e86c75 100644 --- a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx +++ b/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; diff --git a/src/discounts/index.tsx b/src/discounts/index.tsx index 98f7e5960..9e57c9898 100644 --- a/src/discounts/index.tsx +++ b/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> = ({ match, location }) => { - const { activeTab, ...qs } = parseQs(location.search.substr(1)); - const params: SaleUrlQueryParams = { - ...qs, - activeTab: saleDetailsPageTab(activeTab) - }; + const qs = parseQs(location.search.substr(1)); + const params: SaleUrlQueryParams = qs; return ( > = ({ match, location }) => { - const { activeTab, ...qs } = parseQs(location.search.substr(1)); - const params: VoucherUrlQueryParams = { - ...qs, - activeTab: voucherDetailsPageTab(activeTab) - }; + const qs = parseQs(location.search.substr(1)); + const params: VoucherUrlQueryParams = qs; + return ( & - ActiveTab; +export type SaleUrlQueryParams = BulkAction & Dialog; export type SaleCreateUrlQueryParams = Dialog; 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 & - BulkAction & - Dialog & - ActiveTab; +export type VoucherUrlQueryParams = BulkAction & Dialog; export type VoucherCreateUrlQueryParams = Dialog; export const voucherUrl = (id: string, params?: VoucherUrlQueryParams) => voucherPath(encodeURIComponent(id)) + "?" + stringifyQs(params); diff --git a/src/discounts/views/SaleDetails/SaleDetails.tsx b/src/discounts/views/SaleDetails/SaleDetails.tsx index c08e679f0..2ebe0f1d6 100644 --- a/src/discounts/views/SaleDetails/SaleDetails.tsx +++ b/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 = ({ 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 = ({ id, params }) => { const { availableChannels } = useAppChannel(false); - const paginationState = createPaginationState(PAGINATE_BY, params); + const [activeTab, setActiveTab] = useState( + SaleDetailsPageTab.categories + ); + const [paginationState, setPaginationState] = useSectionLocalPaginationState( + PAGINATE_BY, + activeTab + ); + const paginate = useLocalPaginator(setPaginationState); const changeTab = (tab: SaleDetailsPageTab) => { reset(); - navigate( - saleUrl(id, { - activeTab: tab - }) - ); + setActiveTab(tab); }; const { data, loading } = useSaleDetails({ @@ -210,11 +212,11 @@ export const SaleDetails: React.FC = ({ id, params }) => { {(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 = ({ 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 = ({ id, params }) => { navigate( productVariantEditPath(productId, variantId) )} - activeTab={params.activeTab} + activeTab={activeTab} onBack={() => navigate(saleListUrl())} onTabClick={changeTab} onSubmit={handleSubmit} diff --git a/src/discounts/views/VoucherDetails/VoucherDetails.tsx b/src/discounts/views/VoucherDetails/VoucherDetails.tsx index 112a45bdc..96ae334ca 100644 --- a/src/discounts/views/VoucherDetails/VoucherDetails.tsx +++ b/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 = ({ 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 = ({ const [updateMetadata] = useMetadataUpdate({}); const [updatePrivateMetadata] = usePrivateMetadataUpdate({}); - const paginationState = createPaginationState(PAGINATE_BY, params); + const [activeTab, setActiveTab] = useState( + VoucherDetailsPageTab.categories + ); + const [paginationState, setPaginationState] = useSectionLocalPaginationState( + PAGINATE_BY, + activeTab + ); + const paginate = useLocalPaginator(setPaginationState); const changeTab = (tab: VoucherDetailsPageTab) => { reset(); - navigate( - voucherUrl(id, { - activeTab: tab - }) - ); + setActiveTab(tab); }; const { data, loading } = useVoucherDetails({ @@ -246,10 +248,9 @@ export const VoucherDetails: React.FC = ({ ); const tabPageInfo = - params.activeTab === VoucherDetailsPageTab.categories + activeTab === VoucherDetailsPageTab.categories ? maybe(() => data.voucher.categories.pageInfo) - : params.activeTab === - VoucherDetailsPageTab.collections + : activeTab === VoucherDetailsPageTab.collections ? maybe(() => data.voucher.collections.pageInfo) : maybe(() => data.voucher.products.pageInfo); @@ -290,7 +291,7 @@ export const VoucherDetails: React.FC = ({ loadNextPage, loadPreviousPage, pageInfo - } = paginate(tabPageInfo, paginationState, params); + } = paginate(tabPageInfo, paginationState); return ( <> @@ -379,7 +380,7 @@ export const VoucherDetails: React.FC = ({ } onProductClick={id => () => navigate(productUrl(id))} - activeTab={params.activeTab} + activeTab={activeTab} onBack={() => navigate(voucherListUrl())} onTabClick={changeTab} onSubmit={handleSubmit} diff --git a/src/hooks/useLocalPaginator.ts b/src/hooks/useLocalPaginator.ts index 07e9539d7..b55bc5821 100644 --- a/src/hooks/useLocalPaginator.ts +++ b/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 ) { diff --git a/src/hooks/useNavigator.ts b/src/hooks/useNavigator.ts index a29a993ad..4410f7178 100644 --- a/src/hooks/useNavigator.ts +++ b/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) { diff --git a/src/hooks/usePaginator.ts b/src/hooks/usePaginator.ts index 6b38480ff..4c44dfe3d 100644 --- a/src/hooks/usePaginator.ts +++ b/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 diff --git a/src/shipping/urls.ts b/src/shipping/urls.ts index 7e62faf79..b9d9be809 100644 --- a/src/shipping/urls.ts +++ b/src/shipping/urls.ts @@ -34,8 +34,7 @@ export type ShippingZoneUrlQueryParams = Dialog & SingleAction & Partial<{ type: ShippingMethodTypeEnum; - }> & - Pagination; + }>; export const shippingZoneUrl = ( id: string, params?: ShippingZoneUrlQueryParams @@ -50,8 +49,7 @@ export type ShippingRateUrlDialog = export type ShippingRateUrlQueryParams = Dialog & SingleAction & - BulkAction & - Pagination; + BulkAction; export type ShippingRateCreateUrlDialog = ZipCodeRangeActions | ChannelsAction; export type ShippingRateCreateUrlQueryParams = Dialog< ShippingRateCreateUrlDialog diff --git a/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx b/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx index 0fe2be727..8c84966e8 100644 --- a/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx +++ b/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 = ({ 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 = ({ const { loadNextPage, loadPreviousPage, pageInfo } = paginate( rate?.excludedProducts.pageInfo, - paginationState, - params + paginationState ); const [ diff --git a/src/shipping/views/ShippingZoneDetails/index.tsx b/src/shipping/views/ShippingZoneDetails/index.tsx index 888de36c1..62f255989 100644 --- a/src/shipping/views/ShippingZoneDetails/index.tsx +++ b/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 = ({ const intl = useIntl(); const shop = useShop(); - const paginationState = createPaginationState(PAGINATE_BY, params); + const [paginationState] = useLocalPaginationState(PAGINATE_BY); const { result: searchWarehousesOpts, loadMore, search } = useWarehouseSearch( { diff --git a/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx b/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx index f03a6c329..994d90410 100644 --- a/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx +++ b/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 = ({ 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 = ({ const { loadNextPage, loadPreviousPage, pageInfo } = paginate( rate?.excludedProducts.pageInfo, - paginationState, - params + paginationState ); const [