import React, { PropTypes } from 'react';
import { push } from 'react-router-redux';
import { connect } from 'react-redux';
import { projectActions } from './../../core/projects'
import Project from './../components/Project'
import Button from './../components/Button';

class ProjectPage extends React.Component {

    componentDidMount() {
        this.props.fetchProject();
    }

    static propTypes = {
        project: PropTypes.object.isRequired,
        editProjectLink: PropTypes.func.isRequired,
        fetchProject: PropTypes.func.isRequired
    };

    render () {
        const project = this.props.project;
        return (
            <div>
                {project && 
                    <div>
                        <Project project={project} />
                        <Button onClick={this.props.editProjectLink} label="Add locale" />
                    </div>
                }
            </div>
        );
    }
}

const mapStateToProps = (state, ownProps) => {
    const id = ownProps.params.projectId;
    const result = state.projects.projects.find((element) => {
            return element.id == id;
    });
    return {
        project: result
    };
};

const mapDispatchToProps = (dispatch, ownProps) => {
    const id = ownProps.params.projectId;
    return {
        editProjectLink: () => {
            dispatch(push(`/projects/${id}/locales/new`))
        },
        fetchProject: () => {
            dispatch(projectActions.fetchProject(id));
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(ProjectPage);
@@ -262,16 +262,77 @@
 Button';
+%0Aimport CircularProgress from 'material-ui/CircularProgress';
 %0A%0Aclass 
@@ -369,17 +369,16 @@
 onent %7B%0A
-%0A
     comp
@@ -607,16 +607,61 @@
 Required
+,%0A        pending: PropTypes.bool.isRequired,
 %0A    %7D;%0A
@@ -671,17 +671,23 @@
   render
- 
+Project
 () %7B%0A   
@@ -727,16 +727,44 @@
 roject;%0A
+        if (!project) %7B%0A    
         
@@ -776,36 +776,38 @@
 n (%0A            
+   
-%3Cdiv
+ %3Cp
 %3E%0A              
@@ -812,17 +812,23 @@
     
-%7B
+    No 
 project 
 && %0A
@@ -827,11 +827,34 @@
 ect 
-&& 
+found%0A                %3C/p%3E
 %0A   
@@ -862,24 +862,27 @@
         
+);%0A
         
 %3Cdiv%3E%0A  
@@ -877,22 +877,46 @@
     
-%3Cdiv%3E%0A        
+%7D%0A%0A        return (%0A            %3Cdiv%3E%0A
     
@@ -953,32 +953,24 @@
 project%7D /%3E%0A
-        
             
@@ -1040,32 +1040,94 @@
 ale%22 /%3E%0A        
+    %3C/div%3E%0A        );%0A    %7D%0A%0A    render () %7B%0A        return (%0A
             %3C/di
@@ -1115,33 +1115,32 @@
  (%0A            %3C
-/
 div%3E%0A           
@@ -1140,24 +1140,172 @@
             
+%7B(this.props.pending%0A                    ? %3CCircularProgress size=%7B60%7D thickness=%7B7%7D /%3E%0A                    : this.renderProject()%0A                )
 %7D%0A          
@@ -1387,32 +1387,41 @@
 %0A    const id = 
+parseInt(
 ownProps.params.
@@ -1425,24 +1425,29 @@
 ms.projectId
+, 10)
 ;%0A    const 
@@ -1531,16 +1531,17 @@
 nt.id ==
+=
  id;%0A   
@@ -1581,16 +1581,57 @@
 : result
+,%0A        pending: state.projects.pending
 %0A    %7D;%0A

Add null check to render