Links on accession browser tabs

src/ui/common/Tabs.tsx

@@ -7,9 +7,7 @@ import * as React from 'react';
 import {translate} from 'react-i18next';
 import {connect} from 'react-redux';
 import { Link } from 'react-router-dom';
-import {bindActionCreators} from 'redux';
 
-import { navigateTo } from 'actions/navigation';
 import MuiTabs from '@material-ui/core/Tabs';
 import MuiTab from '@material-ui/core/Tab';
 import {withStyles} from '@material-ui/core/styles';
@@ -62,6 +60,9 @@ const styles = (theme) => ({
   },
   tabsArea: {
     alignSelf: 'flex-end' as 'flex-end',
+    '& a': {
+      color: 'black',
+    }
   }
 });
 /*tslint:enable*/
@@ -83,7 +84,7 @@ class Tab extends React.Component<ITabProps, any> {
 
 class Tabs extends React.Component<any> {
   public render() {
-    const { tab, children, navigateTo, actions, classes, t } = this.props;
+    const { tab, children, actions, classes, t } = this.props;
 
     const tabs = (children as Tab[]).map((ch) => {
       return {
@@ -97,15 +98,20 @@ class Tabs extends React.Component<any> {
       return t.name === tab;
     }) || 0;
 
-    const tabChange = (e, index) => {
-      navigateTo(tabs[index].to);
-    };
-
     return (
       <Grid  container className={ `pr-10 ${classes.root}` }>
         <Grid item className={ `float-left ${classes.tabsArea}` }>
-          <MuiTabs value={ currentTab } indicatorColor="primary" onChange={ tabChange }>
-            { tabs.map((tab) => <MuiTab key={ tab.to } label={ typeof tab.label === 'string' ? t(tab.label) : tab.label } />) }
+          <MuiTabs value={ currentTab } indicatorColor="primary">
+            { tabs.map((tab) => {
+              return (
+                <MuiTab
+                  key={ tab.to }
+                  label={ typeof tab.label === 'string' ? t(tab.label) : tab.label }
+                  component={ Link as any }
+                  { ...tab }
+                />
+              );
+            }) }
           </MuiTabs>
         </Grid>
         <Grid item className={ `float-right ${classes.actionsArea}` }>
@@ -121,10 +127,6 @@ const mapStateToProps = (state, ownProps) => ({
   foo: ownProps,
 });
 
-const mapDispatchToProps = (dispatch) => bindActionCreators({
-    navigateTo,
-}, dispatch);
-
-const tabs = translate()(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Tabs)));
+const tabs = translate()(connect(mapStateToProps, null)(withStyles(styles)(Tabs)));
 
 export { tabs as default, Tab };