fix: custom views tabs.

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
@@ -8,7 +7,7 @@ import withEstimatesActions from './withEstimatesActions';
 import withEstimates from './withEstimates';
 
 import { useEstimatesListContext } from './EstimatesListProvider';
-import { compose } from 'utils';
+import { compose, transfromViewsToTabs } from 'utils';
 
 /**
  * Estimates views tabs.
@@ -18,26 +17,24 @@ function EstimateViewTabs({
   setEstimatesTableState,
 
   // #withEstimates
-  estimatesTableState
+  estimatesCurrentView,
 }) {
   // Estimates list context.
   const { estimatesViews } = useEstimatesListContext();
  
   // Estimates views.
-  const tabs = estimatesViews.map((view) => ({
-    ...pick(view, ['name', 'id']),
-  }));
+  const tabs = transfromViewsToTabs(estimatesViews);
 
   // Handle tab change.
-  const handleTabsChange = (customViewId) => {
-    setEstimatesTableState({ customViewId: customViewId || null });
+  const handleTabsChange = (viewSlug) => {
+    setEstimatesTableState({ viewSlug: viewSlug || null });
   };
 
   return (
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          currentViewId={estimatesTableState.customViewId}
+          currentViewSlug={estimatesCurrentView}
           resourceName={'estimates'}
           tabs={tabs}
           onChange={handleTabsChange}
@@ -49,5 +46,7 @@ function EstimateViewTabs({
 
 export default compose(
   withEstimatesActions,
-  withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
+  withEstimates(({ estimatesTableState }) => ({
+    estimatesCurrentView: estimatesTableState.viewSlug
+  })),
 )(EstimateViewTabs);

client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import { useHistory } from 'react-router';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
 import withInvoices from './withInvoices';
 import withInvoiceActions from './withInvoiceActions';
 
-import { compose } from 'utils';
+import { compose, transfromViewsToTabs } from 'utils';
 import { useInvoicesListContext } from './InvoicesListProvider';
 
 /**
@@ -19,24 +18,21 @@ function InvoiceViewTabs({
   setInvoicesTableState,
 
   // #withInvoices
-  invoicesTableState
+  invoicesCurrentView,
 }) {
   const history = useHistory();
 
   // Invoices list context.
   const { invoicesViews } = useInvoicesListContext();
 
-  const tabs = invoicesViews.map((view) => ({
-    ...pick(view, ['name', 'id']),
-  }));
+  const tabs = transfromViewsToTabs(invoicesViews);
 
   // Handle tab change.
-  const handleTabsChange = (customViewId) => {    
+  const handleTabsChange = (viewSlug) => {
     setInvoicesTableState({
-      customViewId: customViewId || null,
+      viewSlug: viewSlug || null,
     });
   };
-
   // Handle click a new view tab.
   const handleClickNewView = () => {
     history.push('/custom_views/invoices/new');
@@ -46,7 +42,7 @@ function InvoiceViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          currentViewId={invoicesTableState.customViewId}
+          currentViewSlug={invoicesCurrentView}
           resourceName={'invoices'}
           tabs={tabs}
           onNewViewTabClick={handleClickNewView}
@@ -59,5 +55,7 @@ function InvoiceViewTabs({
 
 export default compose(
   withInvoiceActions,
-  withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
+  withInvoices(({ invoicesTableState }) => ({
+    invoicesCurrentView: invoicesTableState.viewSlug,
+  })),
 )(InvoiceViewTabs);

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 import withReceiptActions from './withReceiptsActions';
 import withReceipts from './withReceipts';
 
-import { compose } from 'utils';
+import { compose, transfromViewsToTabs } from 'utils';
 import { useReceiptsListContext } from './ReceiptsListProvider';
 
 /**
@@ -17,19 +16,17 @@ function ReceiptViewTabs({
   setReceiptsTableState,
 
   // #withReceipts
-  receiptTableState,
+  receiptsCurrentView,
 }) {
   // Receipts list context.
   const { receiptsViews } = useReceiptsListContext();
 
-  const tabs = receiptsViews.map((view) => ({
-    ...pick(view, ['name', 'id']),
-  }));
+  const tabs = transfromViewsToTabs(receiptsViews);
 
   // Handles the active tab chaning.
-  const handleTabsChange = (customViewId) => {
+  const handleTabsChange = (viewSlug) => {
     setReceiptsTableState({
-      customViewId: customViewId || null,
+      viewSlug: viewSlug || null,
     });
   };
 
@@ -37,7 +34,7 @@ function ReceiptViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          currentViewId={receiptTableState.customViewId}
+          currentViewSlug={receiptsCurrentView}
           tabs={tabs}
           resourceName={'receipts'}
           onChange={handleTabsChange}
@@ -49,5 +46,7 @@ function ReceiptViewTabs({
 
 export default compose(
   withReceiptActions,
-  withReceipts(({ receiptTableState }) => ({ receiptTableState })),
+  withReceipts(({ receiptTableState }) => ({
+    receiptsCurrentView: receiptTableState.viewSlug,
+  })),
 )(ReceiptViewTabs);