Separate visual and app layer in sales

src/discounts/components/SaleListPage/SaleListPage.tsx

@@ -15,13 +15,13 @@ import {
   FilterPageProps
 } from "@saleor/types";
 import { SaleListUrlSortField } from "@saleor/discounts/urls";
-import {
-  SaleFilterKeys,
-  createFilterStructure
-} from "@saleor/discounts/views/SaleList/filter";
-import { SaleListFilterOpts } from "@saleor/discounts/types";
 import { SaleList_sales_edges_node } from "../../types/SaleList";
 import SaleList from "../SaleList";
+import {
+  SaleFilterKeys,
+  SaleListFilterOpts,
+  createFilterStructure
+} from "./filters";
 
 export interface SaleListPageProps
   extends PageListProps,

src/discounts/components/SaleListPage/filters.ts

@@ -0,0 +1,116 @@
+import { defineMessages, IntlShape } from "react-intl";
+
+import { FilterOpts, MinMax } from "@saleor/types";
+import {
+  DiscountStatusEnum,
+  DiscountValueTypeEnum
+} from "@saleor/types/globalTypes";
+import {
+  createDateField,
+  createOptionsField
+} from "@saleor/utils/filters/fields";
+import { IFilter } from "@saleor/components/Filter";
+
+export enum SaleFilterKeys {
+  saleType = "saleType",
+  started = "started",
+  status = "status"
+}
+
+export interface SaleListFilterOpts {
+  saleType: FilterOpts<DiscountValueTypeEnum>;
+  started: FilterOpts<MinMax>;
+  status: FilterOpts<DiscountStatusEnum[]>;
+}
+
+const messages = defineMessages({
+  active: {
+    defaultMessage: "Active",
+    description: "sale status"
+  },
+  expired: {
+    defaultMessage: "Expired",
+    description: "sale status"
+  },
+  fixed: {
+    defaultMessage: "Fixed amount",
+    description: "discount type"
+  },
+  percentage: {
+    defaultMessage: "Percentage",
+    description: "discount type"
+  },
+  scheduled: {
+    defaultMessage: "Scheduled",
+    description: "sale status"
+  },
+  started: {
+    defaultMessage: "Started",
+    description: "sale start date"
+  },
+  status: {
+    defaultMessage: "Status",
+    description: "sale status"
+  },
+  type: {
+    defaultMessage: "Discount Type"
+  }
+});
+
+export function createFilterStructure(
+  intl: IntlShape,
+  opts: SaleListFilterOpts
+): IFilter<SaleFilterKeys> {
+  return [
+    {
+      ...createDateField(
+        SaleFilterKeys.started,
+        intl.formatMessage(messages.started),
+        opts.started.value
+      ),
+      active: opts.started.active
+    },
+    {
+      ...createOptionsField(
+        SaleFilterKeys.status,
+        intl.formatMessage(messages.status),
+        opts.status.value,
+        true,
+        [
+          {
+            label: intl.formatMessage(messages.active),
+            value: DiscountStatusEnum.ACTIVE
+          },
+          {
+            label: intl.formatMessage(messages.expired),
+            value: DiscountStatusEnum.EXPIRED
+          },
+          {
+            label: intl.formatMessage(messages.scheduled),
+            value: DiscountStatusEnum.SCHEDULED
+          }
+        ]
+      ),
+      active: opts.status.active
+    },
+    {
+      ...createOptionsField(
+        SaleFilterKeys.saleType,
+        intl.formatMessage(messages.type),
+        [opts.saleType.value],
+        false,
+        [
+          {
+            label: intl.formatMessage(messages.fixed),
+            value: DiscountValueTypeEnum.FIXED
+          },
+          {
+            label: intl.formatMessage(messages.percentage),
+            value: DiscountValueTypeEnum.PERCENTAGE
+          }
+        ]
+      ),
+      active: opts.saleType.active
+    }
+  ];
+}

src/discounts/components/SaleListPage/index.ts

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

src/discounts/types.ts

@@ -1,15 +1,8 @@
-import { FilterOpts, MinMax } from "@saleor/types";
 import {
-  DiscountStatusEnum,
+  VoucherDiscountType,
-  DiscountValueTypeEnum,
+  DiscountStatusEnum
-  VoucherDiscountType
 } from "@saleor/types/globalTypes";
