Show the flagged status for annotations that user has flagged.

src/sidebar/components/annotation.js

@@ -207,7 +207,7 @@ function AnnotationController(
     };
     annotationMapper.flagAnnotation(vm.annotation).then(function(){
       analytics.track(analytics.events.ANNOTATION_FLAGGED);
-      vm.isFlagged = true;
+      annotationUI.updateFlagStatus(vm.annotation.id, true);
     }, onRejected);
   };
 
@@ -482,6 +482,10 @@ function AnnotationController(
     return annotationUI.isHiddenByModerator(vm.annotation.id);
   };
 
+  vm.isFlagged = function() {
+    return vm.annotation.flagged;
+  };
+
   vm.isReply = function () {
     return isReply(vm.annotation);
   };

src/sidebar/components/test/annotation-test.js

@@ -146,6 +146,7 @@ describe('annotation', function() {
 
       fakeAnnotationUI = {
         isHiddenByModerator: sandbox.stub().returns(false),
+        updateFlagStatus: sandbox.stub().returns(true),
       };
 
       fakeDrafts = {

src/sidebar/reducers/annotations.js

@@ -146,6 +146,20 @@ var update = {
     return {annotations: []};
   },
 
+  UPDATE_FLAG_STATUS: function (state, action) {
+    var annotations = state.annotations.map(function (annot) {
+      var match = (annot.id && annot.id === action.id);
+      if (match) {
+        return Object.assign({}, annot, {
+          flagged: action.isFlagged,
+        });
+      } else {
+        return annot;
+      }
+    });
+    return {annotations: annotations};
+  },
+
   UPDATE_ANCHOR_STATUS: function (state, action) {
     var annotations = state.annotations.map(function (annot) {
       var match = (annot.id && annot.id === action.id) ||
@@ -166,6 +180,22 @@ var update = {
 
 var actions = util.actionTypes(update);
 
+/**
+ * Updating the flagged status of an annotation.
+ *
+ * @param {string} id - Annotation ID
+ * @param {boolean} isFlagged - The flagged status of the annotation. True if
+ *        the user has flagged the annotation.
+ *
+ */
+function updateFlagStatus(id, isFlagged) {
+  return {
+    type: actions.UPDATE_FLAG_STATUS,
+    id: id,
+    isFlagged: isFlagged,
+  };
+}
+
 /** Add annotations to the currently displayed set. */
 function addAnnotations(annotations, now) {
   now = now || new Date();
@@ -297,6 +327,7 @@ module.exports = {
     clearAnnotations: clearAnnotations,
     removeAnnotations: removeAnnotations,
     updateAnchorStatus: updateAnchorStatus,
+    updateFlagStatus: updateFlagStatus,
   },
 
   // Selectors

src/sidebar/templates/annotation.html

@@ -190,7 +190,7 @@
       </span>
       <span ng-if="vm.isThirdPartyUser()">
         <button class="btn btn-clean annotation-action-btn"
-          ng-if="!vm.isFlagged"
+          ng-if="!vm.isFlagged()"
           ng-click="vm.flag()"
           ng-disabled="vm.isDeleted()"
           aria-label="Flag"
@@ -198,7 +198,7 @@
           <i class="h-icon-annotation-flag btn-icon"></i>
         </button>
         <button class="btn btn-clean annotation-action-btn"
-          ng-if="vm.isFlagged"
+          ng-if="vm.isFlagged()"
           ng-disabled="vm.isDeleted()"
           aria-label="Annotation has been flagged"
           h-tooltip>

src/sidebar/test/annotation-ui-test.js

@@ -507,6 +507,15 @@ describe('annotationUI', function () {
     });
   });
 
+  describe('#updateFlagStatus', function () {
+    it('updates the flaged status of an annotation', function () {
+      var annot = defaultAnnotation();
+      annotationUI.addAnnotations([annot]);
+      annotationUI.updateFlagStatus(annot.id, true);
+      assert.equal(annotationUI.getState().annotations[0].flagged, true);
+    });
+  });
+
   describe('selector functions', function () {
     // The individual state management modules in reducers/*.js define various
     // 'selector' functions for extracting data from the app state. These are