diff --git a/src/products/index.tsx b/src/products/index.tsx index fed57ca5a..2d04e98a0 100644 --- a/src/products/index.tsx +++ b/src/products/index.tsx @@ -5,6 +5,7 @@ import { Route, RouteComponentProps, Switch } from "react-router-dom"; import { sectionNames } from "@saleor/intl"; import { asSortParams } from "@saleor/utils/sort"; +import { getArrayQueryParam } from "@saleor/utils/urls"; import { WindowTitle } from "../components/WindowTitle"; import { productAddPath, @@ -29,7 +30,12 @@ import ProductVariantCreateComponent from "./views/ProductVariantCreate"; const ProductList: React.FC> = ({ location }) => { const qs = parseQs(location.search.substr(1)); const params: ProductListUrlQueryParams = asSortParams( - qs, + { + ...qs, + categories: getArrayQueryParam(qs.categories), + collections: getArrayQueryParam(qs.collections), + productTypes: getArrayQueryParam(qs.productTypes) + }, ProductListUrlSortField ); diff --git a/src/products/views/ProductList/__snapshots__/filters.test.ts.snap b/src/products/views/ProductList/__snapshots__/filters.test.ts.snap index 556446614..7b7084a87 100644 --- a/src/products/views/ProductList/__snapshots__/filters.test.ts.snap +++ b/src/products/views/ProductList/__snapshots__/filters.test.ts.snap @@ -3,11 +3,53 @@ exports[`Filtering URL params should not be empty if active filters are present 1`] = ` Object { "attributes": Object { + "author": Array [ + "john-doe", + false, + ], + "box-size": Array [ + "100g", + "500g", + ], + "brand": Array [ + "saleor", + false, + ], + "candy-box-size": Array [ + "100g", + "500g", + ], + "coffee-genre": Array [ + "arabica", + false, + ], + "collar": Array [ + "round", + "polo", + ], + "color": Array [ + "blue", + false, + ], + "cover": Array [ + "soft", + "middle-soft", + ], + "flavor": Array [ + "sour", + false, + ], + "language": Array [ + "english", + false, + ], + "publisher": Array [ + "mirumee-press", + false, + ], "size": Array [ - Array [ - "xs", - "m", - ], + "xs", + "m", ], }, "categories": Array [ @@ -26,4 +68,4 @@ Object { } `; -exports[`Filtering URL params should not be empty if active filters are present 2`] = `"status=published&stockStatus=IN_STOCK&priceFrom=10&priceTo=20&categories%5B0%5D=878752&collections%5B0%5D=Q29sbGVjdGlvbjoc&productTypes%5B0%5D=UHJvZHVjdFR5cGU6MQ%3D%3D&attributes%5Bsize%5D%5B0%5D%5B0%5D=xs&attributes%5Bsize%5D%5B0%5D%5B1%5D=m"`; +exports[`Filtering URL params should not be empty if active filters are present 2`] = `"status=published&stockStatus=IN_STOCK&priceFrom=10&priceTo=20&categories%5B0%5D=878752&collections%5B0%5D=Q29sbGVjdGlvbjoc&productTypes%5B0%5D=UHJvZHVjdFR5cGU6MQ%3D%3D&attributes%5Bauthor%5D%5B0%5D=john-doe&attributes%5Bauthor%5D%5B1%5D=false&attributes%5Bbox-size%5D%5B0%5D=100g&attributes%5Bbox-size%5D%5B1%5D=500g&attributes%5Bbrand%5D%5B0%5D=saleor&attributes%5Bbrand%5D%5B1%5D=false&attributes%5Bcandy-box-size%5D%5B0%5D=100g&attributes%5Bcandy-box-size%5D%5B1%5D=500g&attributes%5Bcoffee-genre%5D%5B0%5D=arabica&attributes%5Bcoffee-genre%5D%5B1%5D=false&attributes%5Bcollar%5D%5B0%5D=round&attributes%5Bcollar%5D%5B1%5D=polo&attributes%5Bcolor%5D%5B0%5D=blue&attributes%5Bcolor%5D%5B1%5D=false&attributes%5Bcover%5D%5B0%5D=soft&attributes%5Bcover%5D%5B1%5D=middle-soft&attributes%5Bflavor%5D%5B0%5D=sour&attributes%5Bflavor%5D%5B1%5D=false&attributes%5Blanguage%5D%5B0%5D=english&attributes%5Blanguage%5D%5B1%5D=false&attributes%5Bpublisher%5D%5B0%5D=mirumee-press&attributes%5Bpublisher%5D%5B1%5D=false&attributes%5Bsize%5D%5B0%5D=xs&attributes%5Bsize%5D%5B1%5D=m"`; diff --git a/src/products/views/ProductList/filters.ts b/src/products/views/ProductList/filters.ts index 69ba4463b..2916e1414 100644 --- a/src/products/views/ProductList/filters.ts +++ b/src/products/views/ProductList/filters.ts @@ -215,8 +215,8 @@ export function getFilterVariables( gte: parseFloat(params.priceFrom), lte: parseFloat(params.priceTo) }), - productType: - params.productTypes !== undefined ? params.productTypes[0] : null, + productTypes: + params.productTypes !== undefined ? params.productTypes : null, search: params.query, stockAvailability: params.stockStatus !== undefined @@ -232,21 +232,16 @@ export function getFilterQueryParam( const { active, group, name, value } = filter; if (!!group) { - if (active) { - return { - [group]: - params && params[group] - ? { - ...params[group], - [name]: [...params[group], value] - } - : { - [name]: [value] - } - }; - } + const rest = params && params[group] ? params[group] : undefined; - return {}; + return { + [group]: active + ? { + ...(rest === undefined ? {} : rest), + [name]: value + } + : rest + }; } switch (name) { diff --git a/src/utils/filters/filters.ts b/src/utils/filters/filters.ts index 8ce699521..59979161b 100644 --- a/src/utils/filters/filters.ts +++ b/src/utils/filters/filters.ts @@ -48,7 +48,7 @@ export function getFilterQueryParams< return filter.reduce( (acc, filterField) => ({ ...acc, - ...getFilterQueryParam(filterField) + ...getFilterQueryParam(filterField, acc) }), {} as TUrlFilters ); diff --git a/src/utils/urls.ts b/src/utils/urls.ts index 332488a80..11791432d 100644 --- a/src/utils/urls.ts +++ b/src/utils/urls.ts @@ -1,7 +1,20 @@ import { stringify } from "qs"; +import isArray from "lodash-es/isArray"; export function stringifyQs(params: object): string { return stringify(params, { indices: false }); } + +export function getArrayQueryParam(param: string | string[]): string[] { + if (!param) { + return undefined; + } + + if (isArray(param)) { + return param; + } + + return [param]; +}