From 357ad440f05fa459644510e5f619841afb369a0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 19 Sep 2024 20:44:12 +0200
Subject: [PATCH] pl-fe: fixes?
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../chats/components/chat-message-list.tsx    | 25 ++++---------------
 1 file changed, 5 insertions(+), 20 deletions(-)

diff --git a/packages/pl-fe/src/features/chats/components/chat-message-list.tsx b/packages/pl-fe/src/features/chats/components/chat-message-list.tsx
index d47f940d6..1cc1e148b 100644
--- a/packages/pl-fe/src/features/chats/components/chat-message-list.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-message-list.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import ScrollableList from 'pl-fe/components/scrollable-list';
@@ -34,8 +34,6 @@ const timeChange = (prev: Pick<ChatMessageEntity, 'created_at'>, curr: Pick<Chat
   return null;
 };
 
-const START_INDEX = 10000;
-
 interface IChatMessageList {
   /** Chat the messages are being rendered from. */
   chat: Chat;
@@ -46,7 +44,6 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
   const intl = useIntl();
 
   const parentRef = useRef<HTMLDivElement>(null);
-  const [firstItemIndex, setFirstItemIndex] = useState(START_INDEX - 20);
 
   const { markChatAsRead } = useChatActions(chat.id);
   const {
@@ -64,17 +61,6 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
 
   const isBlocked = useAppSelector((state) => state.getIn(['relationships', chat.account.id, 'blocked_by']));
 
-  const lastChatMessage = chatMessages ? chatMessages[chatMessages.length - 1] : null;
-
-  useEffect(() => {
-    if (!chatMessages) {
-      return;
-    }
-
-    const nextFirstItemIndex = START_INDEX - chatMessages.length;
-    setFirstItemIndex(nextFirstItemIndex);
-  }, [lastChatMessage]);
-
   const buildCachedMessages = (): Array<ChatMessageEntity | { type: 'divider'; text: string }> => {
     if (!chatMessages) {
       return [];
@@ -117,12 +103,11 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
   };
   const cachedChatMessages = buildCachedMessages();
 
-  const handleStartReached = useCallback(() => {
-    if (hasNextPage && !isFetching) {
+  const handleStartReached = () => {
+    if (hasNextPage && !isLoading && !isFetching && !isFetchingNextPage) {
       fetchNextPage();
     }
-    return false;
-  }, [firstItemIndex, hasNextPage, isFetching]);
+  };
 
   const renderDivider = (key: React.Key, text: string) => <Divider key={key} text={text} textSize='xs' />;
 
@@ -200,7 +185,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
   }
 
   return (
-    <div className='flex h-full grow flex-col space-y-6 overflow-auto' style={{ scrollbarGutter: 'auto' }}>
+    <div className='flex h-full grow flex-col-reverse space-y-6 overflow-auto' style={{ scrollbarGutter: 'auto' }}>
       <div className='flex grow flex-col justify-end' ref={parentRef}>
         <ScrollableList
           listClassName='mb-2'