Display pending updates notification when there have been deletions

src/sidebar/components/PendingUpdatesNotification.tsx

@@ -27,7 +27,7 @@ function PendingUpdatesNotification({
 }: PendingUpdatesNotificationProps) {
   const store = useSidebarStore();
   const pendingUpdateCount = store.pendingUpdateCount();
-  const hasPendingUpdates = store.hasPendingUpdates();
+  const hasPendingChanges = store.hasPendingUpdatesOrDeletions();
   const applyPendingUpdates = useCallback(
     () => streamer.applyPendingUpdates(),
     [streamer],
@@ -35,10 +35,10 @@ function PendingUpdatesNotification({
   const [collapsed, setCollapsed] = useState(false);
   const timeout = useRef<number | null>(null);
 
-  useShortcut('l', () => hasPendingUpdates && applyPendingUpdates());
+  useShortcut('l', () => hasPendingChanges && applyPendingUpdates());
 
   useEffect(() => {
-    if (hasPendingUpdates) {
+    if (hasPendingChanges) {
       timeout.current = setTimeout_(() => {
         setCollapsed(true);
         timeout.current = null;
@@ -48,9 +48,9 @@ function PendingUpdatesNotification({
     }
 
     return () => timeout.current && clearTimeout_(timeout.current);
-  }, [clearTimeout_, hasPendingUpdates, setTimeout_]);
+  }, [clearTimeout_, hasPendingChanges, setTimeout_]);
 
-  if (!hasPendingUpdates) {
+  if (!hasPendingChanges) {
     return null;
   }
 

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

@@ -20,7 +20,7 @@ describe('PendingUpdatesNotification', () => {
     };
     fakeStore = {
       pendingUpdateCount: sinon.stub().returns(3),
-      hasPendingUpdates: sinon.stub().returns(true),
+      hasPendingUpdatesOrDeletions: sinon.stub().returns(true),
     };
 
     $imports.$mock({
@@ -68,7 +68,7 @@ describe('PendingUpdatesNotification', () => {
   }
 
   it('does not render anything while there are no pending updates', () => {
-    fakeStore.hasPendingUpdates.returns(false);
+    fakeStore.hasPendingUpdatesOrDeletions.returns(false);
     const wrapper = createComponent();
 
     assert.isEmpty(wrapper);
@@ -112,7 +112,7 @@ describe('PendingUpdatesNotification', () => {
 
   [true, false].forEach(hasPendingUpdates => {
     it('applies updates when "l" is pressed', () => {
-      fakeStore.hasPendingUpdates.returns(hasPendingUpdates);
+      fakeStore.hasPendingUpdatesOrDeletions.returns(hasPendingUpdates);
       let wrapper;
       const container = document.createElement('div');
       document.body.append(container);

src/sidebar/store/modules/real-time-updates.ts

@@ -213,6 +213,14 @@ function hasPendingUpdates(state: State): boolean {
   return Object.keys(state.pendingUpdates).length > 0;
 }
 
+/**
+ * Return true if at least one annotation has been created or deleted on the
+ * server, but it has not yet been applied.
+ */
+function hasPendingUpdatesOrDeletions(state: State): boolean {
+  return pendingUpdateCount(state) > 0;
+}
+
 export const realTimeUpdatesModule = createStoreModule(initialState, {
   namespace: 'realTimeUpdates',
   reducers,
@@ -223,6 +231,7 @@ export const realTimeUpdatesModule = createStoreModule(initialState, {
   selectors: {
     hasPendingDeletion,
     hasPendingUpdates,
+    hasPendingUpdatesOrDeletions,
     pendingDeletions,
     pendingUpdates,
     pendingUpdateCount,

src/sidebar/store/modules/test/real-time-updates-test.js

@@ -193,4 +193,20 @@ describe('sidebar/store/modules/real-time-updates', () => {
       assert.equal(store.hasPendingUpdates(), true);
     });
   });
+
+  describe('hasPendingUpdatesOrDeletions', () => {
+    it('returns false if there are no pending updates nor deletions', () => {
+      assert.isFalse(store.hasPendingUpdatesOrDeletions());
+    });
+
+    it('returns true if there are pending updates', () => {
+      addPendingUpdates(store);
+      assert.isTrue(store.hasPendingUpdatesOrDeletions());
+    });
+
+    it('returns true if there are pending deletions', () => {
+      addPendingDeletions(store);
+      assert.isTrue(store.hasPendingUpdatesOrDeletions());
+    });
+  });
 });