WIP Version 0.0.1

client/src/containers/Accounts/AccountsViewsTabs.js

@@ -0,0 +1,132 @@
+import React, {useEffect, useCallback} from 'react';
+import { useHistory } from 'react-router';
+import { connect } from 'react-redux';
+import {
+  Alignment,
+  Navbar,
+  NavbarGroup,
+  Tabs,
+  Tab,
+  Button
+} from '@blueprintjs/core';
+import { useParams, withRouter } from 'react-router-dom';
+import Icon from 'components/Icon';
+import { Link } from 'react-router-dom';
+import { compose } from 'utils';
+import {useUpdateEffect} from 'hooks';
+
+import withDashboard from 'containers/Dashboard/withDashboard';
+import withAccounts from 'containers/Accounts/withAccounts';
+import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
+import withViewDetail from 'containers/Views/withViewDetails';
+
+function AccountsViewsTabs({
+  // #withViewDetail
+  viewId,
+  viewItem,
+
+  // #withAccounts
+  accountsViews,
+
+  // #withAccountsTableActions
+  addAccountsTableQueries,
+  changeAccountsCurrentView,
+
+  // #withDashboard
+  setTopbarEditView,
+  changePageSubtitle,
+
+  // props
+  customViewChanged,
+  onViewChanged,
+}) {
+  const history = useHistory();
+  const { custom_view_id: customViewId = null } = useParams();
+
+  useEffect(() => {
+    changeAccountsCurrentView(customViewId || -1);
+    setTopbarEditView(customViewId);
+    changePageSubtitle((customViewId && viewItem) ? viewItem.name : '');
+
+    addAccountsTableQueries({
+      custom_view_id: customViewId,
+    });
+
+    return () => {
+      setTopbarEditView(null);
+      changePageSubtitle('');
+      changeAccountsCurrentView(null)
+    };
+  }, [customViewId]);
+
+  useUpdateEffect(() => {
+    onViewChanged && onViewChanged(customViewId);
+  }, [customViewId]);
+
+
+  // Handle click a new view tab.
+  const handleClickNewView = () => {
+    setTopbarEditView(null);
+    history.push('/dashboard/custom_views/accounts/new');
+  };
+
+  // Handle view tab link click.
+  const handleViewLinkClick = () => {
+    setTopbarEditView(customViewId);
+  };
+
+  const tabs = accountsViews.map((view) => {
+    const baseUrl = '/dashboard/accounts';
+
+    const link = (
+      <Link
+        to={`${baseUrl}/${view.id}/custom_view`}
+        onClick={handleViewLinkClick}
+      >{ view.name }</Link>
+    );
+    return <Tab id={`custom_view_${view.id}`} title={link} />;
+  });
+
+  return (
+    <Navbar className='navbar--dashboard-views'>
+      <NavbarGroup align={Alignment.LEFT}>
+        <Tabs
+          id='navbar'
+          large={true}
+          selectedTabId={customViewId ? `custom_view_${customViewId}` : 'all'}
+          className='tabs--dashboard-views'
+        >
+          <Tab
+            id={'all'}
+            title={<Link to={`/dashboard/accounts`}>All</Link>}
+            onClick={handleViewLinkClick}
+          />
+          { tabs }
+          <Button
+            className='button--new-view'
+            icon={<Icon icon='plus' />}
+            onClick={handleClickNewView}
+            minimal={true}
+          />
+        </Tabs>
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+const mapStateToProps = (state, ownProps) => ({
+
+  // Mapping view id from matched route params.
+  viewId: ownProps.match.params.custom_view_id,
+});
+
+const withAccountsViewsTabs = connect(mapStateToProps);
+
+export default compose(
+  withRouter,
+  withAccountsViewsTabs,
+  withDashboard,
+  withAccounts,
+  withAccountsTableActions,
+  withViewDetail
+)(AccountsViewsTabs);