import React from "react";
import { connect } from "react-redux";
import { push } from "redux-router";

import CircularProgress from 'material-ui/CircularProgress';

import { Actions as AppActions } from "../App/redux/actions";
import { Actions as DashboardActions, ActionKeyStore as DashboardActionKeyStore } from "../../utils/dashboards/redux/actions"

class DashboardView extends React.Component {

    componentWillMount() {
        this.props.setPageTitle("Dashboard");
        this.props.fetchDashboardConfiguration(this.props.params.dashboardID);
    };

    render() {
        return (
            <div>
                <p>
                    This dashboard component is loading the configuration file...
                </p>
                {(() => {
                    if (this.props.error){
                        return <div>{this.props.error}</div>
                    }

                    if (this.props.configuration) {
                        let configuration = this.props.configuration.toJS();
                        return <div>#{configuration.id} - {configuration.title}</div>
                    }

                    return <CircularProgress color="#eeeeee"/>
                })()}
            </div>
        );
    }
}


const mapStateToProps = (state, ownProps) => ({

    configuration: state.dashboards.getIn([
        DashboardActionKeyStore.KEY_STORE_DASHBOARDS,
        ownProps.params.dashboardID,
        DashboardActionKeyStore.KEY_STORE_DATA
    ]),

    fetching: state.dashboards.getIn([
        DashboardActionKeyStore.KEY_STORE_DASHBOARDS,
        ownProps.params.dashboardID,
        DashboardActionKeyStore.KEY_STORE_IS_FETCHING
    ]),

    error: state.dashboards.getIn([
        DashboardActionKeyStore.KEY_STORE_DASHBOARDS,
        ownProps.params.dashboardID,
        DashboardActionKeyStore.KEY_STORE_ERROR
    ])
});


const actionCreators = (dispatch) => ({
    setPageTitle: function(aTitle) {
        dispatch(AppActions.updateTitle(aTitle));
    },
    fetchDashboardConfiguration: function(dashboardID) {
        dispatch(DashboardActions.fetch(dashboardID));
    }
 });


export default connect(mapStateToProps, actionCreators)(DashboardView);

@@ -625,12 +625,170 @@
     
-%3Cp%3E%0A
+%7B(() =%3E %7B%0A                    if (this.props.fetching)%0A                        return %3Cp%3E%0A                            %3CCircularProgress color=%22#eeeeee%22/%3E%0A        
     
@@ -885,21 +885,16 @@
     
-%3C/p%3E%0A
         
     
@@ -889,33 +889,21 @@
         
-        %7B(() =%3E %7B
+%3C/p%3E%0A
 %0A       
@@ -936,17 +936,16 @@
 s.error)
-%7B
 %0A       
@@ -997,38 +997,16 @@
 r%7D%3C/div%3E
-%0A                    %7D
 %0A%0A      
@@ -1210,24 +1210,24 @@
 itle%7D%3C/div%3E%0A
+
             
@@ -1239,72 +1239,8 @@
    %7D
-%0A%0A                    return %3CCircularProgress color=%22#eeeeee%22/%3E
 %0A   

Refactor dashboard index