Fix: Scroll towards top (#547)

Fix scroll in MessageList
Debounce scroll events

Co-authored-by: HoonBaek <[email protected]>

Author: Sravan S

src/hooks/useDebounce.ts

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+
+export function useDebounce<T extends(...args: any[]) => void>(callback: T, delay: number): T {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    // Cleanup the timeout on unmount
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  function debounceFunction(...args: Parameters<T>) {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      callback(...args);
+    }, delay);
+  }
+
+  return debounceFunction as T;
+}

src/hooks/useHandleOnScrollCallback/__tests__/useHandleOnScrollCallback.spec.ts

@@ -1,6 +1,10 @@
 import { renderHook } from '@testing-library/react';
 import { useHandleOnScrollCallback, calcScrollBottom } from '../index';
 
+jest.useFakeTimers();
+
+const SAFE_DELAY = 1000;
+
 const prepareMockParams = ({
   scrollTop = 0,
   scrollHeight = 0,
@@ -39,6 +43,8 @@ describe('useHandleOnScrollCallback', () => {
     const handleOnScroll = result.current;
     handleOnScroll();
 
+    jest.advanceTimersByTime(SAFE_DELAY);
+
     // assert
     expect(params.setShowScrollDownButton).toHaveBeenCalledWith(true);
   });
@@ -52,6 +58,8 @@ describe('useHandleOnScrollCallback', () => {
     const handleOnScroll = result.current;
     handleOnScroll();
 
+    jest.advanceTimersByTime(SAFE_DELAY);
+
     // assert
     expect(params.setShowScrollDownButton).toHaveBeenCalledWith(false);
     expect(params.onScroll).not.toHaveBeenCalled();
@@ -67,6 +75,8 @@ describe('useHandleOnScrollCallback', () => {
     const handleOnScroll = result.current;
     handleOnScroll();
 
+    jest.advanceTimersByTime(SAFE_DELAY);
+
     // assert
     expect(params.onScroll).not.toHaveBeenCalled();
   });
@@ -103,6 +113,8 @@ describe('useHandleOnScrollCallback', () => {
     const handleOnScroll = result.current;
     handleOnScroll();
 
+    jest.advanceTimersByTime(SAFE_DELAY);
+
     // assert
     expect(params.onScroll).toHaveBeenCalled();
     expect(element.scrollTop).toEqual(newScrollHeight);

src/hooks/useHandleOnScrollCallback/index.ts

@@ -1,9 +1,13 @@
 import React, { useCallback } from 'react';
 import { SCROLL_BUFFER } from '../../utils/consts';
+import { useDebounce } from '../useDebounce';
+
+const DELAY = 500;
 
 export interface UseHandleOnScrollCallbackProps {
   hasMore: boolean;
-  onScroll(fn: () => void): void;
+  hasNext?: boolean;
+  onScroll(callback: () => void): void;
   scrollRef: React.RefObject<HTMLDivElement>;
   setShowScrollDownButton?: React.Dispatch<React.SetStateAction<boolean>>;
 }
@@ -14,11 +18,12 @@ export function calcScrollBottom(scrollHeight: number, scrollTop: number): numbe
 
 export function useHandleOnScrollCallback({
   hasMore,
+  hasNext,
   onScroll,
   scrollRef,
   setShowScrollDownButton,
 }: UseHandleOnScrollCallbackProps): () => void {
-  return useCallback(() => {
+  const scrollCb = useCallback(() => {
     const element = scrollRef?.current;
     if (element == null) {
       return;
@@ -38,19 +43,24 @@ export function useHandleOnScrollCallback({
     if (typeof setShowScrollDownButton === 'function') {
       setShowScrollDownButton(scrollHeight > scrollTop + clientHeight + 1);
     }
-    if (!hasMore) {
-      return;
-    }
-    if (scrollTop < SCROLL_BUFFER) {
+    if (hasMore && scrollTop < SCROLL_BUFFER) {
       onScroll(() => {
         // sets the scroll position to the bottom of the new messages
         element.scrollTop = element.scrollHeight - scrollBottom;
       });
     }
+    if (hasNext) {
+      onScroll(() => {
+        // sets the scroll position to the top of the new messages
+        element.scrollTop = scrollTop - (scrollHeight - element.scrollHeight);
+      });
+    }
   }, [
     setShowScrollDownButton,
     hasMore,
     onScroll,
     scrollRef,
   ]);
+
+  return useDebounce(scrollCb, DELAY);
 }

src/modules/Channel/components/MessageList/index.tsx

@@ -36,11 +36,13 @@ const MessageList: React.FC<MessageListProps> = ({
   const {
     allMessages,
     hasMorePrev,
+    hasMoreNext,
     setInitialTimeStamp,
     setAnimatedMessageId,
     setHighLightedMessageId,
     isMessageGroupingEnabled,
     scrollRef,
+    onScrollCallback,
     onScrollDownCallback,
     messagesDispatcher,
     messageActionTypes,
@@ -70,7 +72,19 @@ const MessageList: React.FC<MessageListProps> = ({
       scrollHeight,
     } = element;
 
-    if (isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER)) {
+    if (isAboutSame(scrollTop, 0, SCROLL_BUFFER)) {
+      onScrollCallback((messages) => {
+        if (messages) {
+          try {
+            //
+          } catch (error) {
+            //
+          }
+        }
+      });
+    }
+
+    if (isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER) && hasMoreNext) {
       onScrollDownCallback(([messages]) => {
         if (messages) {
           try {
@@ -116,6 +130,7 @@ const MessageList: React.FC<MessageListProps> = ({
 
   const handleOnScroll = useHandleOnScrollCallback({
     hasMore: hasMorePrev,
+    hasNext: hasMoreNext,
     onScroll,
     scrollRef,
   });