From ba959f33791fd4cc1a5c8aebe004dc37f39a4cc8 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 28 Oct 2020 13:29:45 +1100
Subject: [PATCH] link preview state moved to SessionCompositionBox

---
 stylesheets/_modules.scss                     |   8 +-
 .../conversation/StagedLinkPreview.tsx        |   9 +-
 .../conversation/SessionCompositionBox.tsx    | 167 ++++++++++++++----
 .../conversation/SessionStagedLinkPreview.tsx |  82 ++-------
 4 files changed, 164 insertions(+), 102 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 3cf2336df..769622bd3 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -2323,11 +2323,11 @@
 
 .module-staged-link-preview__icon-container {
   margin-inline-end: 8px;
+  padding: $session-margin-sm;
 }
 .module-staged-link-preview__content {
   margin-inline-end: 20px;
-  padding-inline-start: $session-margin-sm;
-  padding-inline-end: $session-margin-sm;
+  padding: $session-margin-sm;
 }
 .module-staged-link-preview__title {
   color: $color-gray-90;
@@ -2351,8 +2351,8 @@
 .module-staged-link-preview__close-button {
   cursor: pointer;
   position: absolute;
-  top: 0px;
-  right: 0px;
+  top: 5px;
+  right: 5px;
 
   height: 16px;
   width: 16px;
diff --git a/ts/components/conversation/StagedLinkPreview.tsx b/ts/components/conversation/StagedLinkPreview.tsx
index 06c0fe225..56a8a6194 100644
--- a/ts/components/conversation/StagedLinkPreview.tsx
+++ b/ts/components/conversation/StagedLinkPreview.tsx
@@ -8,15 +8,16 @@ import { AttachmentType, isImageAttachment } from '../../types/Attachment';
 type Props = {
   isLoaded: boolean;
   title: null | string;
+  url: null | string;
   description: null | string;
   domain: null | string;
   image?: AttachmentType;
 
-  onClose: () => void;
+  onClose: (url: string) => void;
 };
 
 export const StagedLinkPreview = (props: Props) => {
-  const { isLoaded, onClose, title, image, domain, description } = props;
+  const { isLoaded, onClose, title, image, domain, description, url } = props;
 
   const isImage = image && isImageAttachment(image);
   const i18n = window.i18n;
@@ -65,7 +66,9 @@ export const StagedLinkPreview = (props: Props) => {
       <button
         type="button"
         className="module-staged-link-preview__close-button"
-        onClick={onClose}
+        onClick={() => {
+          onClose(url || '');
+        }}
         aria-label={i18n('close')}
       />
     </div>
diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx
index ee5157c47..200b73e6c 100644
--- a/ts/components/session/conversation/SessionCompositionBox.tsx
+++ b/ts/components/session/conversation/SessionCompositionBox.tsx
@@ -15,12 +15,17 @@ import { SignalService } from '../../../protobuf';
 import { Constants } from '../../../session';
 
 import { toArray } from 'react-emoji-render';
-import { SessionQuotedMessageComposition } from './SessionQuotedMessageComposition';
 import { Flex } from '../Flex';
 import { AttachmentList } from '../../conversation/AttachmentList';
 import { ToastUtils } from '../../../session/utils';
 import { AttachmentUtil } from '../../../util';
-import { SessionStagedLinkPreview } from './SessionStagedLinkPreview';
+import {
+  getPreview,
+  LINK_PREVIEW_TIMEOUT,
+  SessionStagedLinkPreview,
+} from './SessionStagedLinkPreview';
+import { AbortController, AbortSignal } from 'abort-controller';
+import { SessionQuotedMessageComposition } from './SessionQuotedMessageComposition';
 
 export interface ReplyingToMessageProps {
   convoId: string;
@@ -31,6 +36,15 @@ export interface ReplyingToMessageProps {
   attachments?: Array<any>;
 }
 
+export interface StagedLinkPreviewData {
+  isLoaded: boolean;
+  title: string | null;
+  url: string | null;
+  domain: string | null;
+  description: string | null;
+  image?: AttachmentType;
+}
+
 export interface StagedAttachmentType extends AttachmentType {
   file: File;
 }
@@ -63,13 +77,15 @@ interface State {
   mediaSetting: boolean | null;
   showEmojiPanel: boolean;
   voiceRecording?: Blob;
-  ignoredLink?: string;
+  ignoredLink?: string; // set the the ignored url when users closed the link preview
+  stagedLinkPreview?: StagedLinkPreviewData;
 }
 
 export class SessionCompositionBox extends React.Component<Props, State> {
   private readonly textarea: React.RefObject<HTMLTextAreaElement>;
   private readonly fileInput: React.RefObject<HTMLInputElement>;
   private emojiPanel: any;
+  private linkPreviewAbortController?: AbortController;
 
   constructor(props: any) {
     super(props);
@@ -125,6 +141,11 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     setTimeout(this.focusCompositionBox, 100);
   }
 
+  public componentWillUnmount() {
+    this.linkPreviewAbortController?.abort();
+    this.linkPreviewAbortController = undefined;
+  }
+
   public render() {
     const { showRecordingView } = this.state;
 
@@ -265,40 +286,126 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       return <></>;
     }
 
-    // Do nothing if we're offline
-    if (!window.textsecure.messaging) {
-      return <></>;
-    }
-
     const { stagedAttachments, quotedMessageProps } = this.props;
     const { ignoredLink } = this.state;
 
-    // Don't render link previews if quoted message or attachments
-    if (stagedAttachments.length === 0 && !quotedMessageProps?.id) {
-      // we try to match the first link found in the current message
-      const links = window.Signal.LinkPreviews.findLinks(
-        this.state.message,
-        undefined
-      );
-      if (!links || links.length === 0 || ignoredLink === links[0]) {
-        return <></>;
-      }
-      const firstLink = links[0];
-      if (ignoredLink && ignoredLink !== firstLink) {
-        this.setState({ ignoredLink: undefined });
-      }
-      return (
-        <SessionStagedLinkPreview
-          url={firstLink}
-          onClose={() => {
-            this.setState({ ignoredLink: firstLink });
-          }}
-        />
-      );
+    // Don't render link previews if quoted message or attachments are already added
+    if (stagedAttachments.length !== 0 && quotedMessageProps?.id) {
+      return <></>;
     }
+    // we try to match the first link found in the current message
+    const links = window.Signal.LinkPreviews.findLinks(
+      this.state.message,
+      undefined
+    );
+    if (!links || links.length === 0 || ignoredLink === links[0]) {
+      return <></>;
+    }
+    const firstLink = links[0];
+    // if the first link changed, reset the ignored link so that the preview is generated
+    if (ignoredLink && ignoredLink !== firstLink) {
+      this.setState({ ignoredLink: undefined });
+    }
+    if (firstLink !== this.state.stagedLinkPreview?.url) {
+      // trigger fetching of link preview data and image
+      void this.fetchLinkPreview(firstLink);
+    }
+
+    // if the fetch did not start yet, just don't show anything
+    if (!this.state.stagedLinkPreview) {
+      return <></>;
+    }
+
+    const {
+      isLoaded,
+      title,
+      description,
+      domain,
+      image,
+    } = this.state.stagedLinkPreview;
+
+    return (
+      <SessionStagedLinkPreview
+        isLoaded={isLoaded}
+        title={title}
+        description={description}
+        domain={domain}
+        image={image}
+        url={firstLink}
+        onClose={url => {
+          this.setState({ ignoredLink: url });
+        }}
+      />
+    );
+
     return <></>;
   }
 
+  private async fetchLinkPreview(firstLink: string) {
+    // mark the link preview as loading, no data are set yet
+    this.setState({
+      stagedLinkPreview: {
+        isLoaded: false,
+        url: firstLink,
+        domain: null,
+        description: null,
+        image: undefined,
+        title: null,
+      },
+    });
+    const abortController = new AbortController();
+    this.linkPreviewAbortController?.abort();
+    this.linkPreviewAbortController = abortController;
+    setTimeout(() => {
+      abortController.abort();
+    }, LINK_PREVIEW_TIMEOUT);
+
+    getPreview(firstLink, abortController.signal)
+      .then(ret => {
+        let image: AttachmentType | undefined;
+        if (ret) {
+          if (ret.image?.width) {
+            if (ret.image) {
+              const blob = new Blob([ret.image.data], {
+                type: ret.image.contentType,
+              });
+              const imageAttachment = {
+                ...ret.image,
+                url: URL.createObjectURL(blob),
+                fileName: 'preview',
+              };
+              image = imageAttachment;
+            }
+          }
+        }
+        this.setState({
+          stagedLinkPreview: {
+            isLoaded: true,
+            title: ret?.title || null,
+            description: ret?.description || '',
+            url: ret?.url || null,
+            domain:
+              (ret?.url && window.Signal.LinkPreviews.getDomain(ret.url)) || '',
+            image,
+          },
+        });
+      })
+      .catch(err => {
+        console.warn('fetch link preview: ', err);
+        abortController.abort();
+        this.setState({
+          stagedLinkPreview: {
+            isLoaded: true,
+            title: null,
+            domain: null,
+            description: null,
+            url: firstLink,
+            image: undefined,
+          },
+        });
+      });
+  }
+
   private renderQuotedMessage() {
     const { quotedMessageProps, removeQuotedMessage } = this.props;
     if (quotedMessageProps && quotedMessageProps.id) {
diff --git a/ts/components/session/conversation/SessionStagedLinkPreview.tsx b/ts/components/session/conversation/SessionStagedLinkPreview.tsx
index 5a8311436..9e48b1b63 100644
--- a/ts/components/session/conversation/SessionStagedLinkPreview.tsx
+++ b/ts/components/session/conversation/SessionStagedLinkPreview.tsx
@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import { arrayBufferFromFile, AttachmentType } from '../../../types/Attachment';
 import { AttachmentUtil, LinkPreviewUtil } from '../../../util';
-import { StagedLinkPreview } from '../../conversation/StagedLinkPreview';
+import { StagedLinkPreviewData } from './SessionCompositionBox';
 import fetch from 'node-fetch';
 import { fetchLinkPreviewImage } from '../../../util/linkPreviewFetch';
 import { AbortController, AbortSignal } from 'abort-controller';
+import { StagedLinkPreview } from '../../conversation/StagedLinkPreview';
 
-type Props = {
-  url: string;
-  onClose: () => void;
-};
-const LINK_PREVIEW_TIMEOUT = 60 * 1000;
+export interface StagedLinkPreviewProps extends StagedLinkPreviewData {
+  onClose: (url: string) => void;
+}
+export const LINK_PREVIEW_TIMEOUT = 60 * 1000;
 
 export interface GetLinkPreviewResultImage {
   data: ArrayBuffer;
@@ -28,7 +28,7 @@ export interface GetLinkPreviewResult {
   date: number | null;
 }
 
-const getPreview = async (
+export const getPreview = async (
   url: string,
   abortSignal: AbortSignal
 ): Promise<null | GetLinkPreviewResult> => {
@@ -107,68 +107,20 @@ const getPreview = async (
   };
 };
 
-export const SessionStagedLinkPreview = (props: Props) => {
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [title, setTitle] = useState<string | null>(null);
-  const [domain, setDomain] = useState<string | null>(null);
-  const [description, setDescription] = useState<string | null>(null);
-  const [image, setImage] = useState<AttachmentType | undefined>(undefined);
-
-  useEffect(() => {
-    // Use this abortcontroller to stop current fetch requests when url changed
-    const abortController = new AbortController();
-    setTimeout(() => {
-      abortController.abort();
-    }, LINK_PREVIEW_TIMEOUT);
-
-    setIsLoaded(false);
-    setTitle(null);
-    setDomain(null);
-    setDescription(null);
-    setImage(undefined);
-
-    getPreview(props.url, abortController.signal)
-      .then(ret => {
-        setIsLoaded(true);
-        if (ret) {
-          setTitle(ret.title);
-          if (ret.image?.width) {
-            if (ret.image) {
-              const blob = new Blob([ret.image.data], {
-                type: ret.image.contentType,
-              });
-              const imageAttachment = {
-                ...ret.image,
-                url: URL.createObjectURL(blob),
-                fileName: 'preview',
-              };
-              setImage(imageAttachment);
-            }
-          }
-          setDomain(window.Signal.LinkPreviews.getDomain(ret.url));
-          if (ret.description) {
-            setDescription(ret.description);
-          }
-        }
-      })
-      .catch(err => {
-        abortController.abort();
-        setIsLoaded(true);
-      });
-    return () => {
-      // Cancel other in-flight link preview requests.
-      abortController.abort();
-    };
-  }, [props.url]);
+export const SessionStagedLinkPreview = (props: StagedLinkPreviewProps) => {
+  if (!props.url) {
+    return <></>;
+  }
 
   return (
     <StagedLinkPreview
       onClose={props.onClose}
-      isLoaded={isLoaded}
-      title={title}
-      domain={domain}
-      image={image as any}
-      description={description}
+      isLoaded={props.isLoaded}
+      title={props.title}
+      domain={props.domain}
+      url={props.url}
+      image={props.image as any}
+      description={props.description}
     />
   );
 };