From 12f5945e82b724c0aecdc865a37d2581ef9dc65b Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Wed, 15 Apr 2020 01:44:25 +0200
Subject: [PATCH] optimize filter items button.

---
 .../src/components/Accounts/AccountsActionsBar.js  |  8 ++++----
 .../containers/Dashboard/Items/ItemsActionsBar.js  | 14 +++++++-------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Accounts/AccountsActionsBar.js b/client/src/components/Accounts/AccountsActionsBar.js
index b8cc91984..c93d23faa 100644
--- a/client/src/components/Accounts/AccountsActionsBar.js
+++ b/client/src/components/Accounts/AccountsActionsBar.js
@@ -34,6 +34,7 @@ function AccountsActionsBar({
   const onClickNewAccount = () => { openDialog('account-form', {}); };
 
   const accountsFields = getResourceFields('accounts');
+  const [filterCount, setFilterCount] = useState(0);
 
   const viewsMenuItems = views.map((view) => {
     return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />);
@@ -43,6 +44,7 @@ function AccountsActionsBar({
   const filterDropdown = FilterDropdown({
     fields: accountsFields,
     onFilterChange: (filterConditions) => {
+      setFilterCount(filterConditions.length || 0);
       addAccountsTableQueries({
         filter_roles: filterConditions || '',  
       });
@@ -81,9 +83,8 @@ function AccountsActionsBar({
 
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text="Filter"
-            icon={ <Icon icon="filter" /> } />
-
+            text={filterCount <= 0 ? 'Filter' : `${filterCount} filters applied`}
+            icon={ <Icon icon="filter" /> }/>
         </Popover>
 
         {hasSelectedRows && (
@@ -93,7 +94,6 @@ function AccountsActionsBar({
             text='Archive'
           />
         )}
-
         {hasSelectedRows && (
           <Button
             className={Classes.MINIMAL}
diff --git a/client/src/containers/Dashboard/Items/ItemsActionsBar.js b/client/src/containers/Dashboard/Items/ItemsActionsBar.js
index 4871d27de..910371efc 100644
--- a/client/src/containers/Dashboard/Items/ItemsActionsBar.js
+++ b/client/src/containers/Dashboard/Items/ItemsActionsBar.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useState } from 'react';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
@@ -34,11 +34,10 @@ const ItemsActionsBar = ({
 }) => {
   const { path } = useRouteMatch();
   const history = useHistory();
-  const viewsMenuItems = views.map(view => {
-    return (
-      <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
-    );
-  });
+  const [filterCount, setFilterCount] = useState(0);
+
+  const viewsMenuItems = views.map(view => 
+    (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />));
 
   const onClickNewItem = () => {
     history.push('/dashboard/items/new');
@@ -48,6 +47,7 @@ const ItemsActionsBar = ({
   const filterDropdown = FilterDropdown({
     fields: itemsFields,
     onFilterChange: (filterConditions) => {
+      setFilterCount(filterConditions.length);
       addItemsTableQueries({
         filter_roles: filterConditions || '',  
       });
@@ -90,7 +90,7 @@ const ItemsActionsBar = ({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text='Filter'
+            text={filterCount <= 0 ? 'Filter' : `${filterCount} filters applied`}
             icon={<Icon icon='filter' />}
           />
         </Popover>