Better error message dialog, delete project ui mock

app/static/app/css/main.scss

@@ -102,7 +102,7 @@ button i.glyphicon{
 
 .dropdown-menu>li>a{
     padding-left: 10px;
-    .fa{
+    .fa, .glyphicon{
         margin-right: 4px;
     }
 }

app/static/app/js/components/ErrorMessage.jsx

@@ -1,26 +1,33 @@
 import React from 'react';
 
 class ErrorMessage extends React.Component {
-    constructor(props){
-        super();
-
-        this.state = {
-            error: props.message
+    static propTypes() {
+        return {
+            bind: React.PropTypes.array.isRequired // two element array, 
+                                                   // with first element being the parent element 
+                                                   // and the second the error property to display
+                                                   // ex. [this, 'error']
         };
+    }
 
+    constructor(props){
+        super(props);
         this.close = this.close.bind(this);
     }
 
     close(){
-        this.setState({error: ""});
+        const [parent, prop] = this.props.bind;
+        parent.setState({[prop]: ""});
     }
 
     render(){
-        if (this.state.error){
+        const [parent, prop] = this.props.bind;
+
+        if (parent.state[prop]){
             return (
                 <div className="alert alert-warning alert-dismissible">
                     <button type="button" className="close" aria-label="Close" onClick={this.close}><span aria-hidden="true">&times;</span></button>
-                    {this.state.error}
+                    {parent.state[prop]}
                 </div>
             );
         }else{

app/static/app/js/components/Map.jsx

@@ -145,7 +145,7 @@ class Map extends React.Component {
 
     return (
       <div style={{height: "100%"}}>
-        <ErrorMessage message={error} />
+        <ErrorMessage bind={[this, 'error']} />
         <div 
           style={{height: "100%"}}
           ref={(domNode) => (this.container = domNode)}

app/static/app/js/components/ProjectListItem.jsx

@@ -4,6 +4,7 @@ import update from 'react-addons-update';
 import TaskList from './TaskList';
 import EditTaskPanel from './EditTaskPanel';
 import UploadProgressBar from './UploadProgressBar';
+import ErrorMessage from './ErrorMessage';
 import Dropzone from '../vendor/dropzone';
 import csrf from '../django/csrf';
 import $ from 'jquery';
@@ -15,7 +16,8 @@ class ProjectListItem extends React.Component {
     this.state = {
       showTaskList: false,
       updatingTask: false,
-      upload: this.getDefaultUploadState()
+      upload: this.getDefaultUploadState(),
+      error: ""
     };
 
     this.toggleTaskList = this.toggleTaskList.bind(this);
@@ -24,11 +26,12 @@ class ProjectListItem extends React.Component {
     this.cancelUpload = this.cancelUpload.bind(this);
     this.handleTaskSaved = this.handleTaskSaved.bind(this);
     this.viewMap = this.viewMap.bind(this);
-
+    this.handleDelete = this.handleDelete.bind(this);
   }
 
   componentWillUnmount(){
     if (this.updateTaskRequest) this.updateTaskRequest.abort();
+    if (this.deleteProjectRequest) this.deleteProjectRequest.abort();
   }
 
   getDefaultUploadState(){
@@ -186,6 +189,24 @@ class ProjectListItem extends React.Component {
     this.resetUploadState();
   }
 
+  handleDelete(){
+    this.setState({error: "HI!" + Math.random()});
+    // if (window.confirm("All tasks, images and models associated with this project will be permanently deleted. Are you sure you want to continue?")){
+    //   return;
+    //   this.deleteProjectRequest = 
+    //     $.ajax({
+    //       url: `/api/projects/${this.props.data.id}/`,
+    //       contentType: 'application/json',
+    //       dataType: 'json',
+    //       type: 'DELETE'
+    //     }).done((json) => {
+    //       console.log("REs", json);
+    //     }).fail(() => {
+    //       this.setState({error: "The project could not be deleted"});
+    //     });
+    // }
+  }
+
   handleTaskSaved(taskInfo){
     this.setUploadState({savedTaskInfo: true});
 
@@ -205,6 +226,7 @@ class ProjectListItem extends React.Component {
          href="javascript:void(0);"
          ref={this.setRef("dropzone")}>
         <div className="row no-margin">
+          <ErrorMessage bind={[this, 'error']} />
           <div className="btn-group pull-right">
             <button type="button" 
                     className={"btn btn-primary btn-sm " + (this.state.upload.uploading ? "hide" : "")} 
@@ -230,6 +252,8 @@ class ProjectListItem extends React.Component {
             </button>
             <ul className="dropdown-menu">
               <li><a href="javascript:alert('TODO!');"><i className="fa fa-cube"></i> 3D View</a></li>
+              <li className="divider"></li>
+              <li><a href="javascript:void(0);" onClick={this.handleDelete}><i className="glyphicon glyphicon-trash"></i> Delete Project</a></li>
             </ul>
           </div>
 

app/static/app/js/components/TaskListItem.jsx

@@ -261,7 +261,7 @@ class TaskListItem extends React.Component {
             </div>
           </div>
           <div className="row">
-            <ErrorMessage message={this.state.actionError} />
+            <ErrorMessage bind={[this, 'actionError']} />
             {actionButtons}
           </div>
         </div>

app/static/app/js/css/ProjectListItem.scss

@@ -43,6 +43,9 @@
         i{
             margin-right: 4px;
         }
+        a{
+            margin-right: 8px;
+        }
     }
     
     .dz-preview{