WIP

client/src/components/Expenses/ExpensesViewsTabs.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import {useHistory} from 'react-router';
+import {connect} from 'react-redux';
+import {
+  Alignment,
+  Navbar,
+  NavbarGroup,
+  Tabs,
+  Tab,
+  Button
+} from "@blueprintjs/core";
+import Icon from 'components/Icon';
+import {useRouteMatch, Link} from 'react-router-dom';
+
+function AccountsViewsTabs({ views }) {
+  const history = useHistory();
+  const {path} = useRouteMatch();
+
+  const handleClickNewView = () => {
+    history.push('/dashboard/custom_views/new');
+  };
+
+  const tabs = views.map((view) => {
+    const link = (<Link to={`${path}/${view.id}/custom_view`}>{ 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}
+          className="tabs--dashboard-views"
+        >
+          { tabs }
+          <Button
+            className="button--new-view"
+            icon={<Icon icon="plus" />}
+            onClick={handleClickNewView} />
+        </Tabs>
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  views: state.views.resourceViews['expenses'],
+});
+
+export default connect(mapStateToProps)(AccountsViewsTabs);