Merge pull request #1466 from Bilb/fix-link-previews

fix previews sent on next message if they are resolved too late

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -165,6 +165,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     this.onChooseAttachment = this.onChooseAttachment.bind(this);
     this.onClickAttachment = this.onClickAttachment.bind(this);
     this.renderCaptionEditor = this.renderCaptionEditor.bind(this);
+    this.abortLinkPreviewFetch = this.abortLinkPreviewFetch.bind(this);
 
     // On Sending
     this.onSendMessage = this.onSendMessage.bind(this);
@@ -183,7 +184,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
   }
 
   public componentWillUnmount() {
-    this.linkPreviewAbortController?.abort();
+    this.abortLinkPreviewFetch();
     this.linkPreviewAbortController = undefined;
   }
   public componentDidUpdate(prevProps: Props, _prevState: State) {
@@ -566,7 +567,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       },
     });
     const abortController = new AbortController();
-    this.linkPreviewAbortController?.abort();
+    this.abortLinkPreviewFetch();
     this.linkPreviewAbortController = abortController;
     setTimeout(() => {
       abortController.abort();
@@ -590,6 +591,12 @@ export class SessionCompositionBox extends React.Component<Props, State> {
             }
           }
         }
+        // we finished loading the preview, and checking the abortConrtoller, we are still not aborted.
+        // => update the staged preview
+        if (
+          this.linkPreviewAbortController &&
+          !this.linkPreviewAbortController.signal.aborted
+        ) {
           this.setState({
             stagedLinkPreview: {
               isLoaded: true,
@@ -597,24 +604,51 @@ export class SessionCompositionBox extends React.Component<Props, State> {
               description: ret?.description || '',
               url: ret?.url || null,
               domain:
-              (ret?.url && window.Signal.LinkPreviews.getDomain(ret.url)) || '',
+                (ret?.url && window.Signal.LinkPreviews.getDomain(ret.url)) ||
+                '',
               image,
             },
           });
+        } else if (this.linkPreviewAbortController) {
+          this.setState({
+            stagedLinkPreview: {
+              isLoaded: false,
+              title: null,
+              description: null,
+              url: null,
+              domain: null,
+              image: undefined,
+            },
+          });
+          this.linkPreviewAbortController = undefined;
+        }
       })
       .catch(err => {
         window.log.warn('fetch link preview: ', err);
-        abortController.abort();
+        const aborted = this.linkPreviewAbortController?.signal.aborted;
+        this.linkPreviewAbortController = undefined;
+        // if we were aborted, it either means the UI was unmount, or more probably,
+        // than the message was sent without the link preview.
+        // So be sure to reset the staged link preview so it is not sent with the next message.
+
+        // if we were not aborted, it's probably just an error on the fetch. Nothing to do excpet mark the fetch as done (with errors)
+
+        if (aborted) {
+          this.setState({
+            stagedLinkPreview: undefined,
+          });
+        } else {
           this.setState({
             stagedLinkPreview: {
               isLoaded: true,
               title: null,
-            domain: null,
               description: null,
               url: firstLink,
+              domain: null,
               image: undefined,
             },
           });
+        }
       });
   }
 
@@ -751,6 +785,8 @@ export class SessionCompositionBox extends React.Component<Props, State> {
 
   // tslint:disable-next-line: cyclomatic-complexity
   private async onSendMessage() {
+    this.abortLinkPreviewFetch();
+
     // this is dirty but we have to replace all @(xxx) by @xxx manually here
     const cleanMentions = (text: string): string => {
       const matches = text.match(this.mentionsRegex);
@@ -835,8 +871,11 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       'attachments'
     );
 
+    // we consider that a link previews without a title at least is not a preview
     const linkPreviews =
-      (stagedLinkPreview && [
+      (stagedLinkPreview &&
+        stagedLinkPreview.isLoaded &&
+        stagedLinkPreview.title?.length && [
           _.pick(stagedLinkPreview, 'url', 'image', 'title'),
         ]) ||
       [];
@@ -854,20 +893,15 @@ export class SessionCompositionBox extends React.Component<Props, State> {
 
       // Message sending sucess
       this.props.onMessageSuccess();
+      this.props.clearAttachments();
 
-      // Empty composition box
+      // Empty composition box and stagedAttachments
       this.setState({
         message: '',
         showEmojiPanel: false,
-      });
-      // Empty stagedAttachments
-      this.props.clearAttachments();
-      if (stagedLinkPreview && stagedLinkPreview.url) {
-        this.setState({
         stagedLinkPreview: undefined,
         ignoredLink: undefined,
       });
-      }
     } catch (e) {
       // Message sending failed
       window.log.error(e);
@@ -983,4 +1017,8 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     // Focus the textarea when user clicks anywhere in the composition box
     this.textarea.current?.focus();
   }
+
+  private abortLinkPreviewFetch() {
+    this.linkPreviewAbortController?.abort();
+  }
 }

ts/session/utils/Promise.ts

@@ -131,3 +131,11 @@ export async function timeout<T>(
 
   return Promise.race([timeoutPromise, promise]);
 }
+
+export async function delay(timeoutMs: number = 2000): Promise<Boolean> {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(true);
+    }, timeoutMs);
+  });
+}

ts/util/linkPreviewFetch.ts

@@ -9,6 +9,7 @@ import {
   IMAGE_WEBP,
   MIMEType,
 } from '../types/MIME';
+import { PromiseUtils } from '../session/utils';
 
 const MAX_REQUEST_COUNT_WITH_REDIRECTS = 20;
 // tslint:disable: prefer-for-of