From 08f91188bb114ca6026d48afc5e4c5f53de96813 Mon Sep 17 00:00:00 2001 From: Ronan-Fernandes Date: Wed, 11 Dec 2024 14:44:35 -0300 Subject: [PATCH] Update unread messgaes --- packages/components/CHANGELOG.md | 8 + ...eMessageCountUpdateSubscription.graphql.ts | 575 +++++------------- .../modules/messages/ChatRoom/index.tsx | 33 +- .../ChatRoomsList/ChatRoomItem/styled.tsx | 1 + .../modules/messages/ChatRoomsList/index.tsx | 2 + .../modules/messages/MessagesList/index.tsx | 16 - .../useMessageCountUpdateSubscription.tsx | 10 +- .../subscriptions/useRoomListSubscription.tsx | 2 +- packages/components/package.json | 2 +- 9 files changed, 189 insertions(+), 460 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index b25be7a2..1f75c909 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,13 @@ # @baseapp-frontend/components +## 0.0.28 + +### Patch Changes + +- Move useMessageCountUpdate to be used on chatrooms list instead of being used on the templates +- update useMessageCountUpdate query +- Fix unread count badge alignment + ## 0.0.27 ### Patch Changes diff --git a/packages/components/__generated__/useMessageCountUpdateSubscription.graphql.ts b/packages/components/__generated__/useMessageCountUpdateSubscription.graphql.ts index 7105d3a9..fca51d96 100644 --- a/packages/components/__generated__/useMessageCountUpdateSubscription.graphql.ts +++ b/packages/components/__generated__/useMessageCountUpdateSubscription.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<2599ef209ba3fbbc434d26f3c87b62ca>> + * @generated SignedSource<> * @lightSyntaxTransform * @nogrep */ @@ -9,7 +9,6 @@ /* eslint-disable */ // @ts-nocheck import { ConcreteRequest, GraphQLSubscription } from 'relay-runtime' -import { FragmentRefs } from 'relay-runtime' export type useMessageCountUpdateSubscription$variables = { profileId: string @@ -25,10 +24,26 @@ export type useMessageCountUpdateSubscription$data = { | { readonly node: | { - readonly __typename: 'ChatRoom' + readonly allMessages: + | { + readonly edges: ReadonlyArray< + | { + readonly node: + | { + readonly id: string + readonly isRead: boolean | null | undefined + } + | null + | undefined + } + | null + | undefined + > + } + | null + | undefined readonly id: string readonly unreadMessagesCount: number | null | undefined - readonly ' $fragmentSpreads': FragmentRefs<'RoomFragment'> } | null | undefined @@ -62,91 +77,134 @@ const node: ConcreteRequest = (function () { name: 'profileId', }, ], - v1 = [ - { - kind: 'Variable', - name: 'profileId', - variableName: 'profileId', - }, - ], - v2 = { + v1 = { alias: null, args: null, kind: 'ScalarField', name: 'id', storageKey: null, }, - v3 = { + v2 = { alias: null, args: null, kind: 'ScalarField', name: 'unreadMessagesCount', storageKey: null, }, - v4 = { - alias: null, - args: null, - kind: 'ScalarField', - name: 'totalCount', - storageKey: null, - }, - v5 = { - alias: null, - args: null, - kind: 'ScalarField', - name: '__typename', - storageKey: null, - }, - v6 = [ + v3 = [ { alias: null, - args: null, - kind: 'ScalarField', - name: 'url', + args: [ + { + kind: 'Variable', + name: 'profileId', + variableName: 'profileId', + }, + ], + concreteType: 'ChatRoomOnMessagesCountUpdate', + kind: 'LinkedField', + name: 'chatRoomOnMessagesCountUpdate', + plural: false, + selections: [ + { + alias: null, + args: null, + concreteType: 'Profile', + kind: 'LinkedField', + name: 'profile', + plural: false, + selections: [ + v1 /*: any*/, + v2 /*: any*/, + { + alias: null, + args: null, + concreteType: 'ChatRoomConnection', + kind: 'LinkedField', + name: 'chatRooms', + plural: false, + selections: [ + { + alias: null, + args: null, + kind: 'ScalarField', + name: 'totalCount', + storageKey: null, + }, + { + alias: null, + args: null, + concreteType: 'ChatRoomEdge', + kind: 'LinkedField', + name: 'edges', + plural: true, + selections: [ + { + alias: null, + args: null, + concreteType: 'ChatRoom', + kind: 'LinkedField', + name: 'node', + plural: false, + selections: [ + v1 /*: any*/, + v2 /*: any*/, + { + alias: null, + args: null, + concreteType: 'MessageConnection', + kind: 'LinkedField', + name: 'allMessages', + plural: false, + selections: [ + { + alias: null, + args: null, + concreteType: 'MessageEdge', + kind: 'LinkedField', + name: 'edges', + plural: true, + selections: [ + { + alias: null, + args: null, + concreteType: 'Message', + kind: 'LinkedField', + name: 'node', + plural: false, + selections: [ + v1 /*: any*/, + { + alias: null, + args: null, + kind: 'ScalarField', + name: 'isRead', + storageKey: null, + }, + ], + storageKey: null, + }, + ], + storageKey: null, + }, + ], + storageKey: null, + }, + ], + storageKey: null, + }, + ], + storageKey: null, + }, + ], + storageKey: null, + }, + ], + storageKey: null, + }, + ], storageKey: null, }, - ], - v7 = { - alias: null, - args: [ - { - kind: 'Literal', - name: 'height', - value: 100, - }, - { - kind: 'Literal', - name: 'width', - value: 100, - }, - ], - concreteType: 'File', - kind: 'LinkedField', - name: 'image', - plural: false, - selections: v6 /*: any*/, - storageKey: 'image(height:100,width:100)', - }, - v8 = { - alias: null, - args: null, - kind: 'ScalarField', - name: 'content', - storageKey: null, - }, - v9 = { - alias: null, - args: null, - kind: 'ScalarField', - name: 'name', - storageKey: null, - }, - v10 = [ - { - kind: 'Literal', - name: 'first', - value: 20, - }, ] return { fragment: { @@ -154,74 +212,7 @@ const node: ConcreteRequest = (function () { kind: 'Fragment', metadata: null, name: 'useMessageCountUpdateSubscription', - selections: [ - { - alias: null, - args: v1 /*: any*/, - concreteType: 'ChatRoomOnMessagesCountUpdate', - kind: 'LinkedField', - name: 'chatRoomOnMessagesCountUpdate', - plural: false, - selections: [ - { - alias: null, - args: null, - concreteType: 'Profile', - kind: 'LinkedField', - name: 'profile', - plural: false, - selections: [ - v2 /*: any*/, - v3 /*: any*/, - { - alias: null, - args: null, - concreteType: 'ChatRoomConnection', - kind: 'LinkedField', - name: 'chatRooms', - plural: false, - selections: [ - v4 /*: any*/, - { - alias: null, - args: null, - concreteType: 'ChatRoomEdge', - kind: 'LinkedField', - name: 'edges', - plural: true, - selections: [ - { - alias: null, - args: null, - concreteType: 'ChatRoom', - kind: 'LinkedField', - name: 'node', - plural: false, - selections: [ - v2 /*: any*/, - v5 /*: any*/, - v3 /*: any*/, - { - args: null, - kind: 'FragmentSpread', - name: 'RoomFragment', - }, - ], - storageKey: null, - }, - ], - storageKey: null, - }, - ], - storageKey: null, - }, - ], - storageKey: null, - }, - ], - storageKey: null, - }, - ], + selections: v3 /*: any*/, type: 'Subscription', abstractKey: null, }, @@ -230,313 +221,19 @@ const node: ConcreteRequest = (function () { argumentDefinitions: v0 /*: any*/, kind: 'Operation', name: 'useMessageCountUpdateSubscription', - selections: [ - { - alias: null, - args: v1 /*: any*/, - concreteType: 'ChatRoomOnMessagesCountUpdate', - kind: 'LinkedField', - name: 'chatRoomOnMessagesCountUpdate', - plural: false, - selections: [ - { - alias: null, - args: null, - concreteType: 'Profile', - kind: 'LinkedField', - name: 'profile', - plural: false, - selections: [ - v2 /*: any*/, - v3 /*: any*/, - { - alias: null, - args: null, - concreteType: 'ChatRoomConnection', - kind: 'LinkedField', - name: 'chatRooms', - plural: false, - selections: [ - v4 /*: any*/, - { - alias: null, - args: null, - concreteType: 'ChatRoomEdge', - kind: 'LinkedField', - name: 'edges', - plural: true, - selections: [ - { - alias: null, - args: null, - concreteType: 'ChatRoom', - kind: 'LinkedField', - name: 'node', - plural: false, - selections: [ - v2 /*: any*/, - v5 /*: any*/, - v3 /*: any*/, - v7 /*: any*/, - { - alias: null, - args: null, - kind: 'ScalarField', - name: 'lastMessageTime', - storageKey: null, - }, - { - alias: null, - args: null, - concreteType: 'Message', - kind: 'LinkedField', - name: 'lastMessage', - plural: false, - selections: [v2 /*: any*/, v8 /*: any*/], - storageKey: null, - }, - { - alias: null, - args: null, - kind: 'ScalarField', - name: 'title', - storageKey: null, - }, - { - alias: null, - args: null, - concreteType: 'ChatRoomParticipantConnection', - kind: 'LinkedField', - name: 'participants', - plural: false, - selections: [ - v4 /*: any*/, - { - alias: null, - args: null, - concreteType: 'ChatRoomParticipantEdge', - kind: 'LinkedField', - name: 'edges', - plural: true, - selections: [ - { - alias: null, - args: null, - concreteType: 'ChatRoomParticipant', - kind: 'LinkedField', - name: 'node', - plural: false, - selections: [ - v2 /*: any*/, - { - alias: null, - args: null, - concreteType: 'Profile', - kind: 'LinkedField', - name: 'profile', - plural: false, - selections: [ - v2 /*: any*/, - v5 /*: any*/, - v9 /*: any*/, - v7 /*: any*/, - ], - storageKey: null, - }, - ], - storageKey: null, - }, - ], - storageKey: null, - }, - ], - storageKey: null, - }, - { - alias: null, - args: v10 /*: any*/, - concreteType: 'MessageConnection', - kind: 'LinkedField', - name: 'allMessages', - plural: false, - selections: [ - v4 /*: any*/, - { - alias: null, - args: null, - concreteType: 'MessageEdge', - kind: 'LinkedField', - name: 'edges', - plural: true, - selections: [ - { - alias: null, - args: null, - concreteType: 'Message', - kind: 'LinkedField', - name: 'node', - plural: false, - selections: [ - v2 /*: any*/, - { - alias: null, - args: null, - kind: 'ScalarField', - name: 'created', - storageKey: null, - }, - { - alias: null, - args: null, - concreteType: 'Profile', - kind: 'LinkedField', - name: 'profile', - plural: false, - selections: [ - v2 /*: any*/, - v9 /*: any*/, - { - alias: null, - args: [ - { - kind: 'Literal', - name: 'height', - value: 32, - }, - { - kind: 'Literal', - name: 'width', - value: 32, - }, - ], - concreteType: 'File', - kind: 'LinkedField', - name: 'image', - plural: false, - selections: v6 /*: any*/, - storageKey: 'image(height:32,width:32)', - }, - ], - storageKey: null, - }, - { - alias: null, - args: null, - kind: 'ScalarField', - name: 'isRead', - storageKey: null, - }, - v8 /*: any*/, - { - alias: null, - args: null, - kind: 'ScalarField', - name: 'extraData', - storageKey: null, - }, - { - alias: null, - args: null, - concreteType: 'Message', - kind: 'LinkedField', - name: 'inReplyTo', - plural: false, - selections: [v2 /*: any*/], - storageKey: null, - }, - { - alias: null, - args: null, - kind: 'ScalarField', - name: 'pk', - storageKey: null, - }, - { - alias: null, - args: null, - kind: 'ScalarField', - name: 'verb', - storageKey: null, - }, - v5 /*: any*/, - ], - storageKey: null, - }, - { - alias: null, - args: null, - kind: 'ScalarField', - name: 'cursor', - storageKey: null, - }, - ], - storageKey: null, - }, - { - alias: null, - args: null, - concreteType: 'PageInfo', - kind: 'LinkedField', - name: 'pageInfo', - plural: false, - selections: [ - { - alias: null, - args: null, - kind: 'ScalarField', - name: 'hasNextPage', - storageKey: null, - }, - { - alias: null, - args: null, - kind: 'ScalarField', - name: 'endCursor', - storageKey: null, - }, - ], - storageKey: null, - }, - ], - storageKey: 'allMessages(first:20)', - }, - { - alias: null, - args: v10 /*: any*/, - filters: null, - handle: 'connection', - key: 'chatRoom_allMessages', - kind: 'LinkedHandle', - name: 'allMessages', - }, - ], - storageKey: null, - }, - ], - storageKey: null, - }, - ], - storageKey: null, - }, - ], - storageKey: null, - }, - ], - storageKey: null, - }, - ], + selections: v3 /*: any*/, }, params: { - cacheID: 'a300524a7d6b366a4ddef0f8e692e2a5', + cacheID: '1eced1843420ed0b61b7d8845effc2ae', id: null, metadata: {}, name: 'useMessageCountUpdateSubscription', operationKind: 'subscription', - text: 'subscription useMessageCountUpdateSubscription(\n $profileId: ID!\n) {\n chatRoomOnMessagesCountUpdate(profileId: $profileId) {\n profile {\n id\n unreadMessagesCount\n chatRooms {\n totalCount\n edges {\n node {\n id\n __typename\n unreadMessagesCount\n ...RoomFragment\n }\n }\n }\n }\n }\n}\n\nfragment MessageItemFragment on Message {\n id\n content\n created\n extraData\n inReplyTo {\n id\n }\n isRead\n pk\n profile {\n id\n }\n verb\n}\n\nfragment MessagesListFragment on ChatRoom {\n id\n participants {\n totalCount\n }\n unreadMessagesCount\n allMessages(first: 20) {\n totalCount\n edges {\n node {\n id\n created\n profile {\n id\n name\n image(height: 32, width: 32) {\n url\n }\n }\n isRead\n ...MessageItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n\nfragment RoomFragment on ChatRoom {\n id\n unreadMessagesCount\n image(width: 100, height: 100) {\n url\n }\n lastMessageTime\n lastMessage {\n id\n content\n }\n title\n participants {\n totalCount\n edges {\n node {\n id\n profile {\n id\n __typename\n name\n image(width: 100, height: 100) {\n url\n }\n }\n }\n }\n }\n ...MessagesListFragment\n}\n', + text: 'subscription useMessageCountUpdateSubscription(\n $profileId: ID!\n) {\n chatRoomOnMessagesCountUpdate(profileId: $profileId) {\n profile {\n id\n unreadMessagesCount\n chatRooms {\n totalCount\n edges {\n node {\n id\n unreadMessagesCount\n allMessages {\n edges {\n node {\n id\n isRead\n }\n }\n }\n }\n }\n }\n }\n }\n}\n', }, } })() -;(node as any).hash = 'e23433aa9b2d395b7154b98e1503417f' +;(node as any).hash = '89bba0acb4fe5156ef22a5201005474a' export default node diff --git a/packages/components/modules/messages/ChatRoom/index.tsx b/packages/components/modules/messages/ChatRoom/index.tsx index ac031232..2791a478 100644 --- a/packages/components/modules/messages/ChatRoom/index.tsx +++ b/packages/components/modules/messages/ChatRoom/index.tsx @@ -1,7 +1,8 @@ 'use client' -import { FC, Suspense } from 'react' +import { FC, Suspense, useEffect, useRef } from 'react' +import { useCurrentProfile } from '@baseapp-frontend/authentication' import { LoadingState } from '@baseapp-frontend/design-system' import { Box } from '@mui/material' @@ -10,6 +11,7 @@ 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 { ChatRoomContainer } from './styled' import { ChatRoomProps } from './types' @@ -21,6 +23,7 @@ const ChatRoom: FC = ({ SendMessage = DefaultSendMessage, SendMessageProps = {}, }) => { + const hasRunRef = useRef(false) // TODO: pre load this query and instead of lazyload const { chatRoom } = useLazyLoadQuery( ChatRoomQuery, @@ -32,6 +35,34 @@ const ChatRoom: FC = ({ fetchKey: roomId, }, ) + const { currentProfile: profile } = useCurrentProfile() + const [commitMutation] = useReadMessageMutation() + + const prevProfileIdRef = useRef(profile?.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 () => {} + }, [profile?.id, chatRoom?.id]) + + useEffect(() => { + prevProfileIdRef.current = profile?.id + prevRoomIdRef.current = chatRoom?.id + }, [profile?.id, chatRoom?.id]) // TODO: handle error for chatRoom if (!chatRoom) { diff --git a/packages/components/modules/messages/ChatRoomsList/ChatRoomItem/styled.tsx b/packages/components/modules/messages/ChatRoomsList/ChatRoomItem/styled.tsx index 3cd08082..a1b2af1c 100644 --- a/packages/components/modules/messages/ChatRoomsList/ChatRoomItem/styled.tsx +++ b/packages/components/modules/messages/ChatRoomsList/ChatRoomItem/styled.tsx @@ -6,6 +6,7 @@ import { StyledChatCardProps } from './types' export const StyledChatCard = styled(Box)( ({ theme, showPointer = false, isCardSelected = false }) => ({ display: 'grid', + alignItems: 'center', height: '100%', width: '100%', maxWidth: '390px', diff --git a/packages/components/modules/messages/ChatRoomsList/index.tsx b/packages/components/modules/messages/ChatRoomsList/index.tsx index effc5a2a..dcaf5394 100644 --- a/packages/components/modules/messages/ChatRoomsList/index.tsx +++ b/packages/components/modules/messages/ChatRoomsList/index.tsx @@ -12,6 +12,7 @@ import { RoomsListFragment$key } from '../../../__generated__/RoomsListFragment. import SearchNotFoundState from '../SearchNotFoundState' import { useChatRoom } from '../context' import { useRoomsList } from '../graphql/queries/RoomsList' +import useMessageCountUpdate from '../graphql/subscriptions/useMessageCountUpdateSubscription' import useRoomListSubscription from '../graphql/subscriptions/useRoomListSubscription' import DefaultChatRoomItem from './ChatRoomItem' import DefaultEmptyChatRoomsState from './EmptyChatRoomsState' @@ -70,6 +71,7 @@ const ChatRoomsList: FC = ({ ) useRoomListSubscription(data.id) + useMessageCountUpdate() // TODO: keep this until we fix the chatRoomOnRoomUpdate subscription const renderItem = useCallback( (room: ChatRoomNode) => { diff --git a/packages/components/modules/messages/MessagesList/index.tsx b/packages/components/modules/messages/MessagesList/index.tsx index 4c3f1760..ee1f74b7 100644 --- a/packages/components/modules/messages/MessagesList/index.tsx +++ b/packages/components/modules/messages/MessagesList/index.tsx @@ -1,6 +1,5 @@ import { FC, useCallback, useMemo, useRef } from 'react' -import { useCurrentProfile } from '@baseapp-frontend/authentication' import { LoadingState } from '@baseapp-frontend/design-system' import { Box } from '@mui/material' @@ -9,7 +8,6 @@ import { Virtuoso, VirtuosoHandle } from 'react-virtuoso' import { ChatRoomMessagesListPaginationQuery } from '../../../__generated__/ChatRoomMessagesListPaginationQuery.graphql' import { MessagesListFragment$key } from '../../../__generated__/MessagesListFragment.graphql' -import { useReadMessageMutation } from '../graphql/mutations/ReadMessages' import { MessagesListFragment } from '../graphql/queries/MessagesList' import useMessagesListSubscription from '../graphql/subscriptions/useMessagesListSubscription' import DefaultMessagesGroup from './MessagesGroup' @@ -31,8 +29,6 @@ const MessagesList: FC = ({ MessagesListFragment, roomRef, ) - const { currentProfile: profile } = useCurrentProfile() - const [commitMutation] = useReadMessageMutation() const totalNumberOfMessages = room?.allMessages?.totalCount ?? 0 const virtuosoRef = useRef(null) @@ -105,18 +101,6 @@ const MessagesList: FC = ({ loadNext(MESSAGES_TO_LOAD_NEXT) } }} - endReached={() => { - if (room?.unreadMessagesCount && room?.unreadMessagesCount > 0) { - commitMutation({ - variables: { - input: { - roomId: room.id, - profileId: profile?.id as string, - }, - }, - }) - } - }} components={{ Header: renderLoadingState, Footer: renderHeader, diff --git a/packages/components/modules/messages/graphql/subscriptions/useMessageCountUpdateSubscription.tsx b/packages/components/modules/messages/graphql/subscriptions/useMessageCountUpdateSubscription.tsx index c958c88b..919259e2 100644 --- a/packages/components/modules/messages/graphql/subscriptions/useMessageCountUpdateSubscription.tsx +++ b/packages/components/modules/messages/graphql/subscriptions/useMessageCountUpdateSubscription.tsx @@ -15,9 +15,15 @@ const MessageCountUpdateSubscription = graphql` edges { node { id - __typename unreadMessagesCount - ...RoomFragment + allMessages { + edges { + node { + id + isRead + } + } + } } } } diff --git a/packages/components/modules/messages/graphql/subscriptions/useRoomListSubscription.tsx b/packages/components/modules/messages/graphql/subscriptions/useRoomListSubscription.tsx index f6582e76..ffb5807b 100644 --- a/packages/components/modules/messages/graphql/subscriptions/useRoomListSubscription.tsx +++ b/packages/components/modules/messages/graphql/subscriptions/useRoomListSubscription.tsx @@ -65,7 +65,7 @@ const useRoomListSubscription = (nodeId: string) => { return null }, }), - [nodeId], + [nodeId, profile?.id], ) return useSubscription(config) diff --git a/packages/components/package.json b/packages/components/package.json index d82927b6..b2f6724e 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.27", + "version": "0.0.28", "main": "./index.ts", "types": "dist/index.d.ts", "sideEffects": false,