diff --git a/src/products/views/ProductList/ProductList.tsx b/src/products/views/ProductList/ProductList.tsx index 1a41b4b87..a80bd195a 100644 --- a/src/products/views/ProductList/ProductList.tsx +++ b/src/products/views/ProductList/ProductList.tsx @@ -62,7 +62,7 @@ import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandl import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import { mapEdgesToItems, mapNodeToChoice } from "@saleor/utils/maps"; import { getSortUrlVariables } from "@saleor/utils/sort"; -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import { FormattedMessage, useIntl } from "react-intl"; import ProductListPage from "../../components/ProductListPage"; @@ -76,7 +76,8 @@ import { getFilterVariables, saveFilterTab } from "./filters"; -import { canBeSorted, DEFAULT_SORT_KEY, getSortQueryVariables } from "./sort"; +import { getSortQueryVariables } from "./sort"; +import { useSortRedirects } from "./useSortRedirects"; import { getAvailableProductKinds, getProductKindOpts } from "./utils"; interface ProductListProps { @@ -176,6 +177,8 @@ export const ProductList: React.FC = ({ params }) => { channel => channel.slug === params.channel ); + useSortRedirects(params, !!selectedChannel); + const [openModal, closeModal] = createDialogActionHandlers< ProductListUrlDialog, ProductListUrlQueryParams @@ -223,32 +226,6 @@ export const ProductList: React.FC = ({ params }) => { params }); - useEffect(() => { - const sortWithQuery = ProductListUrlSortField.rank; - const sortWithoutQuery = - params.sort === ProductListUrlSortField.rank - ? DEFAULT_SORT_KEY - : params.sort; - navigate( - productListUrl({ - ...params, - asc: params.query ? undefined : params.asc, - sort: params.query ? sortWithQuery : sortWithoutQuery - }) - ); - }, [params.query]); - - useEffect(() => { - if (!canBeSorted(params.sort, !!selectedChannel)) { - navigate( - productListUrl({ - ...params, - sort: DEFAULT_SORT_KEY - }) - ); - } - }, [params]); - const handleTabChange = (tab: number) => { reset(); navigate( diff --git a/src/products/views/ProductList/useSortRedirects.ts b/src/products/views/ProductList/useSortRedirects.ts new file mode 100644 index 000000000..b1682a04e --- /dev/null +++ b/src/products/views/ProductList/useSortRedirects.ts @@ -0,0 +1,42 @@ +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(); + + useEffect(() => { + const sortWithQuery = ProductListUrlSortField.rank; + const sortWithoutQuery = + params.sort === ProductListUrlSortField.rank + ? DEFAULT_SORT_KEY + : params.sort; + navigate( + productListUrl({ + ...params, + asc: params.query ? false : params.asc, + sort: params.query ? sortWithQuery : sortWithoutQuery + }) + ); + }, [params.query]); + + useEffect(() => { + if (!canBeSorted(params.sort, isChannelSelected)) { + navigate( + productListUrl({ + ...params, + sort: DEFAULT_SORT_KEY + }) + ); + } + }, [params]); +}