Implemented Chat scroll Hook

Author: impruthvi

components/chat/chat-messages.tsx

@@ -4,10 +4,11 @@ import { Member, Message, Profile } from "@prisma/client";
 import { ChatWelcome } from "./chat-welcome";
 import { Loader2, ServerCrash } from "lucide-react";
 import { useChatQuery } from "@/hooks/use-chat-query";
-import { Fragment } from "react";
+import { Fragment, useRef, ElementRef } from "react";
 import { ChatItem } from "./chat-item";
 import { format } from "date-fns";
 import { useChatSocket } from "@/hooks/use-chat-socket";
+import { useChatScroll } from "@/hooks/use-chat-scroll";
 
 type MessageWithMemberWithProfile = Message & {
   member: Member & {
@@ -44,6 +45,9 @@ export const ChatMessages: React.FC<ChatMessagesProps> = ({
   const addKey = `chat:${chatId}:messages`;
   const updateKey = `chat:${chatId}:messages:update`;
 
+  const chatRef = useRef<ElementRef<"div">>(null);
+  const bottomRef = useRef<ElementRef<"div">>(null);
+
   const { data, status, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useChatQuery({
       queryKey,
@@ -58,6 +62,14 @@ export const ChatMessages: React.FC<ChatMessagesProps> = ({
     updateKey,
   });
 
+  useChatScroll({
+    chatRef,
+    bottomRef,
+    loadMore: fetchNextPage,
+    shouldLoadMore: !isFetchingNextPage && !!hasNextPage,
+    count: data?.pages[0]?.items?.length ?? 0,
+  });
+
   if (status === "loading") {
     return (
       <div className="flex flex-col flex-1 justify-center items-center">
@@ -81,9 +93,24 @@ export const ChatMessages: React.FC<ChatMessagesProps> = ({
   }
 
   return (
-    <div className="flex-1 flex flex-col py-4 overflow-y-auto">
-      <div className="flex-1" />
-      <ChatWelcome type={type} name={name} />
+    <div ref={chatRef} className="flex-1 flex flex-col py-4 overflow-y-auto">
+      {!hasNextPage && <div className="flex-1" />}
+      {!hasNextPage && <ChatWelcome type={type} name={name} />}
+
+      {hasNextPage && (
+        <div className="flex justify-center">
+          {isFetchingNextPage ? (
+            <Loader2 className="w-7 h-7 text-zinc-500 animate-spin my-4" />
+          ) : (
+            <button
+              onClick={() => fetchNextPage()}
+              className="text-zinc-500 hover:text-zinc-600 dark:textzinc-400 text-xs my-4 dark:hover:text-zinc-300 transition"
+            >
+              Load previous messages
+            </button>
+          )}
+        </div>
+      )}
       <div className="flex flex-col-reverse mt-auto">
         {data?.pages.map((page, i) => (
           <Fragment key={i}>
@@ -105,6 +132,7 @@ export const ChatMessages: React.FC<ChatMessagesProps> = ({
           </Fragment>
         ))}
       </div>
+      <div ref={bottomRef} />
     </div>
   );
 };

hooks/use-chat-scroll.ts

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+
+type ChatScrollProps = {
+  chatRef: React.RefObject<HTMLDivElement>;
+  bottomRef: React.RefObject<HTMLDivElement>;
+  shouldLoadMore: boolean;
+  loadMore: () => void;
+  count: number;
+};
+
+export const useChatScroll = ({
+  chatRef,
+  bottomRef,
+  shouldLoadMore,
+  loadMore,
+  count,
+}: ChatScrollProps) => {
+  const [hasInitialized, setHasInitialized] = useState(false);
+
+  useEffect(() => {
+    const topDiv = chatRef?.current;
+
+    const handleScroll = () => {
+      const scrollTop = topDiv?.scrollTop;
+
+      if (scrollTop === 0 && shouldLoadMore) {
+        loadMore();
+      }
+    };
+
+    topDiv?.addEventListener("scroll", handleScroll);
+
+    return () => {
+      topDiv?.removeEventListener("scroll", handleScroll);
+    };
+  }, [shouldLoadMore, loadMore, chatRef]);
+
+  useEffect(() => {
+    const bottomDiv = bottomRef?.current;
+    const topDiv = chatRef?.current;
+
+    const shouldAutoScroll = () => {
+      if (!hasInitialized && bottomDiv) {
+        setHasInitialized(true);
+        return true;
+      }
+
+      if (!topDiv) {
+        return false;
+      }
+
+      const distanceFromBottom =
+        topDiv.scrollHeight - topDiv.scrollTop - topDiv.clientHeight;
+
+      return distanceFromBottom <= 100;
+    };
+
+    if (shouldAutoScroll()) {
+      setTimeout(() => {
+        bottomRef?.current?.scrollIntoView({ behavior: "smooth" });
+      }, 100);
+    }
+  }, [
+    count,
+    bottomRef,
+    chatRef,
+    hasInitialized,
+    setHasInitialized,
+    shouldLoadMore,
+  ]);
+};