From e5fda5a4f36afdfa5a7a348172e936560a67eff5 Mon Sep 17 00:00:00 2001
From: stnichol <stnichol@ucsc.edu>
Date: Sun, 29 Nov 2020 23:38:43 -0800
Subject: [PATCH 1/2] Windows double-scroll and conditional auto-scroll

---
 src/content-script/components/chat/chat.tsx   |  2 +-
 .../components/message-list/message-list.tsx  | 37 ++++++++++++-------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/content-script/components/chat/chat.tsx b/src/content-script/components/chat/chat.tsx
index 6aca26c..be5bb09 100644
--- a/src/content-script/components/chat/chat.tsx
+++ b/src/content-script/components/chat/chat.tsx
@@ -96,7 +96,7 @@ const Chat: React.FC<ReduxProps> = ({ chatEnabled, partyId, toggleChat, partyUse
             </Flex>
             <Brand headingProps={{ fontWeight: 600 }} />
           </HeaderContainer>
-          <Flex flex={3} overflowY="scroll" padding={2}>
+          <Flex flex={3} overflowY="hidden" padding={2}>
             <MessageList />
           </Flex>
           <MessageBar />
diff --git a/src/content-script/components/message-list/message-list.tsx b/src/content-script/components/message-list/message-list.tsx
index ea9a2dd..0ed5709 100644
--- a/src/content-script/components/message-list/message-list.tsx
+++ b/src/content-script/components/message-list/message-list.tsx
@@ -25,27 +25,38 @@ type ReduxProps = ConnectedProps<typeof connector>;
 const MessageList: React.FC<ReduxProps> = ({ messages }) => {
   const messageRefs = useRef({} as Record<number, HTMLDivElement | null>);
 
+  const isInViewport = (elem: HTMLDivElement | null) => {
+    const bounds = elem?.getBoundingClientRect();
+    if(!bounds) return true;
+    return (
+      bounds.top >= 0 &&
+      // using a magic number of 130
+      bounds.bottom <= (window.innerHeight || document.documentElement.clientHeight) - 130
+    );
+  };
+
   useEffect(() => {
     const lastMessageId = messages[messages.length - 1]?.id;
-    if (lastMessageId) {
+    if (lastMessageId && isInViewport(messageRefs.current[lastMessageId])) {
+      console.log(isInViewport(messageRefs.current[lastMessageId]))
       messageRefs.current[lastMessageId]?.scrollIntoView(false);
     }
   }, [messages]);
 
   return (
     <Container>
-      {messages?.map(({ content, isOwnMessage, user, id }) => (
-        <MessageCell
-          message={content}
-          isOwnMessage={isOwnMessage}
-          userName={user.name}
-          avatarUrl={user.avatarUrl}
-          key={id}
-          ref={ref => {
-            messageRefs.current[id] = ref;
-          }}
-        />
-      ))}
+        {messages?.map(({ content, isOwnMessage, user, id }) => (
+          <MessageCell
+            message={content}
+            isOwnMessage={isOwnMessage}
+            userName={user.name}
+            avatarUrl={user.avatarUrl}
+            key={id}
+            ref={ref => {
+              messageRefs.current[id] = ref;
+            }}
+          />
+        ))}
     </Container>
   );
 };

From e84d6526baa9384b208b1950282b32c27ba9ee80 Mon Sep 17 00:00:00 2001
From: stnichol <stnichol@ucsc.edu>
Date: Sun, 29 Nov 2020 23:45:04 -0800
Subject: [PATCH 2/2] Cleaned for prettier

---
 .../components/message-list/message-list.tsx  | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/content-script/components/message-list/message-list.tsx b/src/content-script/components/message-list/message-list.tsx
index 0ed5709..c5ea112 100644
--- a/src/content-script/components/message-list/message-list.tsx
+++ b/src/content-script/components/message-list/message-list.tsx
@@ -27,7 +27,7 @@ const MessageList: React.FC<ReduxProps> = ({ messages }) => {
 
   const isInViewport = (elem: HTMLDivElement | null) => {
     const bounds = elem?.getBoundingClientRect();
-    if(!bounds) return true;
+    if (!bounds) return true;
     return (
       bounds.top >= 0 &&
       // using a magic number of 130
@@ -38,25 +38,24 @@ const MessageList: React.FC<ReduxProps> = ({ messages }) => {
   useEffect(() => {
     const lastMessageId = messages[messages.length - 1]?.id;
     if (lastMessageId && isInViewport(messageRefs.current[lastMessageId])) {
-      console.log(isInViewport(messageRefs.current[lastMessageId]))
       messageRefs.current[lastMessageId]?.scrollIntoView(false);
     }
   }, [messages]);
 
   return (
     <Container>
-        {messages?.map(({ content, isOwnMessage, user, id }) => (
-          <MessageCell
-            message={content}
-            isOwnMessage={isOwnMessage}
-            userName={user.name}
-            avatarUrl={user.avatarUrl}
-            key={id}
-            ref={ref => {
-              messageRefs.current[id] = ref;
-            }}
-          />
-        ))}
+      {messages?.map(({ content, isOwnMessage, user, id }) => (
+        <MessageCell
+          message={content}
+          isOwnMessage={isOwnMessage}
+          userName={user.name}
+          avatarUrl={user.avatarUrl}
+          key={id}
+          ref={ref => {
+            messageRefs.current[id] = ref;
+          }}
+        />
+      ))}
     </Container>
   );
 };