Change order of chat list

dappforce · Jul 24, 2024 · 3bc1942 · 3bc1942
1 parent 8dcc5ab
commit 3bc1942
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 36 deletions.
diff --git a/src/components/chats/ChatItem/profilePosts/ProfilePostsList.tsx b/src/components/chats/ChatItem/profilePosts/ProfilePostsList.tsx
@@ -108,7 +108,7 @@ function ProfilePostsListContent({
         id={scrollableContainerId}
         ref={scrollContainerRef}
         className={cx(
-          'flex flex-col-reverse overflow-x-hidden overflow-y-scroll @container',
+          'flex flex-col overflow-x-hidden overflow-y-scroll @container',
           scrollableContainerClassName
         )}
       >
@@ -124,19 +124,18 @@ function ProfilePostsListContent({
                 sendEvent('load_more_messages', { currentPage })
               }}
               className={cx(
-                'relative flex w-full flex-col-reverse !overflow-hidden pb-2',
+                'relative flex w-full flex-col !overflow-hidden pb-2',
                 // need to have enough room to open message menu
                 'min-h-[400px]'
               )}
               hasMore={hasMore}
-              inverse
               scrollableTarget={scrollableContainerId}
               loader={<Loading className='pb-2 pt-4' />}
               endMessage={
                 renderedMessageQueries.length === 0 ? null : (
                   <ChatTopNotice
                     className='pb-2 pt-4'
-                    label='You have reached the first message of this user!'
+                    label='You have seen all memes from this user!'
                   />
                 )
               }

diff --git a/src/components/chats/ChatList/ChatList.tsx b/src/components/chats/ChatList/ChatList.tsx
@@ -161,7 +161,7 @@ function ChatListContent({
           id={scrollableContainerId}
           ref={scrollContainerRef}
           className={cx(
-            'flex flex-col-reverse overflow-x-hidden overflow-y-scroll @container',
+            'flex flex-col overflow-x-hidden overflow-y-scroll @container',
             scrollableContainerClassName
           )}
         >
@@ -177,12 +177,11 @@ function ChatListContent({
                   sendEvent('load_more_messages', { currentPage })
                 }}
                 className={cx(
-                  'relative flex w-full flex-col-reverse !overflow-hidden',
+                  'relative flex w-full flex-col !overflow-hidden',
                   // need to have enough room to open message menu
                   'min-h-[400px]'
                 )}
                 hasMore={hasMore}
-                inverse
                 scrollableTarget={scrollableContainerId}
                 loader={<Loading className='pb-2 pt-4' />}
                 endMessage={

diff --git a/src/components/chats/ChatList/ChatListSupportingContent.tsx b/src/components/chats/ChatList/ChatListSupportingContent.tsx
@@ -16,7 +16,6 @@ import urlJoin from 'url-join'
 import { ChatListProps } from './ChatList'
 import { NewMessageNotice } from './NewMessageNotice'
 import { getNearestMessageIdToTimeFromRenderedIds } from './hooks/useGetChatElement'
-import useIsAtBottom from './hooks/useIsAtBottom'
 import useLastFocusedMessageTime from './hooks/useLastFocusedMessageId'
 import { ScrollToMessage } from './hooks/useScrollToMessage'
 
@@ -169,32 +168,6 @@ export default function ChatListSupportingContent({
           )}
         </div>
       </Component>
-      <ScrollToBottom
-        renderedMessageLength={renderedMessageLength}
-        scrollContainerRef={scrollContainerRef}
-      />
     </>
   )
 }
-
-function ScrollToBottom({
-  scrollContainerRef,
-  renderedMessageLength,
-}: {
-  scrollContainerRef: React.RefObject<HTMLDivElement>
-  renderedMessageLength: number
-}) {
-  const isAtBottom = useIsAtBottom(scrollContainerRef, 100)
-  const replyTo = useMessageData((state) => state.replyTo)
-
-  const isAtBottomRef = useWrapInRef(isAtBottom)
-  useEffect(() => {
-    if (!isAtBottomRef.current) return
-    scrollContainerRef.current?.scrollTo({
-      top: scrollContainerRef.current?.scrollHeight,
-      behavior: 'auto',
-    })
-  }, [renderedMessageLength, isAtBottomRef, scrollContainerRef, replyTo])
-
-  return null
-}
diff --git a/src/components/chats/ChatList/ChatTopNotice.tsx b/src/components/chats/ChatList/ChatTopNotice.tsx
@@ -9,7 +9,7 @@ export default function ChatTopNotice({ label, ...props }: ChatTopNoticeProps) {
   return (
     <div {...props} className={cx('flex justify-center', props.className)}>
       <span className='text-center text-sm text-text-muted'>
-        {label ? label : 'You have reached the first message in this chat!'}
+        {label ? label : 'You have seen all memes in here!'}
       </span>
     </div>
   )

diff --git a/src/modules/chat/HomePage/ChatContent.tsx b/src/modules/chat/HomePage/ChatContent.tsx
@@ -101,7 +101,6 @@ export default function ChatContent({ className }: Props) {
         className={cx(isAdmin && 'top-0')}
       />
       <ChatRoom
-        scrollableContainerClassName='pt-12'
         asContainer
         chatId={chatId}
         hubId={env.NEXT_PUBLIC_MAIN_SPACE_ID}