fix: chat rooms refetch issue

Author: pt-tsl

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 1.0.8
+
+### Patch Changes
+
+- Enabled deletion of chat room messages
+
 ## 1.0.7
 
 ### Patch Changes

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<ChatRoomsListProps> = ({
   VirtuosoProps = {},
 }) => {
   const [tab, setTab] = useState<ChatTabValues>(CHAT_TAB_VALUES.active)
+  const [renderList, setRenderList] = useState<boolean>(true)
 
   const [isRefetchPending, startRefetchTransition] = useTransition()
   const { data, loadNext, isLoadingNext, hasNext, refetch } = useRoomsList(
@@ -44,39 +53,53 @@ const ChatRoomsList: FC<ChatRoomsListProps> = ({
   const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (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<ChatRoomsListProps> = ({
   )
 
   const renderListContent = () => {
-    const emptyChatRoomsList = chatRooms.length === 0
-
-    if (!isPending && searchValue && emptyChatRoomsList) return <SearchNotFoundState />
+    const hasEmptyStates = !isPending && chatRooms.length === 0
 
-    if (!isPending && emptyChatRoomsList) return <EmptyChatRoomsState />
+    if (hasEmptyStates) {
+      if (searchValue) return <SearchNotFoundState />
+      return <EmptyChatRoomsState />
+    }
 
-    return (
-      <Virtuoso
-        data={chatRooms}
-        overscan={1}
-        itemContent={(_index, item) => renderItem(item)}
-        style={{ scrollbarWidth: 'none' }}
-        components={{
-          Footer: renderLoadingState,
-        }}
-        endReached={() => {
-          if (hasNext) {
-            loadNext(5)
-          }
-        }}
-        {...VirtuosoProps}
-      />
-    )
+    return undefined
   }
 
   return (
@@ -194,6 +202,23 @@ const ChatRoomsList: FC<ChatRoomsListProps> = ({
         <Tab label={renderTabLabel(CHAT_TAB_VALUES.archived)} value={CHAT_TAB_VALUES.archived} />
       </Tabs>
       {renderListContent()}
+      {renderList && (
+        <Virtuoso
+          data={chatRooms}
+          overscan={1}
+          itemContent={(_index, item) => renderItem(item)}
+          style={{ scrollbarWidth: 'none' }}
+          components={{
+            Footer: renderLoadingState,
+          }}
+          endReached={() => {
+            if (hasNext) {
+              loadNext(5)
+            }
+          }}
+          {...VirtuosoProps}
+        />
+      )}
     </ChatRoomListContainer>
   )
 }

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "sideEffects": false,
   "scripts": {
     "babel:bundle": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",

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
 }