Separate visual and app layer in collections

src/collections/components/CollectionListPage/CollectionListPage.tsx

@@ -15,13 +15,13 @@ import {
   SortPage
 } from "@saleor/types";
 import { CollectionListUrlSortField } from "@saleor/collections/urls";
-import {
-  CollectionFilterKeys,
-  createFilterStructure
-} from "@saleor/collections/views/CollectionList/filter";
-import { CollectionListFilterOpts } from "@saleor/collections/types";
 import { CollectionList_collections_edges_node } from "../../types/CollectionList";
 import CollectionList from "../CollectionList/CollectionList";
+import {
+  CollectionFilterKeys,
+  CollectionListFilterOpts,
+  createFilterStructure
+} from "./filters";
 
 export interface CollectionListPageProps
   extends PageListProps,

src/collections/components/CollectionListPage/filters.ts

@@ -0,0 +1,53 @@
+import { defineMessages, IntlShape } from "react-intl";
+
+import { commonMessages } from "@saleor/intl";
+import { FilterOpts } from "@saleor/types";
+import { CollectionPublished } from "@saleor/types/globalTypes";
+import { IFilter } from "@saleor/components/Filter";
+import { createOptionsField } from "@saleor/utils/filters/fields";
+
+export interface CollectionListFilterOpts {
+  status: FilterOpts<CollectionPublished>;
+}
+
+export enum CollectionFilterKeys {
+  status = "status"
+}
+
+const messages = defineMessages({
+  hidden: {
+    defaultMessage: "Hidden",
+    description: "collection"
+  },
+  published: {
+    defaultMessage: "Published",
+    description: "collection"
+  }
+});
+
+export function createFilterStructure(
+  intl: IntlShape,
+  opts: CollectionListFilterOpts
+): IFilter<CollectionFilterKeys> {
+  return [
+    {
+      ...createOptionsField(
+        CollectionFilterKeys.status,
+        intl.formatMessage(commonMessages.status),
+        [opts.status.value],
+        false,
+        [
+          {
+            label: intl.formatMessage(messages.published),
+            value: CollectionPublished.PUBLISHED
+          },
+          {
+            label: intl.formatMessage(messages.hidden),
+            value: CollectionPublished.HIDDEN
+          }
+        ]
+      ),
+      active: opts.status.active
+    }
+  ];
+}

src/collections/components/CollectionListPage/index.ts

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

src/collections/types.ts

@@ -1,6 +0,0 @@
-import { FilterOpts } from "@saleor/types";
-import { CollectionPublished } from "@saleor/types/globalTypes";
-
-export interface CollectionListFilterOpts {
-  status: FilterOpts<CollectionPublished>;
-}

src/collections/views/CollectionList/CollectionList.tsx

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

src/collections/views/CollectionList/filters.ts

@@ -1,14 +1,13 @@
-import { IntlShape } from "react-intl";
-
 import {
   CollectionFilterInput,
   CollectionPublished
 } 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 {
-import { commonMessages } from "@saleor/intl";
+  CollectionListFilterOpts,
-import { CollectionListFilterOpts } from "../../types";
+  CollectionFilterKeys
+} from "@saleor/collections/components/CollectionListPage";
 import {
   CollectionListUrlFilters,
   CollectionListUrlFiltersEnum,
@@ -18,14 +17,9 @@ import {
   createFilterTabUtils,
   createFilterUtils
 } from "../../../utils/filters";
-import messages from "./messages";
 
 export const COLLECTION_FILTERS_KEY = "collectionFilters";
 
-export enum CollectionFilterKeys {
-  status = "status"
-}
-
 export function getFilterOpts(
   params: CollectionListUrlFilters
 ): CollectionListFilterOpts {
@@ -37,33 +31,6 @@ export function getFilterOpts(
   };
 }
 
-export function createFilterStructure(
-  intl: IntlShape,
-  opts: CollectionListFilterOpts
-): IFilter<CollectionFilterKeys> {
-  return [
-    {
-      ...createOptionsField(
-        CollectionFilterKeys.status,
-        intl.formatMessage(commonMessages.status),
-        [opts.status.value],
-        false,
-        [
-          {
-            label: intl.formatMessage(messages.published),
-            value: CollectionPublished.PUBLISHED
-          },
-          {
-            label: intl.formatMessage(messages.hidden),
-            value: CollectionPublished.HIDDEN
-          }
-        ]
-      ),
-      active: opts.status.active
-    }
-  ];
-}
-
 export function getFilterVariables(
   params: CollectionListUrlFilters
 ): CollectionFilterInput {

src/collections/views/CollectionList/messages.ts

@@ -1,14 +0,0 @@
-import { defineMessages } from "react-intl";
-
-const messages = defineMessages({
-  hidden: {
-    defaultMessage: "Hidden",
-    description: "collection"
-  },
-  published: {
-    defaultMessage: "Published",
-    description: "collection"
-  }
-});
-
-export default messages;