djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix auto scroll (#1644)

Browse source
This commit is contained in:
Dawid Tarasiuk 2021-12-06 15:41:18 +01:00 committed by GitHub
parent e2c05e7dd6
commit f111081331
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 136 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/categories/index.tsx
View file

@ -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 = {
...qs,
activeTab: getActiveTab(qs.activeTab)
};
const params: CategoryUrlQueryParams = qs;
return (
<CategoryDetailsView

6
src/categories/urls.ts
View file

@ -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 &
Dialog<CategoryUrlDialog> &
Pagination &
ActiveTab<CategoryPageTab>;
export type CategoryUrlQueryParams = BulkAction & Dialog<CategoryUrlDialog>;
export const categoryUrl = (id: string, params?: CategoryUrlQueryParams) =>
categoryPath(encodeURIComponent(id)) + "?" + stringifyQs(params);

39
src/categories/views/CategoryDetails.tsx
View file

@ -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,
params
paginationState
);
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 || []}

4
src/collections/urls.ts
View file

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

16
src/collections/views/CollectionDetails.tsx
View file

@ -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,
params
paginationState
);
return (

10
src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
View file

@ -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<

8
src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
View file

@ -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;

17
src/discounts/index.tsx
View file

@ -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 params: SaleUrlQueryParams = {
...qs,
activeTab: saleDetailsPageTab(activeTab)
};
const qs = parseQs(location.search.substr(1));
const params: SaleUrlQueryParams = qs;
return (
<SaleDetailsViewComponent
@ -76,11 +71,9 @@ const VoucherDetailsView: React.FC<RouteComponentProps<{ id: string }>> = ({
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 (
<VoucherDetailsViewComponent
id={decodeURIComponent(match.params.id)}

12
src/discounts/urls.ts
View file

@ -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 &
BulkAction &
Dialog<SaleUrlDialog> &
ActiveTab<SaleDetailsPageTab>;
export type SaleUrlQueryParams = BulkAction & Dialog<SaleUrlDialog>;
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 &
BulkAction &
Dialog<VoucherUrlDialog> &
ActiveTab<VoucherDetailsPageTab>;
export type VoucherUrlQueryParams = BulkAction & Dialog<VoucherUrlDialog>;
export type VoucherCreateUrlQueryParams = Dialog<ChannelsAction>;
export const voucherUrl = (id: string, params?: VoucherUrlQueryParams) =>
voucherPath(encodeURIComponent(id)) + "?" + stringifyQs(params);

34
src/discounts/views/SaleDetails/SaleDetails.tsx
View file

@ -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(
saleUrl(id, {
activeTab: tab
})
);
setActiveTab(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}

33
src/discounts/views/VoucherDetails/VoucherDetails.tsx
View file

@ -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(
voucherUrl(id, {
activeTab: tab
})
);
setActiveTab(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 ===
VoucherDetailsPageTab.collections
: activeTab === 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}

38
src/hooks/useLocalPaginator.ts
View file

@ -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
) {

2
src/hooks/useNavigator.ts
View file

@ -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) {

4
src/hooks/usePaginator.ts
View file

@ -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

6
src/shipping/urls.ts
View file

@ -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 &
Pagination;
BulkAction;
export type ShippingRateCreateUrlDialog = ZipCodeRangeActions | ChannelsAction;
export type ShippingRateCreateUrlQueryParams = Dialog<
ShippingRateCreateUrlDialog

15
src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx
View file

@ -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,
params
paginationState
);
const [

4
src/shipping/views/ShippingZoneDetails/index.tsx
View file

@ -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(
{

15
src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx
View file

@ -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,
params
paginationState
);
const [