Separate visual and app layer in staff members

src/productTypes/views/ProductTypeList/filters.ts

@@ -5,7 +5,10 @@ import {
 } from "@saleor/types/globalTypes";
 import { IFilterElement } from "@saleor/components/Filter";
 import { maybe, findValueInEnum } from "@saleor/misc";
-import { ProductTypeFilterKeys } from "@saleor/productTypes/components/ProductTypeListPage";
+import {
+  ProductTypeFilterKeys,
+  ProductTypeListFilterOpts
+} from "@saleor/productTypes/components/ProductTypeListPage";
 import {
   createFilterTabUtils,
   createFilterUtils
@@ -15,7 +18,6 @@ import {
   ProductTypeListUrlFiltersEnum,
   ProductTypeListUrlQueryParams
 } from "../../urls";
-import { ProductTypeListFilterOpts } from "../../types";
 
 export const PRODUCT_TYPE_FILTERS_KEY = "productTypeFilters";
 

src/staff/components/StaffListPage/StaffListPage.tsx

@@ -15,13 +15,13 @@ import {
   SortPage
 } from "@saleor/types";
 import { StaffListUrlSortField } from "@saleor/staff/urls";
-import {
-  StaffFilterKeys,
-  createFilterStructure
-} from "@saleor/staff/views/StaffList/filter";
-import { StaffListFilterOpts } from "@saleor/staff/types";
 import { StaffList_staffUsers_edges_node } from "../../types/StaffList";
 import StaffList from "../StaffList/StaffList";
+import {
+  createFilterStructure,
+  StaffFilterKeys,
+  StaffListFilterOpts
+} from "./filters";
 
 export interface StaffListPageProps
   extends ListProps,

src/staff/components/StaffListPage/filters.ts

@@ -0,0 +1,56 @@
+import { IntlShape, defineMessages } from "react-intl";
+
+import { FilterOpts } from "@saleor/types";
+import { StaffMemberStatus } from "@saleor/types/globalTypes";
+import { IFilter } from "@saleor/components/Filter";
+import { createOptionsField } from "@saleor/utils/filters/fields";
+
+export enum StaffFilterKeys {
+  status = "status"
+}
+
+export interface StaffListFilterOpts {
+  status: FilterOpts<StaffMemberStatus>;
+}
+
+const messages = defineMessages({
+  active: {
+    defaultMessage: "Active",
+    description: "staff member's account"
+  },
+  deactivated: {
+    defaultMessage: "Deactivated",
+    description: "staff member's account"
+  },
+  status: {
+    defaultMessage: "Status",
+    description: "staff member's account"
+  }
+});
+
+export function createFilterStructure(
+  intl: IntlShape,
+  opts: StaffListFilterOpts
+): IFilter<StaffFilterKeys> {
+  return [
+    {
+      ...createOptionsField(
+        StaffFilterKeys.status,
+        intl.formatMessage(messages.status),
+        [opts.status.value],
+        false,
+        [
+          {
+            label: intl.formatMessage(messages.active),
+            value: StaffMemberStatus.ACTIVE
+          },
+          {
+            label: intl.formatMessage(messages.deactivated),
+            value: StaffMemberStatus.DEACTIVATED
+          }
+        ]
+      ),
+      active: opts.status.active
+    }
+  ];
+}

src/staff/components/StaffListPage/index.ts

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

src/staff/types.ts

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

src/staff/views/StaffList/StaffList.tsx

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

src/staff/views/StaffList/filters.ts

@@ -1,9 +1,10 @@
-import { IntlShape } from "react-intl";
-
 import { StaffUserInput, StaffMemberStatus } from "@saleor/types/globalTypes";
 import { maybe, findValueInEnum } from "@saleor/misc";
-import { IFilter, IFilterElement } from "@saleor/components/Filter";
+import { IFilterElement } from "@saleor/components/Filter";
-import { createOptionsField } from "@saleor/utils/filters/fields";
+import {
+  StaffListFilterOpts,
+  StaffFilterKeys
+} from "@saleor/staff/components/StaffListPage";
 import {
   createFilterTabUtils,
   createFilterUtils
@@ -13,15 +14,9 @@ import {
   StaffListUrlFiltersEnum,
   StaffListUrlQueryParams
 } from "../../urls";
-import { StaffListFilterOpts } from "../../types";
-import messages from "./messages";
 
 export const STAFF_FILTERS_KEY = "staffFilters";
 
-export enum StaffFilterKeys {
-  status = "status"
-}
-
 export function getFilterOpts(
   params: StaffListUrlFilters
 ): StaffListFilterOpts {
@@ -33,33 +28,6 @@ export function getFilterOpts(
   };
 }
 
-export function createFilterStructure(
-  intl: IntlShape,
-  opts: StaffListFilterOpts
-): IFilter<StaffFilterKeys> {
-  return [
-    {
-      ...createOptionsField(
-        StaffFilterKeys.status,
-        intl.formatMessage(messages.status),
-        [opts.status.value],
-        false,
-        [
-          {
-            label: intl.formatMessage(messages.active),
-            value: StaffMemberStatus.ACTIVE
-          },
-          {
-            label: intl.formatMessage(messages.deactivated),
-            value: StaffMemberStatus.DEACTIVATED
-          }
-        ]
-      ),
-      active: opts.status.active
-    }
-  ];
-}
-
 export function getFilterVariables(
   params: StaffListUrlFilters
 ): StaffUserInput {

src/staff/views/StaffList/messages.ts

@@ -1,18 +0,0 @@
-import { defineMessages } from "react-intl";
-
-const messages = defineMessages({
-  active: {
-    defaultMessage: "Active",
-    description: "staff member's account"
-  },
-  deactivated: {
-    defaultMessage: "Deactivated",
-    description: "staff member's account"
-  },
-  status: {
-    defaultMessage: "Status",
-    description: "staff member's account"
-  }
-});
-
-export default messages;