Fix minor bugs

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<RouteComponentProps<any>> = ({ 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
   );
 

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",
-        "xs",
+      "m",
-        "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"`;

src/products/views/ProductList/filters.ts

@@ -215,8 +215,8 @@ export function getFilterVariables(
       gte: parseFloat(params.priceFrom),
       lte: parseFloat(params.priceTo)
     }),
-    productType:
+    productTypes:
-      params.productTypes !== undefined ? params.productTypes[0] : null,
+      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) {
+    const rest = params && params[group] ? params[group] : undefined;
-      return {
-        [group]:
-          params && params[group]
-            ? {
-                ...params[group],
-                [name]: [...params[group], value]
-              }
-            : {
-                [name]: [value]
-              }
-      };
-    }
 
-    return {};
+    return {
+      [group]: active
+        ? {
+            ...(rest === undefined ? {} : rest),
+            [name]: value
+          }
+        : rest
+    };
   }
 
   switch (name) {

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

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];
+}