displaying media annotations. delete annotations

1 files changed, 17 insertions, 1 deletions

diff --git a/animism-align/frontend/views/align/components/annotations/annotation.form.js b/animism-align/frontend/views/align/components/annotations/annotation.form.js
index 0a71233..eb5c0ad 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -23,6 +23,7 @@ class AnnotationForm extends Component {
     this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
     this.handleKeyDown = this.handleKeyDown.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleDestroy = this.handleDestroy.bind(this)
     this.textareaRef = React.createRef()
   }
   componentDidMount() {
@@ -91,6 +92,18 @@ class AnnotationForm extends Component {
         })
     }
   }
+  handleDestroy() {
+    const { annotation } = this.props
+    if (annotation.id === 'new') {
+      actions.align.hideAnnotationForm()
+    } else {
+      actions.annotation.destroy(annotation)
+        .then(response => {
+          console.log(response)
+          actions.align.hideAnnotationForm()
+        })
+    }
+  }
   render() {
     const { timeline, annotation } = this.props
     if (!annotation.start_ts) return <div></div>
@@ -122,7 +135,10 @@ class AnnotationForm extends Component {
           />
           <div className='ts'>{timestamp(annotation.start_ts, 1, true)}</div>
         </div>
-        <button onClick={this.handleSubmit}>Save</button>
+        <div>
+          {annotation.id !== 'new' && <button onClick={this.handleDestroy}>Delete</button>}
+          <button onClick={this.handleSubmit}>Save</button>
+        </div>
       </div>
     )
   }