feat: add websocket for delete message operation (#139)

* feat: add websocket for delete message operation * feat: add mutation for delete chat message
graasp · Mar 10, 2022 · 9b111d9 · 9b111d9
1 parent f8cff60
commit 9b111d9
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 5 deletions.
diff --git a/src/api/chat.ts b/src/api/chat.ts
@@ -1,9 +1,10 @@
-import { PartialChatMessage, QueryClientConfig, UUID } from '../types';
+import { PartialChatMessage, PartialNewChatMessage, QueryClientConfig, UUID } from '../types';
 import configureAxios, {
   fallbackToPublic,
   verifyAuthentication,
 } from './axios';
 import {
+  buildDeleteItemChatMessageRoute,
   buildGetItemChatRoute,
   buildGetPublicItemChatRoute,
   buildPostItemChatMessageRoute,
@@ -18,7 +19,7 @@ export const getItemChat = async (id: UUID, { API_HOST }: QueryClientConfig) =>
   );
 
 export const postItemChatMessage = async (
-  { chatId, body }: PartialChatMessage,
+  { chatId, body }: PartialNewChatMessage,
   { API_HOST }: QueryClientConfig,
 ) =>
   verifyAuthentication(() =>
@@ -28,3 +29,13 @@ export const postItemChatMessage = async (
       })
       .then(({ data }) => data),
   );
+
+export const deleteItemChatMessage = async (
+  { chatId, messageId }: PartialChatMessage,
+  { API_HOST }: QueryClientConfig,
+) =>
+  verifyAuthentication(() =>
+    axios
+      .delete(`${API_HOST}/${buildDeleteItemChatMessageRoute(chatId, messageId)}`)
+      .then(({ data }) => data),
+  );
diff --git a/src/api/routes.ts b/src/api/routes.ts
@@ -62,6 +62,8 @@ export const buildGetPublicItemChatRoute = (id: UUID) =>
   `${PUBLIC_PREFIX}/${buildGetItemChatRoute(id)}`;
 export const buildPostItemChatMessageRoute = (id: UUID) =>
   `${ITEMS_ROUTE}/${id}/chat`;
+export const buildDeleteItemChatMessageRoute = (chatId: UUID, messageId: UUID) =>
+  `${ITEMS_ROUTE}/${chatId}/chat/${messageId}`;
 
 export const buildGetMemberBy = (email: string) =>
   `${MEMBERS_ROUTE}/search?email=${email.toLowerCase()}`;
@@ -260,6 +262,7 @@ export const API_ROUTES = {
   buildGetPublicChildrenRoute,
   buildGetItemChatRoute,
   buildPostItemChatMessageRoute,
+  buildDeleteItemChatMessageRoute,
   buildRecycleItemRoute,
   buildRecycleItemsRoute,
   buildGetPublicItemsWithTag,

diff --git a/src/config/keys.ts b/src/config/keys.ts
@@ -119,6 +119,7 @@ export const MUTATION_KEYS = {
   EDIT_ITEM_MEMBERSHIP: 'editItemMembership',
   DELETE_ITEM_MEMBERSHIP: 'deleteItemMembership',
   POST_ITEM_CHAT_MESSAGE: 'postChatMessage',
+  DELETE_ITEM_CHAT_MESSAGE: 'deleteChatMessage',
   RECYCLE_ITEM: 'recycleItem',
   RECYCLE_ITEMS: 'recycleItems',
   RESTORE_ITEMS: 'restoreItems',

diff --git a/src/mutations/chat.ts b/src/mutations/chat.ts
@@ -1,10 +1,10 @@
 import { QueryClient } from 'react-query';
 import * as Api from '../api';
 import { buildItemChatKey, MUTATION_KEYS } from '../config/keys';
-import { postItemChatMessageRoutine } from '../routines';
+import { deleteItemChatMessageRoutine, postItemChatMessageRoutine } from '../routines';
 import { QueryClientConfig } from '../types';
 
-const { POST_ITEM_CHAT_MESSAGE } = MUTATION_KEYS;
+const { POST_ITEM_CHAT_MESSAGE, DELETE_ITEM_CHAT_MESSAGE } = MUTATION_KEYS;
 
 export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {
   queryClient.setMutationDefaults(POST_ITEM_CHAT_MESSAGE, {
@@ -23,4 +23,21 @@ export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {
       }
     },
   });
+
+  queryClient.setMutationDefaults(DELETE_ITEM_CHAT_MESSAGE, {
+    mutationFn: (chatMsg) => Api.deleteItemChatMessage(chatMsg, queryConfig),
+    onError: (error) => {
+      queryConfig.notifier?.({
+        type: deleteItemChatMessageRoutine.FAILURE,
+        payload: { error },
+      });
+    },
+    onSettled: (_data, _error, { chatId }) => {
+      // invalidate keys only if websockets are disabled
+      // otherwise the cache is updated automatically
+      if (!queryConfig.enableWebsocket) {
+        queryClient.invalidateQueries(buildItemChatKey(chatId));
+      }
+    },
+  });
 };
diff --git a/src/routines/chat.ts b/src/routines/chat.ts
@@ -4,3 +4,7 @@ import createRoutine from './utils';
 export const postItemChatMessageRoutine = createRoutine(
   'POST_ITEM_CHAT_MESSAGE',
 );
+
+export const deleteItemChatMessageRoutine = createRoutine(
+  'DELETE_ITEM_CHAT_MESSAGE',
+);
diff --git a/src/types.ts b/src/types.ts
@@ -108,11 +108,17 @@ export enum PERMISSION_LEVELS {
   ADMIN = 'admin',
 }
 
-export type PartialChatMessage = {
+export type PartialNewChatMessage = {
   chatId: string;
   body: string;
 };
 
+export type PartialChatMessage = {
+  chatId: string;
+  messageId: string;
+  body?: string;
+};
+
 export type ChatMessage = {
   id: string,
   chatId: string;

diff --git a/src/ws/hooks/chat.ts b/src/ws/hooks/chat.ts
@@ -48,6 +48,11 @@ export const configureWsChatHooks = (
                 queryClient.setQueryData(chatKey, mutation);
                 break;
               }
+              case OPS.DELETE: {
+                const mutation = current.update('messages', (messages) => messages.filter(m => m.id !== event.message.id));
+                queryClient.setQueryData(chatKey, mutation);
+                break;
+              }
               default:
                 break;
             }