From b5ad359e32edae1703f53fa4689293d3ee5ad016 Mon Sep 17 00:00:00 2001
From: saltrafael <a657ee92-7eb9-46eb-97d2-6735799df838@aleeas.com>
Date: Fri, 16 Jul 2021 10:55:47 -0300
Subject: [PATCH] Fix 'Recent Comments' button for livestreams

---
 ui/component/livestreamComments/view.jsx | 30 +++++++++++++-----------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/ui/component/livestreamComments/view.jsx b/ui/component/livestreamComments/view.jsx
index 6b3f18feb..dedb5b94d 100644
--- a/ui/component/livestreamComments/view.jsx
+++ b/ui/component/livestreamComments/view.jsx
@@ -54,6 +54,9 @@ export default function LivestreamComments(props: Props) {
   const commentsLength = comments && comments.length;
   const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? comments : superChats;
 
+  const discussionElement = document.querySelector('.livestream__comments');
+  const commentElement = document.querySelector('.livestream-comment');
+
   // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
   function isMyComment(channelId: string) {
     if (myChannels != null && channelId != null) {
@@ -80,19 +83,16 @@ export default function LivestreamComments(props: Props) {
     };
   }, [claimId, uri, doCommentList, doSuperChatList, doCommentSocketConnect, doCommentSocketDisconnect]);
 
-  React.useEffect(() => {
-    const discussionElement = document.querySelector('.livestream__comments');
-    const commentElement = document.querySelector('.livestream-comment');
+  const handleScroll = React.useCallback(() => {
+    if (discussionElement) {
+      const negativeCommentHeight = commentElement && -1 * commentElement.offsetHeight;
+      const isAtRecent = negativeCommentHeight && discussionElement.scrollTop >= negativeCommentHeight;
 
-    function handleScroll() {
-      if (discussionElement) {
-        const negativeCommentHeight = commentElement && -1 * commentElement.offsetHeight;
-        const isAtRecent = negativeCommentHeight && discussionElement.scrollTop >= negativeCommentHeight;
-
-        setScrollBottom(isAtRecent);
-      }
+      setScrollBottom(isAtRecent);
     }
+  }, [commentElement, discussionElement]);
 
+  React.useEffect(() => {
     if (discussionElement) {
       discussionElement.addEventListener('scroll', handleScroll);
 
@@ -112,15 +112,17 @@ export default function LivestreamComments(props: Props) {
 
       return () => discussionElement.removeEventListener('scroll', handleScroll);
     }
-  }, [commentsLength, performedInitialScroll, setPerformedInitialScroll, setScrollBottom]);
+  }, [commentsLength, discussionElement, handleScroll, performedInitialScroll, setPerformedInitialScroll]);
 
   if (!claim) {
     return null;
   }
 
   function scrollBack() {
-    const element = document.querySelector('.livestream__comments');
-    if (element) element.scrollTop = 0;
+    if (discussionElement) {
+      discussionElement.scrollTop = 0;
+      setScrollBottom(true);
+    }
   }
 
   return (
@@ -206,7 +208,7 @@ export default function LivestreamComments(props: Props) {
               button="alt"
               className="livestream__comments-scroll__down"
               label={__('Recent Comments')}
-              onClick={() => scrollBack()}
+              onClick={scrollBack}
             />
           )}