From c6398893b1931c73d1d51c1a6ec18dfa04bfb837 Mon Sep 17 00:00:00 2001 From: Ronan <62265281+Ronan-Fernandes@users.noreply.github.com> Date: Fri, 14 Feb 2025 09:29:08 -0300 Subject: [PATCH 1/2] BA-2197: default social input send behavior (#199) * Default social input send behavior * Versioning --- packages/components/schema.graphql | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/packages/components/schema.graphql b/packages/components/schema.graphql index be14653e..b67ed8eb 100644 --- a/packages/components/schema.graphql +++ b/packages/components/schema.graphql @@ -154,20 +154,9 @@ type ChatRoomCreatePayload { clientMutationId: String } -input ChatRoomDeleteMessageInput { - id: ID! - clientMutationId: String -} - -type ChatRoomDeleteMessagePayload { - """May contain more than one error for same field.""" - errors: [ErrorType] - _debug: DjangoDebug - deletedMessage: MessageEdge - clientMutationId: String -} - -"""A Relay edge containing a `ChatRoom` and its cursor.""" +""" +A Relay edge containing a `ChatRoom` and its cursor. +""" type ChatRoomEdge { """The item at the end of the edge""" node: ChatRoom @@ -201,6 +190,7 @@ type ChatRoomOnMessagesCountUpdate { type ChatRoomOnRoomUpdate { room: ChatRoomEdge removedParticipants: [ChatRoomParticipant] + addedParticipants: [ChatRoomParticipant] } type ChatRoomParticipant implements Node { @@ -324,6 +314,7 @@ type ChatRoomUpdatePayload { _debug: DjangoDebug room: ChatRoomEdge removedParticipants: [ChatRoomParticipant] + addedParticipants: [ChatRoomParticipant] clientMutationId: String } From b61435bc1faf7b20361ead249892534742a691b0 Mon Sep 17 00:00:00 2001 From: Pedro Tiburcio Date: Tue, 14 Jan 2025 08:51:09 -0500 Subject: [PATCH 2/2] fix: chat rooms refetch issue --- .../messages/web/ChatRoomsList/index.tsx | 91 ++++++++++++------- packages/components/schema.graphql | 19 +++- 2 files changed, 72 insertions(+), 38 deletions(-) diff --git a/packages/components/modules/messages/web/ChatRoomsList/index.tsx b/packages/components/modules/messages/web/ChatRoomsList/index.tsx index c21e2563..fdc6a92b 100644 --- a/packages/components/modules/messages/web/ChatRoomsList/index.tsx +++ b/packages/components/modules/messages/web/ChatRoomsList/index.tsx @@ -1,6 +1,14 @@ 'use client' -import { ChangeEventHandler, FC, useCallback, useMemo, useState, useTransition } from 'react' +import { + ChangeEventHandler, + FC, + useCallback, + useEffect, + useMemo, + useState, + useTransition, +} from 'react' import { LoadingState } from '@baseapp-frontend/design-system/components/web/displays' import { Searchbar as DefaultSearchbar } from '@baseapp-frontend/design-system/components/web/inputs' @@ -28,6 +36,7 @@ const ChatRoomsList: FC = ({ VirtuosoProps = {}, }) => { const [tab, setTab] = useState(CHAT_TAB_VALUES.active) + const [renderList, setRenderList] = useState(true) const [isRefetchPending, startRefetchTransition] = useTransition() const { data, loadNext, isLoadingNext, hasNext, refetch } = useRoomsList( @@ -44,39 +53,53 @@ const ChatRoomsList: FC = ({ const handleSearchChange: ChangeEventHandler = (e) => { const value = e.target.value || '' startTransition(() => { - refetch({ - q: value, - unreadMessages: isInUnreadTab, - archived: isInArchivedTab, - }) + refetch( + { + q: value, + unreadMessages: isInUnreadTab, + archived: isInArchivedTab, + }, + { fetchPolicy: 'network-only' }, + ) }) } const handleSearchClear = () => { startTransition(() => { reset() - refetch({ - q: '', - unreadMessages: isInUnreadTab, - archived: isInArchivedTab, - }) + refetch( + { + q: '', + unreadMessages: isInUnreadTab, + archived: isInArchivedTab, + }, + { fetchPolicy: 'network-only' }, + ) }) } const handleChange = (event: React.SyntheticEvent, newTab: string) => { setTab(newTab as ChatTabValues) startRefetchTransition(() => { + setRenderList(false) refetch( { q: searchValue, unreadMessages: newTab === CHAT_TAB_VALUES.unread, archived: newTab === CHAT_TAB_VALUES.archived, }, - { fetchPolicy: 'store-and-network' }, + { fetchPolicy: 'network-only' }, ) }) } + // Virtuoso has a bug where it does not recognize endReached if the data is changed while the component is still mounted. + // The `renderList` state is a workaround to force the component to dismount and remount, + // to ensure that Virtuoso will recognized endReached everytime the tab is changed + useEffect(() => { + setRenderList(true) + }, [data]) + const { id: selectedRoom, setChatRoom } = useChatRoom() const chatRooms = useMemo( () => data?.chatRooms?.edges?.filter((edge) => edge?.node).map((edge) => edge?.node) || [], @@ -126,29 +149,14 @@ const ChatRoomsList: FC = ({ ) const renderListContent = () => { - const emptyChatRoomsList = chatRooms.length === 0 - - if (!isPending && searchValue && emptyChatRoomsList) return + const hasEmptyStates = !isPending && chatRooms.length === 0 - if (!isPending && emptyChatRoomsList) return + if (hasEmptyStates) { + if (searchValue) return + return + } - return ( - renderItem(item)} - style={{ scrollbarWidth: 'none' }} - components={{ - Footer: renderLoadingState, - }} - endReached={() => { - if (hasNext) { - loadNext(5) - } - }} - {...VirtuosoProps} - /> - ) + return undefined } return ( @@ -194,6 +202,23 @@ const ChatRoomsList: FC = ({ {renderListContent()} + {renderList && ( + renderItem(item)} + style={{ scrollbarWidth: 'none' }} + components={{ + Footer: renderLoadingState, + }} + endReached={() => { + if (hasNext) { + loadNext(5) + } + }} + {...VirtuosoProps} + /> + )} ) } diff --git a/packages/components/schema.graphql b/packages/components/schema.graphql index b67ed8eb..be14653e 100644 --- a/packages/components/schema.graphql +++ b/packages/components/schema.graphql @@ -154,9 +154,20 @@ type ChatRoomCreatePayload { clientMutationId: String } -""" -A Relay edge containing a `ChatRoom` and its cursor. -""" +input ChatRoomDeleteMessageInput { + id: ID! + clientMutationId: String +} + +type ChatRoomDeleteMessagePayload { + """May contain more than one error for same field.""" + errors: [ErrorType] + _debug: DjangoDebug + deletedMessage: MessageEdge + clientMutationId: String +} + +"""A Relay edge containing a `ChatRoom` and its cursor.""" type ChatRoomEdge { """The item at the end of the edge""" node: ChatRoom @@ -190,7 +201,6 @@ type ChatRoomOnMessagesCountUpdate { type ChatRoomOnRoomUpdate { room: ChatRoomEdge removedParticipants: [ChatRoomParticipant] - addedParticipants: [ChatRoomParticipant] } type ChatRoomParticipant implements Node { @@ -314,7 +324,6 @@ type ChatRoomUpdatePayload { _debug: DjangoDebug room: ChatRoomEdge removedParticipants: [ChatRoomParticipant] - addedParticipants: [ChatRoomParticipant] clientMutationId: String }