From a9f990c7c9ed7cf910ba59d6a2583642b15b903b Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 20 Aug 2021 23:47:19 +0300
Subject: [PATCH] Message List: Fix notch and Scroll Down Button when
 navigating between chats (#1408)

---
 src/components/middle/MessageList.tsx         | 3 +++
 src/components/middle/MessageListContent.tsx  | 3 +++
 src/components/middle/MiddleColumn.tsx        | 3 ++-
 src/components/middle/hooks/useScrollHooks.ts | 5 ++++-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx
index 600656bdd..ee6c8c70d 100644
--- a/src/components/middle/MessageList.tsx
+++ b/src/components/middle/MessageList.tsx
@@ -56,6 +56,7 @@ type OwnProps = {
   type: MessageListType;
   canPost: boolean;
   isReady: boolean;
+  isActive: boolean;
   onFabToggle: (shouldShow: boolean) => void;
   onNotchToggle: (shouldShow: boolean) => void;
   hasTools?: boolean;
@@ -110,6 +111,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
   isGroupChat,
   canPost,
   isReady,
+  isActive,
   isChatWithSelf,
   isCreator,
   isBot,
@@ -492,6 +494,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
           memoFirstUnreadIdRef={memoFirstUnreadIdRef}
           threadId={threadId}
           type={type}
+          isActive={isActive}
           threadTopMessageId={threadTopMessageId}
           hasLinkedChat={hasLinkedChat}
           isSchedule={messageGroups ? type === 'scheduled' : false}
diff --git a/src/components/middle/MessageListContent.tsx b/src/components/middle/MessageListContent.tsx
index 2ccda8041..6219d87dd 100644
--- a/src/components/middle/MessageListContent.tsx
+++ b/src/components/middle/MessageListContent.tsx
@@ -30,6 +30,7 @@ interface OwnProps {
   memoFirstUnreadIdRef: { current: number | undefined };
   threadId: number;
   type: MessageListType;
+  isActive: boolean;
   threadTopMessageId: number | undefined;
   hasLinkedChat: boolean | undefined;
   isSchedule: boolean;
@@ -54,6 +55,7 @@ const MessageListContent: FC<OwnProps> = ({
   memoFirstUnreadIdRef,
   threadId,
   type,
+  isActive,
   threadTopMessageId,
   hasLinkedChat,
   isSchedule,
@@ -80,6 +82,7 @@ const MessageListContent: FC<OwnProps> = ({
     isUnread,
     onFabToggle,
     onNotchToggle,
+    isActive,
   );
 
   const lang = useLang();
diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx
index 3cbe28507..fe715f97b 100644
--- a/src/components/middle/MiddleColumn.tsx
+++ b/src/components/middle/MiddleColumn.tsx
@@ -309,7 +309,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
               activeKey={currentTransitionKey}
               shouldCleanup
             >
-              {() => (
+              {(isActive) => (
                 <>
                   <MessageList
                     key={`${renderingChatId}-${renderingThreadId}-${renderingMessageListType}`}
@@ -321,6 +321,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
                     onFabToggle={setIsFabShown}
                     onNotchToggle={setIsNotchShown}
                     isReady={isReady}
+                    isActive={isActive}
                   />
                   <div className={footerClassName}>
                     {renderingCanPost && (
diff --git a/src/components/middle/hooks/useScrollHooks.ts b/src/components/middle/hooks/useScrollHooks.ts
index 773efcb89..919eb2297 100644
--- a/src/components/middle/hooks/useScrollHooks.ts
+++ b/src/components/middle/hooks/useScrollHooks.ts
@@ -22,6 +22,7 @@ export default function useScrollHooks(
   isUnread: boolean,
   onFabToggle: AnyToVoidFunction,
   onNotchToggle: AnyToVoidFunction,
+  isActive: boolean,
 ) {
   const { loadViewportMessages } = getDispatch();
 
@@ -42,6 +43,8 @@ export default function useScrollHooks(
   const fabTriggerRef = useRef<HTMLDivElement>(null);
 
   const toggleScrollTools = useCallback(() => {
+    if (!isActive) return;
+
     if (!messageIds || !messageIds.length) {
       onFabToggle(false);
       onNotchToggle(false);
@@ -61,7 +64,7 @@ export default function useScrollHooks(
 
     onFabToggle(isUnread ? !isAtBottom : !isNearBottom);
     onNotchToggle(!isAtBottom);
-  }, [messageIds, isViewportNewest, containerRef, onFabToggle, isUnread, onNotchToggle]);
+  }, [isActive, messageIds, isViewportNewest, containerRef, onFabToggle, isUnread, onNotchToggle]);
 
   const {
     observe: observeIntersection,