diff --git a/src/hooks/useSortRedirects.ts b/src/hooks/useSortRedirects.ts new file mode 100644 index 000000000..e0593f2c8 --- /dev/null +++ b/src/hooks/useSortRedirects.ts @@ -0,0 +1,53 @@ +import useNavigator from "@saleor/hooks/useNavigator"; +import { Sort } from "@saleor/types"; +import { useEffect } from "react"; + +export type SortByRankUrlQueryParams = Sort & { + query?: string; +}; + +export interface UseSortRedirectsOpts { + params: SortByRankUrlQueryParams; + defaultSortField: SortField; + urlFunc: (params: SortByRankUrlQueryParams) => string; + resetToDefault?: boolean; +} +/** + * useSortRedirects is a hook that should be used in lists views + * where using search changes the sort field to "rank". Removing + * query changes sort field back to default one provided in params. + */ +export function useSortRedirects({ + params, + defaultSortField, + urlFunc, + resetToDefault, +}: UseSortRedirectsOpts) { + const navigate = useNavigator(); + + const hasQuery = !!params.query?.trim(); + + useEffect(() => { + const sortWithQuery = "rank" as SortField; + const sortWithoutQuery = + params.sort === "rank" ? defaultSortField : params.sort; + navigate( + urlFunc({ + ...params, + asc: hasQuery ? false : params.asc, + sort: hasQuery ? sortWithQuery : sortWithoutQuery, + }), + ); + }, [params.query]); + + useEffect(() => { + if (resetToDefault) { + navigate( + urlFunc({ + ...params, + sort: defaultSortField, + }), + ); + } + }, [params]); +} diff --git a/src/orders/urls.ts b/src/orders/urls.ts index 15a23d75b..0653abe6c 100644 --- a/src/orders/urls.ts +++ b/src/orders/urls.ts @@ -50,6 +50,7 @@ export enum OrderListUrlSortField { fulfillment = "status", payment = "payment", total = "total", + rank = "rank", } export type OrderListUrlSort = Sort; export type OrderListUrlQueryParams = BulkAction & diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx index 6174c24c9..ca2592369 100644 --- a/src/orders/views/OrderList/OrderList.tsx +++ b/src/orders/views/OrderList/OrderList.tsx @@ -17,6 +17,7 @@ import usePaginator, { createPaginationState, PaginatorContext, } from "@saleor/hooks/usePaginator"; +import { useSortRedirects } from "@saleor/hooks/useSortRedirects"; import { getStringOrPlaceholder } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; @@ -32,6 +33,7 @@ import { orderListUrl, OrderListUrlDialog, OrderListUrlQueryParams, + OrderListUrlSortField, orderSettingsPath, orderUrl, } from "../../urls"; @@ -45,7 +47,7 @@ import { getFilterVariables, saveFilterTab, } from "./filters"; -import { getSortQueryVariables } from "./sort"; +import { DEFAULT_SORT_KEY, getSortQueryVariables } from "./sort"; interface OrderListProps { params: OrderListUrlQueryParams; @@ -148,6 +150,12 @@ export const OrderList: React.FC = ({ params }) => { const handleSort = createSortHandler(navigate, orderListUrl, params); + useSortRedirects({ + params, + defaultSortField: DEFAULT_SORT_KEY, + urlFunc: orderListUrl, + }); + return ( = ({ params }) => { channel => channel.slug === params.channel, ); - useSortRedirects(params, !!selectedChannel); + useSortRedirects({ + params, + defaultSortField: DEFAULT_SORT_KEY, + urlFunc: productListUrl, + resetToDefault: !canBeSorted(params.sort, !!selectedChannel), + }); const [openModal, closeModal] = createDialogActionHandlers< ProductListUrlDialog, diff --git a/src/products/views/ProductList/useSortRedirects.ts b/src/products/views/ProductList/useSortRedirects.ts deleted file mode 100644 index 99c85c0bc..000000000 --- a/src/products/views/ProductList/useSortRedirects.ts +++ /dev/null @@ -1,44 +0,0 @@ -import useNavigator from "@saleor/hooks/useNavigator"; -import { - productListUrl, - ProductListUrlQueryParams, - ProductListUrlSortField, -} from "@saleor/products/urls"; -import { useEffect } from "react"; - -import { canBeSorted, DEFAULT_SORT_KEY } from "./sort"; - -export function useSortRedirects( - params: ProductListUrlQueryParams, - isChannelSelected: boolean, -) { - const navigate = useNavigator(); - - const hasQuery = !!params.query?.trim(); - - useEffect(() => { - const sortWithQuery = ProductListUrlSortField.rank; - const sortWithoutQuery = - params.sort === ProductListUrlSortField.rank - ? DEFAULT_SORT_KEY - : params.sort; - navigate( - productListUrl({ - ...params, - asc: hasQuery ? false : params.asc, - sort: hasQuery ? sortWithQuery : sortWithoutQuery, - }), - ); - }, [params.query]); - - useEffect(() => { - if (!canBeSorted(params.sort, isChannelSelected)) { - navigate( - productListUrl({ - ...params, - sort: DEFAULT_SORT_KEY, - }), - ); - } - }, [params]); -}