import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import { render } from 'react-dom'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import configureStore from './store/configureStore'
import { Route } from 'react-router-dom'
//import routes from './routes'

import { ConnectedRouter as Router, routerMiddleware, push } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'

const history = createHistory();
const middleware = routerMiddleware(history);
const store = configureStore(middleware);

ReactDOM.render(
        <Provider store={store}>

        <Router history={history} >
            <Route path="/" component={App}/>
        </Router>
    </Provider>, document.getElementById('root'));
registerServiceWorker();
store.subscribe(() => {
    console.log('Store has changed')
})

import { createStore, applyMiddleware, combineReducers } from 'redux'
import rootReducer from '../reducers'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import { routerReducer } from 'react-router-redux'


export default function configureStore(middleware) {
    const reducers = combineReducers({ rootReducer, router: routerReducer })
  const store = createStore(reducers, composeWithDevTools(applyMiddleware(thunk,promise(), middleware )))

  if (module.hot) {
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers')
      store.replaceReducer(nextRootReducer)
    })
  }

  return store
}

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';


import SidebarContainer from './aside/SidebarContainer'

const drawerWidth = 240; //Sidebar have it too
const styles = theme => ...;

class App extends React.Component {

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>

        <div className={classes.appFrame}>
          <AppBar className={classNames(classes.appBar, classes[`appBar-left`])}>
            <Toolbar>

            </Toolbar>
          </AppBar>
          <SidebarContainer/> //ошибка здесь
          <main className={classes.content}>

          </main>
        </div>
      </div>
    );
  }
}

App.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(App);

import React, { Component } from 'react'

import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import Sidebar from './Sidebar'
import {addList,fetchLists,setCurrentList} from '../../actions/'

class SidebarContainer extends Component {
    constructor(props){
        super(props);
        this.state = {

        }
    }
    addList(list){
        this.props.onAddList(list)
    }
    componentWillMount(){
        this.props.onFetchLists()
    }
    render(){
        console.log(this.props.lists)
        return (

            <Sidebar lists={this.props.lists} onBtnAddClick={this.addList.bind(this)}/>

        )
    }
}

function mapStateToProps(state){
    return {
        lists: state.lists,
        currentList: state.currentList
    }
}
function mapDispatchToProps(dispatch){
    return {
        onAddList: (newList) => {
            dispatch(addList(newList))
        },
        onFetchLists: () => {
            dispatch(fetchLists())
        }
    }
}

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