Separate visual and app layer in products

src/products/components/ProductListPage/ProductListPage.tsx

@@ -24,13 +24,13 @@ import {
   SortPage
 } from "@saleor/types";
 import FilterBar from "@saleor/components/FilterBar";
-import { ProductListFilterOpts } from "@saleor/products/types";
 import { ProductListUrlSortField } from "../../urls";
+import ProductList from "../ProductList";
 import {
   createFilterStructure,
-  ProductFilterKeys
+  ProductFilterKeys,
-} from "../../views/ProductList/filters";
+  ProductListFilterOpts
-import ProductList from "../ProductList";
+} from "./filters";
 
 export interface ProductListPageProps
   extends PageListProps<ProductListColumns>,

src/products/components/ProductListPage/filters.ts

@@ -0,0 +1,110 @@
+import { defineMessages, IntlShape } from "react-intl";
+
+import { FilterOpts, MinMax } from "@saleor/types";
+import { StockAvailability } from "@saleor/types/globalTypes";
+import {
+  createOptionsField,
+  createPriceField
+} from "@saleor/utils/filters/fields";
+import { IFilter } from "@saleor/components/Filter";
+
+export enum ProductFilterKeys {
+  status = "status",
+  price = "price",
+  stock = "stock"
+}
+
+export interface ProductListFilterOpts {
+  price: FilterOpts<MinMax>;
+  status: FilterOpts<ProductStatus>;
+  stockStatus: FilterOpts<StockAvailability>;
+}
+
+export enum ProductStatus {
+  PUBLISHED = "published",
+  HIDDEN = "hidden"
+}
+
+const messages = defineMessages({
+  available: {
+    defaultMessage: "Available",
+    description: "product status"
+  },
+  hidden: {
+    defaultMessage: "Hidden",
+    description: "product is hidden"
+  },
+  outOfStock: {
+    defaultMessage: "Out Of Stock",
+    description: "product status"
+  },
+  price: {
+    defaultMessage: "Price"
+  },
+  quantity: {
+    defaultMessage: "Stock quantity",
+    description: "product"
+  },
+  visibility: {
+    defaultMessage: "Visibility",
+    description: "product visibility"
+  },
+  visible: {
+    defaultMessage: "Visible",
+    description: "product is visible"
+  }
+});
+
+export function createFilterStructure(
+  intl: IntlShape,
+  opts: ProductListFilterOpts
+): IFilter<ProductFilterKeys> {
+  return [
+    {
+      ...createOptionsField(
+        ProductFilterKeys.status,
+        intl.formatMessage(messages.visibility),
+        [opts.status.value],
+        false,
+        [
+          {
+            label: intl.formatMessage(messages.visible),
+            value: ProductStatus.PUBLISHED
+          },
+          {
+            label: intl.formatMessage(messages.hidden),
+            value: ProductStatus.HIDDEN
+          }
+        ]
+      ),
+      active: opts.status.active
+    },
+    {
+      ...createOptionsField(
+        ProductFilterKeys.stock,
+        intl.formatMessage(messages.quantity),
+        [opts.stockStatus.value],
+        false,
+        [
+          {
+            label: intl.formatMessage(messages.available),
+            value: StockAvailability.IN_STOCK
+          },
+          {
+            label: intl.formatMessage(messages.outOfStock),
+            value: StockAvailability.OUT_OF_STOCK
+          }
+        ]
+      ),
+      active: opts.stockStatus.active
+    },
+    {
+      ...createPriceField(
+        ProductFilterKeys.price,
+        intl.formatMessage(messages.price),
+        opts.price.value
+      ),
+      active: opts.price.active
+    }
+  ];
+}

src/products/components/ProductListPage/index.ts

@@ -1,2 +1,3 @@
 export { default } from "./ProductListPage";
 export * from "./ProductListPage";
+export * from "./filters";

src/products/types.ts

@@ -1,13 +0,0 @@
-import { FilterOpts, MinMax } from "@saleor/types";
-import { StockAvailability } from "@saleor/types/globalTypes";
-
-export enum ProductStatus {
-  PUBLISHED = "published",
-  HIDDEN = "hidden"
-}
-
-export interface ProductListFilterOpts {
-  price: FilterOpts<MinMax>;
-  status: FilterOpts<ProductStatus>;
-  stockStatus: FilterOpts<StockAvailability>;
-}

