Separate visual and app layer in product types

src/productTypes/components/ProductTypeListPage/ProductTypeListPage.tsx

@@ -9,11 +9,6 @@ import PageHeader from "@saleor/components/PageHeader";
 import FilterBar from "@saleor/components/FilterBar";
 import { sectionNames } from "@saleor/intl";
 import { ProductTypeListUrlSortField } from "@saleor/productTypes/urls";
-import {
-  ProductTypeFilterKeys,
-  createFilterStructure
-} from "@saleor/productTypes/views/ProductTypeList/filter";
-import { ProductTypeListFilterOpts } from "@saleor/productTypes/types";
 import {
   ListActions,
   PageListProps,
@@ -23,6 +18,11 @@ import {
 } from "../../../types";
 import { ProductTypeList_productTypes_edges_node } from "../../types/ProductTypeList";
 import ProductTypeList from "../ProductTypeList";
+import {
+  createFilterStructure,
+  ProductTypeFilterKeys,
+  ProductTypeListFilterOpts
+} from "./filters";
 
 export interface ProductTypeListPageProps
   extends PageListProps,

src/productTypes/components/ProductTypeListPage/filters.ts

@@ -0,0 +1,85 @@
+import { defineMessages, IntlShape } from "react-intl";
+
+import { FilterOpts } from "@saleor/types";
+import {
+  ProductTypeConfigurable,
+  ProductTypeEnum
+} from "@saleor/types/globalTypes";
+import { IFilter } from "@saleor/components/Filter";
+import { commonMessages } from "@saleor/intl";
+import { createOptionsField } from "@saleor/utils/filters/fields";
+
+export enum ProductTypeFilterKeys {
+  configurable = "configurable",
+  type = "type"
+}
+
+export interface ProductTypeListFilterOpts {
+  configurable: FilterOpts<ProductTypeConfigurable>;
+  type: FilterOpts<ProductTypeEnum>;
+}
+
+const messages = defineMessages({
+  configurable: {
+    defaultMessage: "Configurable",
+    description: "product type"
+  },
+  digital: {
+    defaultMessage: "Digital",
+    description: "product"
+  },
+  shippable: {
+    defaultMessage: "Shippable",
+    description: "product"
+  },
+  type: {
+    defaultMessage: "Type",
+    description: "product type is digital or physical"
+  }
+});
+
+export function createFilterStructure(
+  intl: IntlShape,
+  opts: ProductTypeListFilterOpts
+): IFilter<ProductTypeFilterKeys> {
+  return [
+    {
+      ...createOptionsField(
+        ProductTypeFilterKeys.configurable,
+        intl.formatMessage(messages.configurable),
+        [opts.configurable.value],
+        false,
+        [
+          {
+            label: intl.formatMessage(commonMessages.yes),
+            value: ProductTypeConfigurable.CONFIGURABLE
+          },
+          {
+            label: intl.formatMessage(commonMessages.no),
+            value: ProductTypeConfigurable.SIMPLE
+          }
+        ]
+      ),
+      active: opts.configurable.active
+    },
+    {
+      ...createOptionsField(
+        ProductTypeFilterKeys.type,
+        intl.formatMessage(messages.type),
+        [opts.type.value],
+        false,
+        [
+          {
+            label: intl.formatMessage(messages.digital),
+            value: ProductTypeEnum.DIGITAL
+          },
+          {
+            label: intl.formatMessage(messages.shippable),
+            value: ProductTypeEnum.SHIPPABLE
+          }
+        ]
+      ),
+      active: opts.type.active
+    }
+  ];
+}

src/productTypes/components/ProductTypeListPage/index.ts

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

src/productTypes/types.ts

@@ -1,10 +0,0 @@
-import { FilterOpts } from "@saleor/types";
-import {
-  ProductTypeConfigurable,
-  ProductTypeEnum
-} from "@saleor/types/globalTypes";
-
-export interface ProductTypeListFilterOpts {
-  configurable: FilterOpts<ProductTypeConfigurable>;
-  type: FilterOpts<ProductTypeEnum>;
-}

src/productTypes/views/ProductTypeList/ProductTypeList.tsx

@@ -45,7 +45,7 @@ import {
   saveFilterTab,
   getFilterQueryParam,
   getFilterOpts
-} from "./filter";
+} from "./filters";
 import { getSortQueryVariables } from "./sort";
 
 interface ProductTypeListProps {

src/productTypes/views/ProductTypeList/filters.ts

@@ -1,14 +1,11 @@
-import { IntlShape } from "react-intl";
-
 import {
   ProductTypeFilterInput,
   ProductTypeConfigurable,
   ProductTypeEnum
 } from "@saleor/types/globalTypes";
-import { IFilterElement, IFilter } from "@saleor/components/Filter";
+import { IFilterElement } from "@saleor/components/Filter";
 import { maybe, findValueInEnum } from "@saleor/misc";
-import { createOptionsField } from "@saleor/utils/filters/fields";
-import { commonMessages } from "@saleor/intl";
+import { ProductTypeFilterKeys } from "@saleor/productTypes/components/ProductTypeListPage";
 import {
   createFilterTabUtils,
   createFilterUtils
@@ -19,15 +16,9 @@ import {
   ProductTypeListUrlQueryParams
 } from "../../urls";
 import { ProductTypeListFilterOpts } from "../../types";
-import messages from "./messages";
 
 export const PRODUCT_TYPE_FILTERS_KEY = "productTypeFilters";
 
-export enum ProductTypeFilterKeys {
-  configurable = "configurable",
-  type = "type"
-}
-
 export function getFilterOpts(
   params: ProductTypeListUrlFilters
 ): ProductTypeListFilterOpts {
@@ -45,52 +36,6 @@ export function getFilterOpts(
   };
 }
 
-export function createFilterStructure(
-  intl: IntlShape,
-  opts: ProductTypeListFilterOpts
-): IFilter<ProductTypeFilterKeys> {
-  return [
-    {
-      ...createOptionsField(
-        ProductTypeFilterKeys.configurable,
-        intl.formatMessage(messages.configurable),
-        [opts.configurable.value],
-        false,
-        [
-          {
-            label: intl.formatMessage(commonMessages.yes),
-            value: ProductTypeConfigurable.CONFIGURABLE
-          },
-          {
-            label: intl.formatMessage(commonMessages.no),
-            value: ProductTypeConfigurable.SIMPLE
-          }
-        ]
-      ),
-      active: opts.configurable.active
-    },
-    {
-      ...createOptionsField(
-        ProductTypeFilterKeys.type,
-        intl.formatMessage(messages.type),
-        [opts.type.value],
-        false,
-        [
-          {
-            label: intl.formatMessage(messages.digital),
-            value: ProductTypeEnum.DIGITAL
-          },
-          {
-            label: intl.formatMessage(messages.shippable),
-            value: ProductTypeEnum.SHIPPABLE
-          }
-        ]
-      ),
-      active: opts.type.active
-    }
-  ];
-}
-
 export function getFilterVariables(
   params: ProductTypeListUrlFilters
 ): ProductTypeFilterInput {

src/productTypes/views/ProductTypeList/messages.ts

@@ -1,22 +0,0 @@
-import { defineMessages } from "react-intl";
-
-const messages = defineMessages({
-  configurable: {
-    defaultMessage: "Configurable",
-    description: "product type"
-  },
-  digital: {
-    defaultMessage: "Digital",
-    description: "product"
-  },
-  shippable: {
-    defaultMessage: "Shippable",
-    description: "product"
-  },
-  type: {
-    defaultMessage: "Type",
-    description: "product type is digital or physical"
-  }
-});
-
-export default messages;