fix: View.

client/src/containers/Expenses/ExpenseActionsBar.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useState } from 'react';
 import Icon from 'components/Icon';
 import {
   Button,
@@ -21,7 +21,7 @@ import FilterDropdown from 'components/FilterDropdown';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
-import { If } from 'components';
+import { If, DashboardActionViewsList } from 'components';
 
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withExpenses from 'containers/Expenses/withExpenses';
@@ -29,6 +29,9 @@ import withExpensesActions from 'containers/Expenses/withExpensesActions';
 
 import { compose } from 'utils';
 
+/**
+ * Expenses actions bar.
+ */
 function ExpensesActionsBar({
   // #withResourceDetail
   resourceFields,
@@ -38,18 +41,15 @@ function ExpensesActionsBar({
 
   //#withExpensesActions
   addExpensesTableQueries,
+  changeExpensesView,
 
   onFilterChanged,
   selectedRows,
   onBulkDelete,
 }) {
-  const { path } = useRouteMatch();
+  const [filterCount, setFilterCount] = useState(0);
   const history = useHistory();
 
-  const viewsMenuItems = expensesViews.map((view) => (
-    <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
-  ));
-
   const onClickNewExpense = useCallback(() => {
     history.push('/expenses/new');
   }, [history]);
@@ -78,22 +78,20 @@ function ExpensesActionsBar({
     onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
   }, [onBulkDelete, selectedRows]);
 
+  const handleTabChange = (viewId) => {
+    changeExpensesView(viewId.id || -1);
+    addExpensesTableQueries({
+      custom_view_id: viewId.id || null,
+    });
+  };
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Popover
-          content={<Menu>{viewsMenuItems}</Menu>}
-          minimal={true}
-          interactionKind={PopoverInteractionKind.HOVER}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={<Icon icon="table-16" iconSize={16} />}
-            text={<T id={'table_views'} />}
-            rightIcon={'caret-down'}
-          />
-        </Popover>
+        <DashboardActionViewsList
+          resourceName={'expenses'}
+          views={expensesViews}
+          onChange={handleTabChange}
+        />
         <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
@@ -108,7 +106,9 @@ function ExpensesActionsBar({
           position={Position.BOTTOM_LEFT}
         >
           <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
+            className={classNames(Classes.MINIMAL, 'button--filter', {
+              'has-active-filters': filterCount > 0,
+            })}
             text="Filter"
             icon={<Icon icon="filter-16" iconSize={16} />}
           />

client/src/containers/Expenses/ExpenseViewTabs.js

@@ -3,10 +3,9 @@ import { useHistory } from 'react-router';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { useParams, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { pick, debounce } from 'lodash';
+import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
-import { useUpdateEffect } from 'hooks';
 
 import withExpenses from './withExpenses';
 import withExpensesActions from './withExpensesActions';
@@ -15,6 +14,9 @@ import withViewDetails from 'containers/Views/withViewDetails';
 
 import { compose } from 'utils';
 
+/**
+ * Expesne views tabs.
+ */
 function ExpenseViewTabs({
   // #withExpenses
   expensesViews,
@@ -38,55 +40,32 @@ function ExpenseViewTabs({
   const { custom_view_id: customViewId = null } = useParams();
 
   useEffect(() => {
-    changeExpensesView(customViewId || -1);
     setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-
-    addExpensesTableQueries({
-      custom_view_id: customViewId,
-    });
-    return () => {
-      setTopbarEditView(null);
-      changePageSubtitle('');
-      changeExpensesView(null);
-    };
-  }, [customViewId, addExpensesTableQueries, changeExpensesView]);
-
-  useUpdateEffect(() => {
-    onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
-  const debounceChangeHistory = useRef(
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
-
-  const handleTabsChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/expenses-list/${toPath}`);
-    setTopbarEditView(viewId);
+  const handleTabChange = (viewId) => {
+    changeExpensesView(viewId || -1);
+    addExpensesTableQueries({
+      custom_view_id: viewId || null,
+    });
   };
-
   const tabs = expensesViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
 
   // Handle click a new view tab.
-  const handleClickNewView = () => {
-    setTopbarEditView(null);
-    history.push('/custom_views/expenses/new');
-  };
+  const handleClickNewView = () => {};
 
   return (
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           initialViewId={customViewId}
-          baseUrl={'/expenses-list'}
+          resourceName={'expenses'}
           tabs={tabs}
           onNewViewTabClick={handleClickNewView}
-          onChange={handleTabsChange}
+          onChange={handleTabChange}
         />
       </NavbarGroup>
     </Navbar>