Fix types

src/products/views/ProductList/filters.test.ts

@@ -2,20 +2,13 @@ import { createIntl } from "react-intl";
 import { stringify as stringifyQs } from "qs";
 
 import { ProductListUrlFilters } from "@saleor/products/urls";
-import {
+import { createFilterStructure } from "@saleor/products/components/ProductListPage";
-  createFilterStructure,
-  ProductStatus
-} from "@saleor/products/components/ProductListPage";
 import { getFilterQueryParams } from "@saleor/utils/filters";
 import { getExistingKeys, setFilterOptsStatus } from "@test/filters";
 import { config } from "@test/intl";
 import { StockAvailability } from "@saleor/types/globalTypes";
-import { categories } from "@saleor/categories/fixtures";
-import { fetchMoreProps, searchPageProps } from "@saleor/fixtures";
-import { collections } from "@saleor/collections/fixtures";
-import { productTypes } from "@saleor/productTypes/fixtures";
-import { attributes } from "@saleor/attributes/fixtures";
 import { getFilterVariables, getFilterQueryParam } from "./filters";
+import { productListFilterOpts } from "./fixtures";
 
 describe("Filtering query params", () => {
   it("should be empty object if no params given", () => {
@@ -41,81 +34,7 @@ describe("Filtering query params", () => {
 describe("Filtering URL params", () => {
   const intl = createIntl(config);
 
-  const filters = createFilterStructure(intl, {
+  const filters = createFilterStructure(intl, productListFilterOpts);
-    attributes: attributes.map(attr => ({
-      active: false,
-      choices: attr.values.map(val => ({
-        label: val.name,
-        value: val.slug
-      })),
-      name: attr.name,
-      slug: attr.slug,
-      value: [attr.values[0].slug, attr.values[2].slug]
-    })),
-    categories: {
-      ...fetchMoreProps,
-      ...searchPageProps,
-      active: false,
-      choices: categories.slice(5).map(category => ({
-        label: category.name,
-        value: category.id
-      })),
-      displayValues: [
-        {
-          label: categories[5].name,
-          value: categories[5].id
-        }
-      ],
-      value: [categories[5].id]
-    },
-    collections: {
-      ...fetchMoreProps,
-      ...searchPageProps,
-      active: false,
-      choices: collections.slice(5).map(category => ({
-        label: category.name,
-        value: category.id
-      })),
-      displayValues: [
-        {
-          label: collections[5].name,
-          value: collections[5].id
-        }
-      ],
-      value: [collections[5].id]
-    },
-    price: {
-      active: false,
-      value: {
-        max: "20",
-        min: "10"
-      }
-    },
-    productType: {
-      ...fetchMoreProps,
-      ...searchPageProps,
-      active: false,
-      choices: productTypes.slice(3).map(category => ({
-        label: category.name,
-        value: category.id
-      })),
-      displayValues: [
-        {
-          label: productTypes[3].name,
-          value: productTypes[3].id
-        }
-      ],
-      value: [productTypes[4].id]
-    },
-    status: {
-      active: false,
-      value: ProductStatus.PUBLISHED
-    },
-    stockStatus: {
-      active: false,
-      value: StockAvailability.IN_STOCK
-    }
-  });
 
   it("should be empty if no active filters", () => {
     const filterQueryParams = getFilterQueryParams(

src/products/views/ProductList/fixtures.ts

@@ -0,0 +1,86 @@
+import {
+  ProductListFilterOpts,
+  ProductStatus
+} from "@saleor/products/components/ProductListPage";
+import { attributes } from "@saleor/attributes/fixtures";
+import { fetchMoreProps, searchPageProps } from "@saleor/fixtures";
+import { categories } from "@saleor/categories/fixtures";
+import { collections } from "@saleor/collections/fixtures";
+import { productTypes } from "@saleor/productTypes/fixtures";
+import { StockAvailability } from "@saleor/types/globalTypes";
+
+export const productListFilterOpts: ProductListFilterOpts = {
+  attributes: attributes.map(attr => ({
+    active: false,
+    choices: attr.values.map(val => ({
+      label: val.name,
+      value: val.slug
+    })),
+    name: attr.name,
+    slug: attr.slug,
+    value: [attr.values[0].slug, attr.values.length > 2 && attr.values[2].slug]
+  })),
+  categories: {
+    ...fetchMoreProps,
+    ...searchPageProps,
+    active: false,
+    choices: categories.slice(5).map(category => ({
+      label: category.name,
+      value: category.id
+    })),
+    displayValues: [
+      {
+        label: categories[5].name,
+        value: categories[5].id
+      }
+    ],
+    value: [categories[5].id]
+  },
+  collections: {
+    ...fetchMoreProps,
+    ...searchPageProps,
+    active: false,
+    choices: collections.slice(5).map(category => ({
+      label: category.name,
+      value: category.id
+    })),
+    displayValues: [
+      {
+        label: collections[5].name,
+        value: collections[5].id
+      }
+    ],
+    value: [collections[5].id]
+  },
+  price: {
+    active: false,
+    value: {
+      max: "20",
+      min: "10"
+    }
+  },
+  productType: {
+    ...fetchMoreProps,
+    ...searchPageProps,
+    active: false,
+    choices: productTypes.slice(3).map(category => ({
+      label: category.name,
+      value: category.id
+    })),
+    displayValues: [
+      {
+        label: productTypes[3].name,
+        value: productTypes[3].id
+      }
+    ],
+    value: [productTypes[4].id]
+  },
+  status: {
+    active: false,
+    value: ProductStatus.PUBLISHED
+  },
+  stockStatus: {
+    active: false,
+    value: StockAvailability.IN_STOCK
+  }
+};

src/storybook/stories/products/ProductListPage.tsx

@@ -7,7 +7,7 @@ import { products as productListFixture } from "@saleor/products/fixtures";
 import { ProductListUrlSortField } from "@saleor/products/urls";
 import { attributes } from "@saleor/productTypes/fixtures";
 import { ListViews } from "@saleor/types";
-import { StockAvailability } from "@saleor/types/globalTypes";
+import { productListFilterOpts } from "@saleor/products/views/ProductList/fixtures";
 import {
   fetchMoreProps,
   filterPageProps,
@@ -16,8 +16,7 @@ import {
   sortPageProps
 } from "../../../fixtures";
 import ProductListPage, {
-  ProductListPageProps,
+  ProductListPageProps
-  ProductStatus
 } from "../../../products/components/ProductListPage";
 import Decorator from "../../Decorator";
 
@@ -38,23 +37,7 @@ const props: ProductListPageProps = {
   activeAttributeSortId: undefined,
   availableInGridAttributes: attributes,
   defaultSettings: defaultListSettings[ListViews.PRODUCT_LIST],
-  filterOpts: {
+  filterOpts: productListFilterOpts,
-    price: {
-      active: false,
-      value: {
-        max: "30",
-        min: "10"
-      }
-    },
-    status: {
-      active: false,
-      value: ProductStatus.PUBLISHED
-    },
-    stockStatus: {
-      active: false,
-      value: StockAvailability.IN_STOCK
-    }
-  },
   gridAttributes: attributes,
   products,
   settings: {