-
+import { MinMax, FilterOpts } from "@saleor/types";
-export interface SaleListFilterOpts {
-  saleType: FilterOpts<DiscountValueTypeEnum>;
-  started: FilterOpts<MinMax>;
-  status: FilterOpts<DiscountStatusEnum[]>;
-}
 
 export interface VoucherListFilterOpts {
   saleType: FilterOpts<VoucherDiscountType[]>;

src/discounts/views/SaleList/SaleList.tsx

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

src/discounts/views/SaleList/filters.ts

@@ -1,17 +1,14 @@
-import { IntlShape } from "react-intl";
-
 import {
-  SaleFilterInput,
   DiscountStatusEnum,
-  DiscountValueTypeEnum
+  DiscountValueTypeEnum,
+  SaleFilterInput
 } from "@saleor/types/globalTypes";
 import { maybe, findValueInEnum, joinDateTime } from "@saleor/misc";
-import { SaleListFilterOpts } from "@saleor/discounts/types";
+import { IFilterElement } from "@saleor/components/Filter";
-import { IFilter, IFilterElement } from "@saleor/components/Filter";
 import {
-  createDateField,
+  SaleListFilterOpts,
-  createOptionsField
+  SaleFilterKeys
-} from "@saleor/utils/filters/fields";
+} from "@saleor/discounts/components/SaleListPage";
 import {
   createFilterTabUtils,
   createFilterUtils,
@@ -22,16 +19,9 @@ import {
   SaleListUrlFiltersEnum,
   SaleListUrlQueryParams
 } from "../../urls";
-import messages from "./messages";
 
 export const SALE_FILTERS_KEY = "saleFilters";
 
-export enum SaleFilterKeys {
-  saleType = "saleType",
-  started = "started",
-  status = "status"
-}
-
 export function getFilterOpts(params: SaleListUrlFilters): SaleListFilterOpts {
   return {
     saleType: {
@@ -66,64 +56,6 @@ export function getFilterOpts(params: SaleListUrlFilters): SaleListFilterOpts {
   };
 }
 
-export function createFilterStructure(
-  intl: IntlShape,
-  opts: SaleListFilterOpts
-): IFilter<SaleFilterKeys> {
-  return [
-    {
-      ...createDateField(
-        SaleFilterKeys.started,
-        intl.formatMessage(messages.started),
-        opts.started.value
-      ),
-      active: opts.started.active
-    },
-    {
-      ...createOptionsField(
-        SaleFilterKeys.status,
-        intl.formatMessage(messages.status),
-        opts.status.value,
-        true,
-        [
-          {
-            label: intl.formatMessage(messages.active),
-            value: DiscountStatusEnum.ACTIVE
-          },
-          {
-            label: intl.formatMessage(messages.expired),
-            value: DiscountStatusEnum.EXPIRED
-          },
-          {
-            label: intl.formatMessage(messages.scheduled),
-            value: DiscountStatusEnum.SCHEDULED
-          }
-        ]
-      ),
-      active: opts.status.active
-    },
-    {
-      ...createOptionsField(
-        SaleFilterKeys.saleType,
-        intl.formatMessage(messages.type),
-        [opts.saleType.value],
-        false,
-        [
-          {
-            label: intl.formatMessage(messages.fixed),
-            value: DiscountValueTypeEnum.FIXED
-          },
-          {
-            label: intl.formatMessage(messages.percentage),
-            value: DiscountValueTypeEnum.PERCENTAGE
-          }
-        ]
-      ),
-      active: opts.saleType.active
-    }
-  ];
-}
-
 export function getFilterVariables(
   params: SaleListUrlFilters
 ): SaleFilterInput {

src/discounts/views/SaleList/messages.ts

@@ -1,37 +0,0 @@
-import { defineMessages } from "react-intl";
-
-const messages = defineMessages({
-  active: {
-    defaultMessage: "Active",
-    description: "sale status"
-  },
-  expired: {
-    defaultMessage: "Expired",
-    description: "sale status"
-  },
-  fixed: {
-    defaultMessage: "Fixed amount",
-    description: "discount type"
-  },
-  percentage: {
-    defaultMessage: "Percentage",
-    description: "discount type"
-  },
-  scheduled: {
-    defaultMessage: "Scheduled",
-    description: "sale status"
-  },
-  started: {
-    defaultMessage: "Started",
-    description: "sale start date"
-  },
-  status: {
-    defaultMessage: "Status",
-    description: "sale status"
-  },
-  type: {
-    defaultMessage: "Discount Type"
-  }
-});
-
-export default messages;