src/products/views/ProductList/filters.ts

@@ -1,12 +1,10 @@
-import { IntlShape } from "react-intl";
-
 import { maybe, findValueInEnum } from "@saleor/misc";
 import {
-  createOptionsField,
+  ProductFilterKeys,
-  createPriceField
+  ProductListFilterOpts,
-} from "@saleor/utils/filters/fields";
+  ProductStatus
-import { ProductStatus, ProductListFilterOpts } from "@saleor/products/types";
+} from "@saleor/products/components/ProductListPage";
-import { IFilterElement, IFilter } from "../../../components/Filter";
+import { IFilterElement } from "../../../components/Filter";
 import {
   ProductFilterInput,
   StockAvailability
@@ -20,16 +18,9 @@ import {
   ProductListUrlFiltersEnum,
   ProductListUrlQueryParams
 } from "../../urls";
-import messages from "./messages";
 
 export const PRODUCT_FILTERS_KEY = "productFilters";
 
-export enum ProductFilterKeys {
-  status = "status",
-  price = "price",
-  stock = "stock"
-}
-
 export function getFilterOpts(
   params: ProductListUrlFilters
 ): ProductListFilterOpts {
@@ -56,60 +47,6 @@ export function getFilterOpts(
   };
 }
 
-export function createFilterStructure(
-  intl: IntlShape,
-  opts: ProductListFilterOpts
-): IFilter<ProductFilterKeys> {
-  return [
-    {
-      ...createOptionsField(
-        ProductFilterKeys.status,
-        intl.formatMessage(messages.visibility),
-        [opts.status.value],
-        false,
-        [
-          {
-            label: intl.formatMessage(messages.visible),
-            value: ProductStatus.PUBLISHED
-          },
-          {
-            label: intl.formatMessage(messages.hidden),
-            value: ProductStatus.HIDDEN
-          }
-        ]
-      ),
-      active: opts.status.active
-    },
-    {
-      ...createOptionsField(
-        ProductFilterKeys.stock,
-        intl.formatMessage(messages.quantity),
-        [opts.stockStatus.value],
-        false,
-        [
-          {
-            label: intl.formatMessage(messages.available),
-            value: StockAvailability.IN_STOCK
-          },
-          {
-            label: intl.formatMessage(messages.outOfStock),
-            value: StockAvailability.OUT_OF_STOCK
-          }
-        ]
-      ),
-      active: opts.stockStatus.active
-    },
-    {
-      ...createPriceField(
-        ProductFilterKeys.price,
-        intl.formatMessage(messages.price),
-        opts.price.value
-      ),
-      active: opts.price.active
-    }
-  ];
-}
-
 export function getFilterVariables(
   params: ProductListUrlFilters
 ): ProductFilterInput {

src/products/views/ProductList/messages.ts

@@ -1,33 +0,0 @@
-import { defineMessages } from "react-intl";
-
-const messages = defineMessages({
-  available: {
-    defaultMessage: "Available",
-    description: "product status"
-  },
-  hidden: {
-    defaultMessage: "Hidden",
-    description: "product is hidden"
-  },
-  outOfStock: {
-    defaultMessage: "Out Of Stock",
-    description: "product status"
-  },
-  price: {
-    defaultMessage: "Price"
-  },
-  quantity: {
-    defaultMessage: "Stock quantity",
-    description: "product"
-  },
-  visibility: {
-    defaultMessage: "Visibility",
-    description: "product visibility"
-  },
-  visible: {
-    defaultMessage: "Visible",
-    description: "product is visible"
-  }
-});
-
-export default messages;

src/storybook/stories/products/ProductListPage.tsx

@@ -7,7 +7,6 @@ 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 { ProductStatus } from "@saleor/products/types";
 import { StockAvailability } from "@saleor/types/globalTypes";
 import {
   fetchMoreProps,
@@ -17,7 +16,8 @@ import {
   sortPageProps
 } from "../../../fixtures";
 import ProductListPage, {
-  ProductListPageProps
+  ProductListPageProps,
+  ProductStatus
 } from "../../../products/components/ProductListPage";
 import Decorator from "../../Decorator";