display draft annotation while saving on backend

resolves 2538

src/sidebar/components/annotation-body.js

@@ -2,6 +2,7 @@ import { createElement } from 'preact';
 import { useState } from 'preact/hooks';
 import propTypes from 'prop-types';
 
+import useStore from '../store/use-store';
 import { isHidden } from '../util/annotation-metadata';
 import { withServices } from '../util/service-context';
 import { applyTheme } from '../util/theme';
@@ -36,9 +37,13 @@ function AnnotationBody({ annotation, settings }) {
   // collapsing/expanding is relevant?
   const [isCollapsible, setIsCollapsible] = useState(false);
 
+  const draft = useStore(store => store.getDraft(annotation));
+
   const toggleText = isCollapsed ? 'More' : 'Less';
-  const tags = annotation.tags;
-  const text = annotation.text;
+
+  // If there is a draft use the tag and text from it.
+  const tags = draft?.tags ?? annotation.tags;
+  const text = draft?.text ?? annotation.text;
   const showExcerpt = text.length > 0;
   const showTagList = tags.length > 0;
 

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

@@ -15,6 +15,22 @@ describe('AnnotationBody', () => {
   let fakeApplyTheme;
   let fakeSettings;
 
+  // Inject dependency mocks
+  let fakeStore;
+
+  const setEditingMode = (isEditing = true) => {
+    // The presence of a draft will make `isEditing` `true`
+    if (isEditing) {
+      fakeStore.getDraft.returns({
+        ...fixtures.defaultDraft(),
+        text: 'this is a draft',
+        tags: ['1', '2'],
+      });
+    } else {
+      fakeStore.getDraft.returns(null);
+    }
+  };
+
   function createBody(props = {}) {
     return mount(
       <AnnotationBody
@@ -32,16 +48,43 @@ describe('AnnotationBody', () => {
     fakeApplyTheme = sinon.stub();
     fakeSettings = {};
 
+    fakeStore = {
+      getDraft: sinon.stub().returns(null),
+    };
+
     $imports.$mock(mockImportedComponents());
     $imports.$mock({
       '../util/theme': { applyTheme: fakeApplyTheme },
+      '../store/use-store': callback => callback(fakeStore),
     });
   });
 
   afterEach(() => {
     $imports.$restore();
   });
 
+  it('renders the tags and text from the annotation', () => {
+    const wrapper = createBody();
+    wrapper.update();
+
+    const markdownView = wrapper.find('MarkdownView');
+    const tagList = wrapper.find('TagList');
+    assert.strictEqual(markdownView.props().markdown, 'some text here');
+    assert.deepStrictEqual(tagList.props().tags, ['eenie', 'minie']);
+  });
+
+  it('renders the tags and text from the draft', () => {
+    setEditingMode(true);
+
+    const wrapper = createBody();
+    wrapper.update();
+
+    const markdownView = wrapper.find('MarkdownView');
+    const tagList = wrapper.find('TagList');
+    assert.strictEqual(markdownView.props().markdown, 'this is a draft');
+    assert.deepStrictEqual(tagList.props().tags, ['1', '2']);
+  });
+
   it('does not render controls to expand/collapse the excerpt if it is not collapsible', () => {
     const wrapper = createBody();