Add tab selector util for lists and refactor (#1421)

* Add tab selector util for lists, refactor

* Remove unnecessary imports

* Update types

Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com>

Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com>

src/attributes/views/AttributeList/AttributeList.tsx

@@ -1,10 +1,10 @@
 import { IconButton } from "@material-ui/core";
 import DeleteIcon from "@material-ui/icons/Delete";
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
   getFilterOpts,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -92,12 +92,7 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const [openModal, closeModal] = createDialogActionHandlers<
     AttributeListUrlDialog,

src/attributes/views/AttributeList/filters.ts

@@ -132,7 +132,10 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<AttributeListUrlFilters>(ATTRIBUTE_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  AttributeListUrlQueryParams,
+  areFiltersApplied,
-  AttributeListUrlFilters
+  getActiveFilters,
->(AttributeListUrlFiltersEnum);
+  getFiltersCurrentTab
+} = createFilterUtils<AttributeListUrlQueryParams, AttributeListUrlFilters>(
+  AttributeListUrlFiltersEnum
+);

src/categories/views/CategoryList/CategoryList.tsx

@@ -33,9 +33,9 @@ import {
   categoryUrl
 } from "../../urls";
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -73,12 +73,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const changeFilterField = (filter: CategoryListUrlFilters) => {
     reset();

src/categories/views/CategoryList/filter.ts

@@ -26,7 +26,10 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<CategoryListUrlFilters>(CATEGORY_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  CategoryListUrlQueryParams,
+  areFiltersApplied,
-  CategoryListUrlFilters
+  getActiveFilters,
->(CategoryListUrlFiltersEnum);
+  getFiltersCurrentTab
+} = createFilterUtils<CategoryListUrlQueryParams, CategoryListUrlFilters>(
+  CategoryListUrlFiltersEnum
+);

src/collections/views/CollectionList/CollectionList.tsx

@@ -36,11 +36,11 @@ import {
   collectionUrl
 } from "../../urls";
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
   getFilterOpts,
   getFilterQueryParam,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -129,12 +129,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
     }
   }, [params]);
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const [openModal, closeModal] = createDialogActionHandlers<
     CollectionListUrlDialog,

src/collections/views/CollectionList/filters.ts

@@ -78,7 +78,10 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<CollectionListUrlFilters>(COLLECTION_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  CollectionListUrlQueryParams,
+  areFiltersApplied,
-  CollectionListUrlFilters
+  getActiveFilters,
->(CollectionListUrlFiltersEnum);
+  getFiltersCurrentTab
+} = createFilterUtils<CollectionListUrlQueryParams, CollectionListUrlFilters>(
+  CollectionListUrlFiltersEnum
+);

src/customers/views/CustomerList/CustomerList.tsx

