From 25cb1d2858ec15549ffe3c3bd5f724f73f01f503 Mon Sep 17 00:00:00 2001
From: Luke Morris <lukevmorris@gmail.com>
Date: Tue, 20 Feb 2018 15:43:47 -0800
Subject: [PATCH] Persist APoint updates to server

---
 ui/src/shared/actions/annotations.js        |  5 +++++
 ui/src/shared/apis/annotation.js            | 10 ++++++++--
 ui/src/shared/components/Annotation.js      |  1 -
 ui/src/shared/components/AnnotationPoint.js | 18 ++++++++++++++----
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/ui/src/shared/actions/annotations.js b/ui/src/shared/actions/annotations.js
index 5005b0e285..d621276fdf 100644
--- a/ui/src/shared/actions/annotations.js
+++ b/ui/src/shared/actions/annotations.js
@@ -72,3 +72,8 @@ export const deleteAnnotationAsync = annotation => async dispatch => {
   await api.deleteAnnotation(annotation)
   dispatch(deleteAnnotation(annotation))
 }
+
+export const updateAnnotationAsync = annotation => async dispatch => {
+  await api.updateAnnotation(annotation)
+  dispatch(updateAnnotation(annotation))
+}
diff --git a/ui/src/shared/apis/annotation.js b/ui/src/shared/apis/annotation.js
index 993db2de36..f410222609 100644
--- a/ui/src/shared/apis/annotation.js
+++ b/ui/src/shared/apis/annotation.js
@@ -13,8 +13,8 @@ const annoToRFC = anno => ({
   endTime: msToRFC(anno.endTime),
 })
 
-export const createAnnotation = async (url, newAnno) => {
-  const data = annoToRFC(newAnno)
+export const createAnnotation = async (url, annotation) => {
+  const data = annoToRFC(annotation)
   const response = await AJAX({method: 'POST', url, data})
   return annoToMillisecond(response.data)
 }
@@ -32,3 +32,9 @@ export const deleteAnnotation = async annotation => {
   const url = annotation.links.self
   await AJAX({method: 'DELETE', url})
 }
+
+export const updateAnnotation = async annotation => {
+  const url = annotation.links.self
+  const data = annoToRFC(annotation)
+  await AJAX({method: 'PATCH', url, data})
+}
diff --git a/ui/src/shared/components/Annotation.js b/ui/src/shared/components/Annotation.js
index cd2ff77c13..8626da9feb 100644
--- a/ui/src/shared/components/Annotation.js
+++ b/ui/src/shared/components/Annotation.js
@@ -15,7 +15,6 @@ class Annotation extends Component {
           ? <AnnotationPoint
               annotation={annotation}
               mode={mode}
-              onUpdateAnnotation={onUpdateAnnotation}
               dygraph={dygraph}
             />
           : <AnnotationSpan
diff --git a/ui/src/shared/components/AnnotationPoint.js b/ui/src/shared/components/AnnotationPoint.js
index 43a43ef054..b3502d7be6 100644
--- a/ui/src/shared/components/AnnotationPoint.js
+++ b/ui/src/shared/components/AnnotationPoint.js
@@ -1,8 +1,10 @@
 import React, {PropTypes} from 'react'
+import {connect} from 'react-redux'
 
 import {EDITING} from 'shared/annotations/helpers'
 import * as schema from 'shared/schemas'
 import * as style from 'shared/annotations/styles'
+import * as actions from 'shared/actions/annotations'
 import AnnotationTooltip from 'shared/components/AnnotationTooltip'
 
 class AnnotationPoint extends React.Component {
@@ -29,6 +31,8 @@ class AnnotationPoint extends React.Component {
   }
 
   handleDragStop = () => {
+    const {annotation, updateAnnotationAsync} = this.props
+    updateAnnotationAsync(annotation)
     this.setState({isDragging: false})
   }
 
@@ -38,7 +42,7 @@ class AnnotationPoint extends React.Component {
     }
 
     const {pageX} = e
-    const {annotation, dygraph, onUpdateAnnotation} = this.props
+    const {annotation, dygraph, updateAnnotation} = this.props
 
     if (pageX === 0) {
       return
@@ -72,7 +76,7 @@ class AnnotationPoint extends React.Component {
       newTime = startX
     }
 
-    onUpdateAnnotation({
+    updateAnnotation({
       ...annotation,
       startTime: `${newTime}`,
       endTime: `${newTime}`,
@@ -126,7 +130,13 @@ AnnotationPoint.propTypes = {
   annotation: schema.annotation.isRequired,
   mode: PropTypes.string.isRequired,
   dygraph: PropTypes.shape({}).isRequired,
-  onUpdateAnnotation: PropTypes.func.isRequired,
+  updateAnnotation: PropTypes.func.isRequired,
+  updateAnnotationAsync: PropTypes.func.isRequired,
 }
 
-export default AnnotationPoint
+const mdtp = {
+  updateAnnotationAsync: actions.updateAnnotationAsync,
+  updateAnnotation: actions.updateAnnotation,
+}
+
+export default connect(null, mdtp)(AnnotationPoint)