From df0574ea5f2d212586aa6bfcc8958b32ed21693b Mon Sep 17 00:00:00 2001 From: Ronan-Fernandes Date: Sat, 14 Dec 2024 16:25:48 -0300 Subject: [PATCH 1/3] Update unread badge and divider behavior --- .../modules/messages/ChatRoom/index.tsx | 33 +-------------- .../MessagesList/MessagesGroup/index.tsx | 11 ++--- .../MessagesList/MessagesGroup/types.ts | 1 + .../modules/messages/MessagesList/index.tsx | 40 ++++++++++++++++++- .../useMessageCountUpdateSubscription.tsx | 1 - 5 files changed, 44 insertions(+), 42 deletions(-) diff --git a/packages/components/modules/messages/ChatRoom/index.tsx b/packages/components/modules/messages/ChatRoom/index.tsx index 10790295..d47e3681 100644 --- a/packages/components/modules/messages/ChatRoom/index.tsx +++ b/packages/components/modules/messages/ChatRoom/index.tsx @@ -1,8 +1,7 @@ 'use client' -import { FC, Suspense, useEffect, useRef } from 'react' +import { FC, Suspense } from 'react' -import { useCurrentProfile } from '@baseapp-frontend/authentication' import { LoadingState } from '@baseapp-frontend/design-system' import { Box } from '@mui/material' @@ -11,7 +10,6 @@ import { useLazyLoadQuery } from 'react-relay' import { ChatRoomQuery as ChatRoomQueryType } from '../../../__generated__/ChatRoomQuery.graphql' import DefaultMessagesList from '../MessagesList' import DefaultSendMessage from '../SendMessage' -import { useReadMessageMutation } from '../graphql/mutations/ReadMessages' import { ChatRoomQuery } from '../graphql/queries/ChatRoomQuery' import ChatRoomHeader from './ChatRoomHeader' import { ChatBodyContainer, ChatRoomContainer } from './styled' @@ -24,7 +22,6 @@ const ChatRoom: FC = ({ SendMessage = DefaultSendMessage, SendMessageProps = {}, }) => { - const hasRunRef = useRef(false) // TODO: pre load this query and instead of lazyload const { chatRoom } = useLazyLoadQuery( ChatRoomQuery, @@ -36,34 +33,6 @@ const ChatRoom: FC = ({ fetchKey: roomId, }, ) - const { currentProfile } = useCurrentProfile() - const [commitMutation] = useReadMessageMutation() - - const prevProfileIdRef = useRef(currentProfile?.id) - const prevRoomIdRef = useRef(chatRoom?.id) - - useEffect(() => { - if (hasRunRef.current) - return () => { - if (prevProfileIdRef.current && prevRoomIdRef.current) { - commitMutation({ - variables: { - input: { - roomId: prevRoomIdRef.current, - profileId: prevProfileIdRef.current as string, - }, - }, - }) - } - } - hasRunRef.current = true - return () => {} - }, [currentProfile?.id, chatRoom?.id]) - - useEffect(() => { - prevProfileIdRef.current = currentProfile?.id - prevRoomIdRef.current = chatRoom?.id - }, [currentProfile?.id, chatRoom?.id]) // TODO: handle error for chatRoom if (!chatRoom) { diff --git a/packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx b/packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx index 3449e4aa..9b972d8c 100644 --- a/packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx +++ b/packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx @@ -21,6 +21,7 @@ const MessagesGroup: FC = ({ message, messageIndex, isGroup = false, + firstUnreadMessageId, MessageItem = DefaultMessageItem, MessageItemProps = {}, }) => { @@ -51,15 +52,9 @@ const MessagesGroup: FC = ({ const renderUnreadMessagesDivider = useCallback( (index: number) => { - const previousMessage = allMessages?.[index + 1] const currentMessage = allMessages?.[index] - const hasPreviousMessage = !!previousMessage - const isFirstUnreadMessage = - currentMessage?.profile?.id !== currentProfile?.id && - !currentMessage?.isRead && - (!hasPreviousMessage || previousMessage?.isRead) - if (!!currentMessage && isFirstUnreadMessage) { + if (currentMessage?.id === firstUnreadMessageId) { return ( = ({ return null }, - [allMessages, currentProfile, theme.palette.error.light], + [allMessages, firstUnreadMessageId, theme.palette.error.light], ) const renderLastMessageTime = useCallback( diff --git a/packages/components/modules/messages/MessagesList/MessagesGroup/types.ts b/packages/components/modules/messages/MessagesList/MessagesGroup/types.ts index 35ebc4dd..d5d4746d 100644 --- a/packages/components/modules/messages/MessagesList/MessagesGroup/types.ts +++ b/packages/components/modules/messages/MessagesList/MessagesGroup/types.ts @@ -9,6 +9,7 @@ export interface MessagesGroupProps { messageIndex: number isGroup?: boolean allMessagesLastIndex: number + firstUnreadMessageId?: string | null hasNext: boolean MessageItem?: FC MessageItemProps?: Partial diff --git a/packages/components/modules/messages/MessagesList/index.tsx b/packages/components/modules/messages/MessagesList/index.tsx index 76903907..e1f79fb1 100644 --- a/packages/components/modules/messages/MessagesList/index.tsx +++ b/packages/components/modules/messages/MessagesList/index.tsx @@ -1,5 +1,6 @@ -import { FC, useCallback, useMemo, useRef } from 'react' +import { FC, useCallback, useEffect, useMemo, useRef } from 'react' +import { useCurrentProfile } from '@baseapp-frontend/authentication' import { LoadingState } from '@baseapp-frontend/design-system' import { Box } from '@mui/material' @@ -8,6 +9,8 @@ import { Virtuoso, VirtuosoHandle } from 'react-virtuoso' import { ChatRoomMessagesListPaginationQuery } from '../../../__generated__/ChatRoomMessagesListPaginationQuery.graphql' import { MessagesListFragment$key } from '../../../__generated__/MessagesListFragment.graphql' +import { useChatRoom } from '../context' +import { useReadMessageMutation } from '../graphql/mutations/ReadMessages' import { MessagesListFragment } from '../graphql/queries/MessagesList' import useMessagesListSubscription from '../graphql/subscriptions/useMessagesListSubscription' import DefaultMessagesGroup from './MessagesGroup' @@ -40,6 +43,38 @@ const MessagesList: FC = ({ const allMessagesLastIndex = Number(allMessages?.length) - 1 const firstItemIndex = Math.max(totalNumberOfMessages - allMessages.length, 0) + const { currentProfile } = useCurrentProfile() + const { id: selectedRoom } = useChatRoom() + const [commitMutation] = useReadMessageMutation() + + const getFirstUnreadMessageId = () => { + if (room?.unreadMessages?.count === 0) return null + return allMessages.find((message, index) => { + const previousMessage = allMessages?.[index + 1] + const hasPreviousMessage = !!previousMessage + return ( + message?.profile?.id !== currentProfile?.id && + !message?.isRead && + (!hasPreviousMessage || previousMessage?.isRead) + ) + })?.id + } + + const firstUnreadMessageId = useMemo(getFirstUnreadMessageId, [selectedRoom, currentProfile]) + + useEffect(() => { + if (room?.unreadMessages?.count !== 0) { + commitMutation({ + variables: { + input: { + roomId: room?.id as string, + profileId: currentProfile?.id as string, + }, + }, + }) + } + }, [room?.id, room?.unreadMessages?.count, currentProfile]) + useMessagesListSubscription(room?.id) const renderLoadingState = () => { @@ -72,6 +107,7 @@ const MessagesList: FC = ({ messageIndex={messageIndex} isGroup={room?.isGroup} allMessagesLastIndex={allMessagesLastIndex} + firstUnreadMessageId={firstUnreadMessageId} hasNext={hasNext} {...MessagesGroupProps} /> @@ -83,6 +119,8 @@ const MessagesList: FC = ({ firstItemIndex, hasNext, room?.isGroup, + firstUnreadMessageId, + room?.participants?.totalCount, MessagesGroup, MessagesGroupProps, ], diff --git a/packages/components/modules/messages/graphql/subscriptions/useMessageCountUpdateSubscription.tsx b/packages/components/modules/messages/graphql/subscriptions/useMessageCountUpdateSubscription.tsx index bf1cd720..3270ab14 100644 --- a/packages/components/modules/messages/graphql/subscriptions/useMessageCountUpdateSubscription.tsx +++ b/packages/components/modules/messages/graphql/subscriptions/useMessageCountUpdateSubscription.tsx @@ -9,7 +9,6 @@ const MessageCountUpdateSubscription = graphql` chatRoomOnMessagesCountUpdate(profileId: $profileId) { profile { id - unreadMessagesCount chatRooms { totalCount edges { From e8da36993fc1ca15ea521e90f1c138abb6ba978c Mon Sep 17 00:00:00 2001 From: Ronan-Fernandes Date: Mon, 16 Dec 2024 14:36:59 -0300 Subject: [PATCH 2/3] Versioning --- packages/components/CHANGELOG.md | 9 +++++++-- packages/components/package.json | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1228d5ef..c23b0142 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,12 +1,17 @@ # @baseapp-frontend/components +## 0.0.39 + +### Patch Changes + +- Improve unread Badge and unread divider behavior + ## 0.0.38 ### Patch Changes - Add the ability to create new chat groups. - Fix a few height bugs on Virtuoso lists. - - Updated dependencies - @baseapp-frontend/design-system@0.0.26 @@ -32,7 +37,7 @@ ### Patch Changes - Updated dependencies -- @baseapp-frontend/graphql@1.1.14 + - @baseapp-frontend/graphql@1.1.14 ## 0.0.34 diff --git a/packages/components/package.json b/packages/components/package.json index 24ba1cf2..7258de3b 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/components", "description": "BaseApp components modules such as comments, notifications, messages, and more.", - "version": "0.0.38", + "version": "0.0.39", "main": "./index.ts", "types": "dist/index.d.ts", "sideEffects": false, From 51aec0b153679370c7feb0cefc2ae9e035eeb27a Mon Sep 17 00:00:00 2001 From: Alexandre Anicio Date: Sun, 29 Dec 2024 18:50:23 -0300 Subject: [PATCH 3/3] tweaks --- .../graphql/subscriptions/useMessagesListSubscription.tsx | 1 - packages/components/package.json | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/modules/messages/graphql/subscriptions/useMessagesListSubscription.tsx b/packages/components/modules/messages/graphql/subscriptions/useMessagesListSubscription.tsx index 80ef5374..49fb44ca 100644 --- a/packages/components/modules/messages/graphql/subscriptions/useMessagesListSubscription.tsx +++ b/packages/components/modules/messages/graphql/subscriptions/useMessagesListSubscription.tsx @@ -18,7 +18,6 @@ const newMessageSubscription = graphql` ` const useMessagesListSubscription = (roomId: string) => { - // TODO: use current profile hook when it is available const config = useMemo(() => { const connectionID = ConnectionHandler.getConnectionID(roomId, 'chatRoom_allMessages') return { diff --git a/packages/components/package.json b/packages/components/package.json index 7258de3b..344e962f 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -6,8 +6,8 @@ "types": "dist/index.d.ts", "sideEffects": false, "scripts": { - "build": "rm -rf dist && tsc --build tsconfig.build.json", - "dev": "rm -rf dist && tsc --watch", + "build": "rm -rf dist && pnpm relay && tsc --build tsconfig.build.json", + "dev": "rm -rf dist && pnpm relay && tsc --watch", "relay": "relay-compiler", "relay-download-schema": "dotenv -- bash -c 'get-graphql-schema \"$NEXT_PUBLIC_RELAY_ENDPOINT\" > schema.graphql'", "relay-update-schema": "pnpm relay-download-schema && pnpm relay",