refactoring: migrating to react-query to manage service-side state.

client/src/containers/Sales/Estimate/EstimateViewTabs.js

@@ -1,66 +1,39 @@
-import React, { useEffect, useRef } from 'react';
-import { useHistory } from 'react-router';
+import React from 'react';
+
 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 { useParams } from 'react-router-dom';
+
+import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
-import withEstimates from './withEstimates';
 import withEstimateActions from './withEstimateActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withViewDetails from 'containers/Views/withViewDetails';
 
+import { useEstimatesListContext } from './EstimatesListProvider';
 import { compose } from 'utils';
 
 /**
  * Estimates views tabs.
  */
 function EstimateViewTabs({
-  // #withExpenses
-  estimateViews,
-
-  // #withViewDetails
-  viewItem,
-
   //#withEstimatesActions
   addEstimatesTableQueries,
-  changeEstimateView,
-
-  // #withDashboardActions
-  setTopbarEditView,
-  changePageSubtitle,
-  // props
-  customViewChanged,
-  onViewChanged,
 }) {
-  const history = useHistory();
   const { custom_view_id: customViewId = null } = useParams();
 
-  useEffect(() => {
-    setTopbarEditView(customViewId);
-    changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-  }, [customViewId]);
-
-  const tabs = estimateViews.map((view) => ({
+  // Estimates list context.
+  const { estimatesViews } = useEstimatesListContext();
+ 
+  const tabs = estimatesViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
 
   const handleTabsChange = (viewId) => {
-    changeEstimateView(viewId || -1);
     addEstimatesTableQueries({
       custom_view_id: viewId || null,
     });
-    setTopbarEditView(viewId);
   };
 
-  // Handle click a new view tab.
-  const handleClickNewView = () => {
-    setTopbarEditView(null);
-    history.push('/custom_views/estimates/new');
-  };
-  
   return (
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
@@ -75,19 +48,6 @@ function EstimateViewTabs({
   );
 }
 
-const mapStateToProps = (state, ownProps) => ({
-  viewId: ownProps.match.params.custom_view_id,
-});
-
-const withEstimatesViewTabs = connect(mapStateToProps);
-
 export default compose(
-  withRouter,
-  withEstimatesViewTabs,
   withEstimateActions,
-  withDashboardActions,
-  withViewDetails(),
-  withEstimates(({ estimateViews }) => ({
-    estimateViews,
-  })),
 )(EstimateViewTabs);