From add1c2dd390134b34d7596718e8016ef5cfec656 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 14 Dec 2020 17:02:28 +1100
Subject: [PATCH] reset the highlighted message after 3 sec

Before this commit, when a users clicks on a quoted message, the UI
takes it to that message. If the user clicks again on the quoted
message, the green highlight of the quoted message is not shown again.
This was like this, because the highlight is based on a state change,
and clicking on the same highlighted message, does not update the state
as the clicked quoted message is still the same.

The fix is to reset the highlighted message on the state object after
the animation is done
---
 .../conversation/SessionMessagesList.tsx      | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/ts/components/session/conversation/SessionMessagesList.tsx b/ts/components/session/conversation/SessionMessagesList.tsx
index 6e2616dcf..7d89be2ec 100644
--- a/ts/components/session/conversation/SessionMessagesList.tsx
+++ b/ts/components/session/conversation/SessionMessagesList.tsx
@@ -49,6 +49,7 @@ export class SessionMessagesList extends React.Component<Props, State> {
   private readonly messageContainerRef: React.RefObject<any>;
   private scrollOffsetBottomPx: number = Number.MAX_VALUE;
   private ignoreScrollEvents: boolean;
+  private timeoutResetQuotedScroll: NodeJS.Timeout | null = null;
 
   public constructor(props: Props) {
     super(props);
@@ -79,6 +80,12 @@ export class SessionMessagesList extends React.Component<Props, State> {
     setTimeout(this.scrollToUnread, 0);
   }
 
+  public componentWillUnmount() {
+    if (this.timeoutResetQuotedScroll) {
+      clearTimeout(this.timeoutResetQuotedScroll);
+    }
+  }
+
   public componentDidUpdate(prevProps: Props, _prevState: State) {
     const isSameConvo =
       prevProps.conversationKey === this.props.conversationKey;
@@ -91,6 +98,7 @@ export class SessionMessagesList extends React.Component<Props, State> {
       // displayed conversation changed. We have a bit of cleaning to do here
       this.scrollOffsetBottomPx = Number.MAX_VALUE;
       this.ignoreScrollEvents = true;
+      this.setupTimeoutResetQuotedHighlightedMessage(true);
       this.setState(
         {
           showScrollButton: false,
@@ -463,6 +471,30 @@ export class SessionMessagesList extends React.Component<Props, State> {
     }
   }
 
+  /**
+   * Could not find a better name, but when we click on a quoted message,
+   * the UI takes us there and highlights it.
+   * If the user clicks again on this message, we want this highlight to be
+   * shown once again.
+   *
+   * So we need to reset the state of of the highlighted message so when the users clicks again,
+   * the highlight is shown once again
+   */
+  private setupTimeoutResetQuotedHighlightedMessage(clearOnly = false) {
+    if (this.timeoutResetQuotedScroll) {
+      clearTimeout(this.timeoutResetQuotedScroll);
+    }
+    // only clear the timeout, do not schedule once again
+    if (clearOnly) {
+      return;
+    }
+    if (this.state.animateQuotedMessageId !== undefined) {
+      this.timeoutResetQuotedScroll = global.setTimeout(() => {
+        this.setState({ animateQuotedMessageId: undefined });
+      }, 3000);
+    }
+  }
+
   private scrollToMessage(messageId: string, smooth: boolean = false) {
     const topUnreadMessage = document.getElementById(messageId);
     topUnreadMessage?.scrollIntoView({
@@ -472,7 +504,10 @@ export class SessionMessagesList extends React.Component<Props, State> {
 
     // we consider that a `smooth` set to true, means it's a quoted message, so highlight this message on the UI
     if (smooth) {
-      this.setState({ animateQuotedMessageId: messageId });
+      this.setState(
+        { animateQuotedMessageId: messageId },
+        this.setupTimeoutResetQuotedHighlightedMessage
+      );
     }
 
     const messageContainer = this.messageContainerRef.current;