Separate visual and app layer in customers

src/customers/components/CustomerListPage/CustomerListPage.tsx

@@ -14,14 +14,14 @@ import {
   FilterPageProps
 } from "@saleor/types";
 import { CustomerListUrlSortField } from "@saleor/customers/urls";
-import {
-  CustomerFilterKeys,
-  createFilterStructure
-} from "@saleor/customers/views/CustomerList/filter";
-import { CustomerListFilterOpts } from "@saleor/customers/types";
 import FilterBar from "@saleor/components/FilterBar";
 import CustomerList from "../CustomerList/CustomerList";
 import { ListCustomers_customers_edges_node } from "../../types/ListCustomers";
+import {
+  CustomerFilterKeys,
+  CustomerListFilterOpts,
+  createFilterStructure
+} from "./filters";
 
 export interface CustomerListPageProps
   extends PageListProps,

src/customers/components/CustomerListPage/filters.ts

@@ -0,0 +1,66 @@
+import { IntlShape, defineMessages } from "react-intl";
+
+import { FilterOpts, MinMax } from "@saleor/types";
+import { IFilter } from "@saleor/components/Filter";
+import {
+  createDateField,
+  createNumberField
+} from "@saleor/utils/filters/fields";
+
+export enum CustomerFilterKeys {
+  joined = "joined",
+  moneySpent = "spent",
+  numberOfOrders = "orders"
+}
+
+export interface CustomerListFilterOpts {
+  joined: FilterOpts<MinMax>;
+  moneySpent: FilterOpts<MinMax>;
+  numberOfOrders: FilterOpts<MinMax>;
+}
+
+const messages = defineMessages({
+  joinDate: {
+    defaultMessage: "Join Date",
+    description: "customer"
+  },
+  moneySpent: {
+    defaultMessage: "Money Spent",
+    description: "customer"
+  },
+  numberOfOrders: {
+    defaultMessage: "Number of Orders"
+  }
+});
+
+export function createFilterStructure(
+  intl: IntlShape,
+  opts: CustomerListFilterOpts
+): IFilter<CustomerFilterKeys> {
+  return [
+    {
+      ...createDateField(
+        CustomerFilterKeys.joined,
+        intl.formatMessage(messages.joinDate),
+        opts.joined.value
+      ),
+      active: opts.joined.active
+    },
+    {
+      ...createNumberField(
+        CustomerFilterKeys.moneySpent,
+        intl.formatMessage(messages.moneySpent),
+        opts.moneySpent.value
+      ),
+      active: opts.moneySpent.active
+    },
+    {
+      ...createNumberField(
+        CustomerFilterKeys.numberOfOrders,
+        intl.formatMessage(messages.numberOfOrders),
+        opts.numberOfOrders.value
+      ),
+      active: opts.numberOfOrders.active
+    }
+  ];
+}

src/customers/components/CustomerListPage/index.ts

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

src/customers/types.ts

@@ -1,11 +1,3 @@
-import { FilterOpts, MinMax } from "@saleor/types";
-
-export interface CustomerListFilterOpts {
-  joined: FilterOpts<MinMax>;
-  moneySpent: FilterOpts<MinMax>;
-  numberOfOrders: FilterOpts<MinMax>;
-}
-
 export interface AddressTypeInput {
   city: string;
   cityArea?: string;

src/customers/views/CustomerList/CustomerList.tsx

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

src/customers/views/CustomerList/filters.ts

@@ -1,12 +1,10 @@
-import { IntlShape } from "react-intl";
-
 import { CustomerFilterInput } from "@saleor/types/globalTypes";
 import { maybe } from "@saleor/misc";
+import { IFilterElement } from "@saleor/components/Filter";
 import {
-  createDateField,
+  CustomerFilterKeys,
-  createNumberField
+  CustomerListFilterOpts
-} from "@saleor/utils/filters/fields";
+} from "@saleor/customers/components/CustomerListPage";
-import { IFilter, IFilterElement } from "@saleor/components/Filter";
 import {
   createFilterTabUtils,
   createFilterUtils
@@ -16,17 +14,9 @@ import {
   CustomerListUrlFiltersEnum,
   CustomerListUrlQueryParams
 } from "../../urls";
-import { CustomerListFilterOpts } from "../../types";
-import messages from "./messages";
 
 export const CUSTOMER_FILTERS_KEY = "customerFilters";
 
-export enum CustomerFilterKeys {
-  joined = "joined",
-  moneySpent = "spent",
-  numberOfOrders = "orders"
-}
-
 export function getFilterOpts(
   params: CustomerListUrlFilters
 ): CustomerListFilterOpts {
@@ -73,38 +63,6 @@ export function getFilterOpts(
   };
 }
 
-export function createFilterStructure(
-  intl: IntlShape,
-  opts: CustomerListFilterOpts
-): IFilter<CustomerFilterKeys> {
-  return [
-    {
-      ...createDateField(
-        CustomerFilterKeys.joined,
-        intl.formatMessage(messages.joinDate),
-        opts.joined.value
-      ),
-      active: opts.joined.active
-    },
-    {
-      ...createNumberField(
-        CustomerFilterKeys.moneySpent,
-        intl.formatMessage(messages.moneySpent),
-        opts.moneySpent.value
-      ),
-      active: opts.moneySpent.active
-    },
-    {
-      ...createNumberField(
-        CustomerFilterKeys.numberOfOrders,
-        intl.formatMessage(messages.numberOfOrders),
-        opts.numberOfOrders.value
-      ),
-      active: opts.numberOfOrders.active
-    }
-  ];
-}
-
 export function getFilterVariables(
   params: CustomerListUrlFilters
 ): CustomerFilterInput {

src/customers/views/CustomerList/messages.ts

@@ -1,17 +0,0 @@
-import { defineMessages } from "react-intl";
-
-const messages = defineMessages({
-  joinDate: {
-    defaultMessage: "Join Date",
-    description: "customer"
-  },
-  moneySpent: {
-    defaultMessage: "Money Spent",
-    description: "customer"
-  },
-  numberOfOrders: {
-    defaultMessage: "Number of Orders"
-  }
-});
-
-export default messages;