fix(Desktop): Get and use preview when changing document

stencila · Jun 7, 2021 · daeac8d · daeac8d
1 parent b672a95
commit daeac8d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/desktop/src/main/document/index.ts b/desktop/src/main/document/index.ts
@@ -30,7 +30,10 @@ export const registerDocumentHandlers = () => {
         ipcEvent.sender.send(CHANNEL.GET_DOCUMENT_CONTENTS, docEvent)
       })
 
-      return documents.read(documentId)
+      // Use `dump` to get document content, rather than `read`, to avoid
+      // (a) a re-read of the file (that is done on open) (b) re-encoding for
+      // each subscriber.
+      return documents.dump(documentId)
     }
   )
 
@@ -40,6 +43,8 @@ export const registerDocumentHandlers = () => {
       documents.subscribe(documentId, ['encoded:html'], (_topic, docEvent) => {
         ipcEvent.sender.send(CHANNEL.DOCUMENT_GET_PREVIEW, docEvent)
       })
+
+      return documents.dump(documentId, 'html')
     }
   )
 

diff --git a/desktop/src/renderer/components/app-document/app-document-preview/app-document-preview.tsx b/desktop/src/renderer/components/app-document/app-document-preview/app-document-preview.tsx
@@ -14,46 +14,53 @@ export class AppDocumentPreview {
   @Watch('documentId')
   documentIdWatchHandler(newValue: string, prevValue: string) {
     if (newValue !== prevValue) {
-      this.closeDoc(prevValue).then(() => {
-        this.subscribeToUpdates(newValue)
+      this.unsubscribeFromDocument(prevValue).then(() => {
+        this.subscribeToDocument(newValue)
       })
     }
   }
 
   @State() previewContents: string
 
-  private subscribeToUpdates = (documentId = this.documentId) => {
-    window.api.invoke(CHANNEL.DOCUMENT_GET_PREVIEW, documentId)
+  private subscribeToDocument = (documentId = this.documentId) => {
+    window.api.invoke(CHANNEL.DOCUMENT_GET_PREVIEW, documentId).then((html) => {
+      this.previewContents = html as string
+    })
+
     window.api.receive(CHANNEL.DOCUMENT_GET_PREVIEW, (event) => {
       const e = event as DocumentEvent
       if (
-        e.type === 'encoded' &&
         e.document.id === documentId &&
-        e.content !== undefined &&
-        e.format == 'html'
+        e.type === 'encoded' &&
+        e.format == 'html' &&
+        e.content !== undefined
       ) {
         this.previewContents = e.content
       }
     })
   }
 
-  private closeDoc = (documentId = this.documentId) =>
+  private unsubscribeFromDocument = (documentId = this.documentId) =>
     window.api.invoke(CHANNEL.UNSUBSCRIBE_DOCUMENT, {
       documentId,
       topics: ['encoded:html'],
     })
 
   componentWillLoad() {
-    this.subscribeToUpdates()
+    this.subscribeToDocument()
+  }
+
+  disconnectedCallback() {
+    this.unsubscribeFromDocument()
   }
 
   render() {
     return (
       <Host>
-        <div class="app-document-preview">
-          <p>Temporary: JSON preview of document content</p>
-          <pre innerHTML={this.previewContents}></pre>
-        </div>
+        <div
+          class="app-document-preview"
+          innerHTML={this.previewContents}
+        ></div>
       </Host>
     )
   }