import React, { Component, Fragment } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as chartActions from '../actions/chart';
import AlbumsContainer from './AlbumsContainer';
import MoviesContainer from './MoviesContainer';
import Chart from '../components/Chart/Chart';
import Header from '../components/Header/Header';
// import * as api from '../api/api';

import createHistory from 'history/createBrowserHistory';
import { Router, Route, Link } from 'react-router-dom';

const history = createHistory({
  basename: '/chartify/example/',
  // forceRefresh: false, 
});

class AppContainer extends Component {
  constructor(props) {
    super();
    const { actions } = props;

    // this.state = {
    //   timeMetadata: {
    //     container: 'real-time-container',
    //     header: 'Real-time chart',
    //     total: 'items total ( X - mark date, Y - mark )',
    //     chart: 'time',
    //     getDataset: null, // api.connect
    //   },
    // };
  }

  render() {
    const {
      actions,
    } = this.props;

    return (
      <Router history={history}>
        <Fragment>
          <Header />
          <Route exact path="/" component={AlbumsContainer} />
          <Route path="/albums" component={AlbumsContainer} />
          <Route path="/movies" component={MoviesContainer} />
        </Fragment>
      </Router>
    );
  }
}

const mapStateToProps = state => ({
  // time: state.time,
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(chartActions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(AppContainer);

@@ -486,16 +486,24 @@
  Router,
+ Switch,
  Route, 
@@ -1171,24 +1171,45 @@
  %3CHeader /%3E%0A
+          %3CSwitch%3E%0A  
           %3CR
@@ -1261,32 +1261,34 @@
 r%7D /%3E%0A          
+  
 %3CRoute path=%22/al
@@ -1326,32 +1326,34 @@
 r%7D /%3E%0A          
+  
 %3CRoute path=%22/mo
@@ -1381,32 +1381,170 @@
 esContainer%7D /%3E%0A
+            %3CRoute path=%22%22 component=%7BAlbumsContainer%7D /%3E%0A            %3CRoute path=%22**%22 component=%7BAlbumsContainer%7D /%3E%0A          %3C/Switch%3E%0A
         %3C/Fragme

add switch and no match routes