fix(web-ui): invalidate conversation cache on new messages (#905)

Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>
johanbook · Jul 20, 2024 · bcb988c · bcb988c
1 parent 5aecbde
commit bcb988c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/services/web-ui/src/core/query/cache-keys.constants.ts b/services/web-ui/src/core/query/cache-keys.constants.ts
@@ -1,5 +1,6 @@
 export enum CacheKeysConstants {
   BlogPosts = "blogPosts",
+  Chats = "chats",
   CurrentOrganization = "CurrentOrganization",
   CurrentOrganizationMembers = "CurrentOrganizationMembers",
   CurrentProfile = "currentProfile",

diff --git a/services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.container.tsx b/services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.container.tsx
@@ -4,7 +4,7 @@ import { Typography } from "@mui/material";
 
 import { chatsApi } from "src/apis";
 import { useTranslation } from "src/core/i18n";
-import { useQuery } from "src/core/query";
+import { CacheKeysConstants, useQuery } from "src/core/query";
 import { ErrorView } from "src/views/ErrorView";
 
 import { ChatListPageComponent } from "./ChatListPage.component";
@@ -15,7 +15,7 @@ export function ChatListPageContainer(): ReactElement {
   const { t } = useTranslation("connections");
 
   const { error, data, isPending } = useQuery({
-    queryKey: ["chats"],
+    queryKey: [CacheKeysConstants.Chats],
     queryFn: () => chatsApi.getConversations(),
   });
 

diff --git a/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.container.tsx b/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.container.tsx
@@ -8,7 +8,7 @@ import { ErrorMessage } from "src/components/ui/ErrorMessage";
 import { useTranslation } from "src/core/i18n";
 import { NotificationEventsConstants } from "src/core/notifications";
 import { useHandleNotification } from "src/core/notifications";
-import { useQuery } from "src/core/query";
+import { CacheKeysConstants, useQuery, useQueryClient } from "src/core/query";
 import { ErrorView } from "src/views/ErrorView";
 
 import { ChatPageNav } from "./ChatPage.nav";
@@ -25,10 +25,19 @@ export function ChatPageContainer(): ReactElement {
     queryFn: () => chatsApi.getChatMessages({ conversationId: id }),
   });
 
+  const queryClient = useQueryClient();
+
+  function handleRefresh(): void {
+    refetch();
+    queryClient.invalidateQueries({
+      queryKey: [CacheKeysConstants.Chats],
+    });
+  }
+
   useHandleNotification({
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     onCondition: (event: any) => String(event.data.senderId) === id,
-    onNotification: () => refetch(),
+    onNotification: handleRefresh,
     type: NotificationEventsConstants.NewChatMessage,
   });
 
@@ -55,7 +64,7 @@ export function ChatPageContainer(): ReactElement {
           <ChatPageSkeleton />
         </Box>
 
-        <ChatTextField conversationId={id} onSentMessage={refetch} />
+        <ChatTextField conversationId={id} onSentMessage={handleRefresh} />
       </ChatPageNav>
     );
   }
@@ -67,7 +76,7 @@ export function ChatPageContainer(): ReactElement {
           <Typography color="textSecondary">{t("no-messages")}</Typography>
         </Box>
 
-        <ChatTextField conversationId={id} onSentMessage={refetch} />
+        <ChatTextField conversationId={id} onSentMessage={handleRefresh} />
       </ChatPageNav>
     );
   }
@@ -78,7 +87,7 @@ export function ChatPageContainer(): ReactElement {
         <ChatMessageList messages={data} />
       </Box>
 
-      <ChatTextField conversationId={id} onSentMessage={refetch} />
+      <ChatTextField conversationId={id} onSentMessage={handleRefresh} />
     </ChatPageNav>
   );
 }