@@ -35,11 +35,11 @@ import {
   customerUrl
 } from "../../urls";
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
   getFilterOpts,
   getFilterQueryParam,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -78,12 +78,7 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const [
     changeFilters,

src/customers/views/CustomerList/filters.ts

@@ -97,7 +97,10 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<CustomerListUrlFilters>(CUSTOMER_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  CustomerListUrlQueryParams,
+  areFiltersApplied,
-  CustomerListUrlFilters
+  getActiveFilters,
->(CustomerListUrlFiltersEnum);
+  getFiltersCurrentTab
+} = createFilterUtils<CustomerListUrlQueryParams, CustomerListUrlFilters>(
+  CustomerListUrlFiltersEnum
+);

src/discounts/views/SaleList/SaleList.tsx

@@ -37,11 +37,11 @@ import {
   saleUrl
 } from "../../urls";
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
   getFilterOpts,
   getFilterQueryParam,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -93,12 +93,7 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const [
     changeFilters,

src/discounts/views/SaleList/filters.ts

@@ -123,10 +123,11 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<SaleListUrlFilters>(SALE_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  SaleListUrlQueryParams,
+  areFiltersApplied,
-  SaleListUrlFilters
+  getActiveFilters,
->({
+  getFiltersCurrentTab
+} = createFilterUtils<SaleListUrlQueryParams, SaleListUrlFilters>({
   ...SaleListUrlFiltersEnum,
   ...SaleListUrlFiltersWithMultipleValues
 });

src/discounts/views/VoucherList/VoucherList.tsx

@@ -37,11 +37,11 @@ import {
   voucherUrl
 } from "../../urls";
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
   getFilterOpts,
   getFilterQueryParam,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -94,12 +94,7 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const [
     changeFilters,

src/discounts/views/VoucherList/filters.ts

@@ -153,10 +153,11 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<VoucherListUrlFilters>(VOUCHER_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  VoucherListUrlQueryParams,
+  areFiltersApplied,
-  VoucherListUrlFilters
+  getActiveFilters,
->({
+  getFiltersCurrentTab
+} = createFilterUtils<VoucherListUrlQueryParams, VoucherListUrlFilters>({
   ...VoucherListUrlFiltersEnum,
   ...VoucherListUrlFiltersWithMultipleValues
 });

src/orders/views/OrderDraftList/OrderDraftList.tsx

@@ -40,11 +40,11 @@ import {
   orderUrl
 } from "../../urls";
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
   getFilterOpts,
   getFilterQueryParam,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -90,12 +90,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const [
     changeFilters,

src/orders/views/OrderDraftList/filters.ts

@@ -85,7 +85,10 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<OrderDraftListUrlFilters>(ORDER_DRAFT_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  OrderDraftListUrlQueryParams,
+  areFiltersApplied,
-  OrderDraftListUrlFilters
+  getActiveFilters,
->(OrderDraftListUrlFiltersEnum);
+  getFiltersCurrentTab
+} = createFilterUtils<OrderDraftListUrlQueryParams, OrderDraftListUrlFilters>(
+  OrderDraftListUrlFiltersEnum
+);

src/orders/views/OrderList/OrderList.tsx

@@ -33,11 +33,11 @@ import {
   orderUrl
 } from "../../urls";
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
   getFilterOpts,
   getFilterQueryParam,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -85,12 +85,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const [
     changeFilters,

src/orders/views/OrderList/filters.ts

@@ -116,10 +116,11 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<OrderListUrlFilters>(ORDER_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  OrderListUrlQueryParams,
+  areFiltersApplied,
-  OrderListUrlFilters
+  getActiveFilters,
->({
+  getFiltersCurrentTab
+} = createFilterUtils<OrderListUrlQueryParams, OrderListUrlFilters>({
   ...OrderListUrlFiltersEnum,
   ...OrderListUrlFiltersWithMultipleValues
 });

src/pageTypes/views/PageTypeList/PageTypeList.tsx

@@ -36,9 +36,9 @@ import {
   pageTypeUrl
 } from "../../urls";
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -79,12 +79,7 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const changeFilterField = (filter: PageTypeListUrlFilters) => {
     reset();

src/pageTypes/views/PageTypeList/filters.ts

@@ -26,7 +26,10 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<PageTypeListUrlFilters>(PAGE_TYPE_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  PageTypeListUrlQueryParams,
+  areFiltersApplied,
-  PageTypeListUrlFilters
+  getActiveFilters,
->(PageTypeListUrlFiltersEnum);
+  getFiltersCurrentTab
+} = createFilterUtils<PageTypeListUrlQueryParams, PageTypeListUrlFilters>(
+  PageTypeListUrlFiltersEnum
+);

src/plugins/views/PluginList/PluginList.tsx

@@ -27,11 +27,11 @@ import {
   pluginUrl
 } from "../../urls";
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
   getFilterOpts,
   getFilterQueryParam,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -65,12 +65,7 @@ export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const [
     changeFilters,

src/plugins/views/PluginList/filters.ts

@@ -123,7 +123,10 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<PluginListUrlFilters>(PLUGIN_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  PluginListUrlQueryParams,
+  areFiltersApplied,
-  PluginListUrlFilters
+  getActiveFilters,
->(PluginListUrlFiltersEnum);
+  getFiltersCurrentTab
+} = createFilterUtils<PluginListUrlQueryParams, PluginListUrlFilters>(
+  PluginListUrlFiltersEnum
+);

src/productTypes/views/ProductTypeList/ProductTypeList.tsx

@@ -37,11 +37,11 @@ import {
   productTypeUrl
 } from "../../urls";
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
   getFilterOpts,
   getFilterQueryParam,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -83,12 +83,7 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const [
     changeFilters,

src/productTypes/views/ProductTypeList/filters.ts

@@ -80,7 +80,10 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<ProductTypeListUrlFilters>(PRODUCT_TYPE_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  ProductTypeListUrlQueryParams,
+  areFiltersApplied,
-  ProductTypeListUrlFilters
+  getActiveFilters,
->(ProductTypeListUrlFiltersEnum);
+  getFiltersCurrentTab
+} = createFilterUtils<ProductTypeListUrlQueryParams, ProductTypeListUrlFilters>(
+  ProductTypeListUrlFiltersEnum
+);

src/products/views/ProductList/ProductList.tsx

@@ -68,11 +68,11 @@ import {
   useProductExport
 } from "../../mutations";
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
   getFilterOpts,
   getFilterQueryParam,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -192,12 +192,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const countAllProducts = useProductCountQuery({
     skip: params.action !== "export"

src/products/views/ProductList/filters.ts

@@ -386,10 +386,11 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<ProductListUrlFilters>(PRODUCT_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  ProductListUrlQueryParams,
+  areFiltersApplied,
-  ProductListUrlFilters
+  getActiveFilters,
->({
+  getFiltersCurrentTab
+} = createFilterUtils<ProductListUrlQueryParams, ProductListUrlFilters>({
   ...ProductListUrlFiltersEnum,
   ...ProductListUrlFiltersWithMultipleValues,
   ...ProductListUrlFiltersAsDictWithMultipleValues

src/staff/views/StaffList/StaffList.tsx

@@ -38,11 +38,11 @@ import {
   staffMemberDetailsUrl
 } from "../../urls";
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
   getFilterOpts,
   getFilterQueryParam,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -103,12 +103,7 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const [
     changeFilters,

src/staff/views/StaffList/filters.ts

@@ -62,7 +62,10 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<StaffListUrlFilters>(STAFF_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  StaffListUrlQueryParams,
+  areFiltersApplied,
-  StaffListUrlFilters
+  getActiveFilters,
->(StaffListUrlFiltersEnum);
+  getFiltersCurrentTab
+} = createFilterUtils<StaffListUrlQueryParams, StaffListUrlFilters>(
+  StaffListUrlFiltersEnum
+);

src/utils/filters/filters.ts

@@ -1,5 +1,6 @@
 import { IFilter, IFilterElement } from "@saleor/components/Filter";
 import { findValueInEnum } from "@saleor/misc";
+import { ActiveTab } from "@saleor/types";
 import isArray from "lodash/isArray";
 
 function createFilterUtils<
@@ -19,9 +20,21 @@ function createFilterUtils<
     return Object.keys(getActiveFilters(params)).some(key => !!params[key]);
   }
 
+  function getFiltersCurrentTab<TQueryTabParams extends ActiveTab>(
+    params: TQueryTabParams,
+    tabs: unknown[]
+  ) {
+    return params.activeTab === undefined
+      ? areFiltersApplied((params as unknown) as TQueryParams)
+        ? tabs.length + 1
+        : 0
+      : parseInt(params.activeTab, 0);
+  }
+
   return {
     areFiltersApplied,
-    getActiveFilters
+    getActiveFilters,
+    getFiltersCurrentTab
   };
 }
 

src/warehouses/views/WarehouseList/WarehouseList.tsx

@@ -35,9 +35,9 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import {
-  areFiltersApplied,
   deleteFilterTab,
   getActiveFilters,
+  getFiltersCurrentTab,
   getFilterTabs,
   getFilterVariables,
   saveFilterTab
@@ -91,12 +91,7 @@ const WarehouseList: React.FC<WarehouseListProps> = ({ params }) => {
 
   const tabs = getFilterTabs();
 
-  const currentTab =
+  const currentTab = getFiltersCurrentTab(params, tabs);
-    params.activeTab === undefined
-      ? areFiltersApplied(params)
-        ? tabs.length + 1
-        : 0
-      : parseInt(params.activeTab, 0);
 
   const [, resetFilters, handleSearchChange] = createFilterHandlers({
     createUrl: warehouseListUrl,

src/warehouses/views/WarehouseList/filters.ts

@@ -26,7 +26,10 @@ export const {
   saveFilterTab
 } = createFilterTabUtils<WarehouseListUrlFilters>(WAREHOUSE_FILTERS_KEY);
 
-export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
+export const {
-  WarehouseListUrlQueryParams,
+  areFiltersApplied,
-  WarehouseListUrlFilters
+  getActiveFilters,
->(WarehouseListUrlFiltersEnum);
+  getFiltersCurrentTab
+} = createFilterUtils<WarehouseListUrlQueryParams, WarehouseListUrlFilters>(
+  WarehouseListUrlFiltersEnum
+);