Update annotation tag and anchoring status via a Redux action (#70)

Update an annotation's anchoring status and local tag via a Redux action
rather than just direct assignment to the annotation's properties.  This
ensures that store subscribers and a digest cycle happen after the
anchoring status changes. This in turn ensures that the UI state is kept
in sync.

This also brings us another step closer to being able to make annotation
objects immutable within the sidebar app.

h/static/scripts/annotation-ui.js

@@ -85,6 +85,11 @@ var types = {
   SET_FILTER_QUERY: 'SET_FILTER_QUERY',
   SET_SORT_KEY: 'SET_SORT_KEY',
   SELECT_TAB: 'SELECT_TAB',
+  /**
+   * Update an annotation's status flags after attempted anchoring in the
+   * document completes.
+   */
+  UPDATE_ANCHOR_STATUS: 'UPDATE_ANCHOR_STATUS',
 };
 
 /**
@@ -119,6 +124,20 @@ function annotationsReducer(state, action) {
         {annotations: excludeAnnotations(state.annotations, action.annotations)});
   case types.CLEAR_ANNOTATIONS:
     return Object.assign({}, state, {annotations: []});
+  case types.UPDATE_ANCHOR_STATUS:
+    {
+      var annotations = state.annotations.map(function (annot) {
+        if (annot.id === action.id) {
+          return Object.assign({}, annot, {
+            $orphan: action.isOrphan,
+            $$tag: action.tag,
+          });
+        } else {
+          return annot;
+        }
+      });
+      return Object.assign({}, state, {annotations: annotations});
+    }
   default:
     return state;
   }
@@ -342,6 +361,23 @@ module.exports = function ($rootScope, settings) {
       store.dispatch({type: types.CLEAR_ANNOTATIONS});
     },
 
+    /**
+     * Updating the local tag and anchoring status of an annotation.
+     *
+     * @param {string} id - Annotation ID
+     * @param {string} tag - The local tag assigned to this annotation to link
+     *        the object in the page and the annotation in the sidebar
+     * @param {boolean} isOrphan - True if the annotation failed to anchor
+     */
+    updateAnchorStatus: function (id, tag, isOrphan) {
+      store.dispatch({
+        type: types.UPDATE_ANCHOR_STATUS,
+        id: id,
+        tag: tag,
+        isOrphan: isOrphan,
+      });
+    },
+
     /** Set the type annotations to be displayed. */
     selectTab: function (type) {
       store.dispatch({

h/static/scripts/cross-frame.coffee

@@ -30,6 +30,9 @@ module.exports = class CrossFrame
           for k, v of annotation when k in whitelist
             parsed[k] = v
           parsed
+        merge: (local, remote) ->
+          annotationUI.updateAnchorStatus(local.id, local.$$tag, remote.$orphan)
+          local
         emit: (args...) ->
           $rootScope.$apply ->
             $rootScope.$broadcast.call($rootScope, args...)

h/static/scripts/test/annotation-ui-test.js

@@ -270,4 +270,20 @@ describe('annotationUI', function () {
       assert.equal(annotationUI.getState().selectedTab, annotationTab);
     });
   });
+
+  describe('#updatingAnchorStatus', function () {
+    it("updates the annotation's tag", function () {
+      var annot = defaultAnnotation();
+      annotationUI.addAnnotations([annot]);
+      annotationUI.updateAnchorStatus(annot.id, 'atag', true);
+      assert.equal(annotationUI.getState().annotations[0].$$tag, 'atag');
+    });
+
+    it("updates the annotation's orphan flag", function () {
+      var annot = defaultAnnotation();
+      annotationUI.addAnnotations([annot]);
+      annotationUI.updateAnchorStatus(annot.id, 'atag', true);
+      assert.equal(annotationUI.getState().annotations[0].$orphan, true);
+    });
+  });
 });