unreact to message

src/modules/api/chat/chat-api.ts

@@ -75,6 +75,12 @@ export interface PostReactToMessage {
   conversation_with_user: number;
 }
 
+export interface PostUnreactToMessage {
+  token: string;
+  message_id: number;
+  conversation_with_user: number;
+}
+
 export interface PostDeleteMessage {
   token: string;
   message_id: number;
@@ -122,5 +128,7 @@ export const chatApi = {
   setArchive: (data: PostSetSettings) => request.postForm<ResponseType>(API.SET_ARCHIVE, data),
   setBlock: (data: PostSetSettings) => request.postForm<ResponseType>(API.SET_BLOCK, data),
   setMute: (data: PostSetSettings) => request.postForm<ResponseType>(API.SET_MUTE, data),
-  deleteChat: (data: PostDeleteChat) => request.postForm<ResponseType>(API.DELETE_CHAT, data)
+  deleteChat: (data: PostDeleteChat) => request.postForm<ResponseType>(API.DELETE_CHAT, data),
+  unreactToMessage: (data: PostUnreactToMessage) =>
+    request.postForm<ResponseType>(API.UNREACT_TO_MESSAGE, data)
 };

src/modules/api/chat/chat-query-keys.tsx

@@ -16,5 +16,6 @@ export const chatQueryKeys = {
   setArchive: () => ['setArchive'] as const,
   setBlock: () => ['setBlock'] as const,
   setMute: () => ['setMute'] as const,
-  deleteChat: () => ['deleteChat'] as const
+  deleteChat: () => ['deleteChat'] as const,
+  unreactToMessage: () => ['unreactToMessage'] as const
 };

src/modules/api/chat/queries/index.ts

@@ -11,3 +11,4 @@ export * from './use-post-set-archive';
 export * from './use-post-set-mute';
 export * from './use-post-set-block';
 export * from './use-post-delete-conversation';
+export * from './use-post-unreact-to-message';

src/modules/api/chat/queries/use-post-unreact-to-message.tsx

@@ -0,0 +1,17 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { chatQueryKeys } from '../chat-query-keys';
+import { chatApi, type PostUnreactToMessage } from '../chat-api';
+
+import type { BaseAxiosError } from '../../../../types';
+import { ResponseType } from '@api/response-type';
+
+export const usePostUnreactToMessageMutation = () => {
+  return useMutation<ResponseType, BaseAxiosError, PostUnreactToMessage, ResponseType>({
+    mutationKey: chatQueryKeys.unreactToMessage(),
+    mutationFn: async (data) => {
+      const response = await chatApi.unreactToMessage(data);
+      return response.data;
+    }
+  });
+};

src/screens/InAppScreens/MessagesScreen/ChatScreen/index.tsx

@@ -49,7 +49,8 @@ import {
   usePostGetChatWithQuery,
   usePostMessagesReadMutation,
   usePostReactToMessageMutation,
-  usePostSendMessageMutation
+  usePostSendMessageMutation,
+  usePostUnreactToMessageMutation
 } from '@api/chat';
 import { CustomMessage, Message, Reaction } from '../types';
 import { API_HOST } from 'src/constants';
@@ -100,6 +101,7 @@ const ChatScreen = ({ route }: { route: any }) => {
   const { mutateAsync: markMessagesAsRead } = usePostMessagesReadMutation();
   const { mutateAsync: deleteMessage } = usePostDeleteMessageMutation();
   const { mutateAsync: reactToMessage } = usePostReactToMessageMutation();
+  const { mutateAsync: unreactToMessage } = usePostUnreactToMessageMutation();
 
   const [highlightedMessageId, setHighlightedMessageId] = useState<number | null>(null);
 
@@ -304,6 +306,33 @@ const ChatScreen = ({ route }: { route: any }) => {
     closeEmojiSelector();
   };
 
+  const handleUnreactToMessage = (messageId: number) => {
+    unreactToMessage(
+      {
+        token,
+        message_id: messageId,
+        conversation_with_user: id
+      },
+      {
+        onSuccess: () => {
+          setMessages((prevMessages) =>
+            prevMessages.map((msg) => {
+              if (msg._id === messageId) {
+                return {
+                  ...msg,
+                  reactions: Array.isArray(msg.reactions)
+                    ? msg.reactions.filter((r) => r.uid !== +currentUserId)
+                    : []
+                };
+              }
+              return msg;
+            })
+          );
+        }
+      }
+    );
+  };
+
   const renderTimeContainer = (time: TimeProps<CustomMessage>) => {
     const createdAt = new Date(time.currentMessage.createdAt);
 
@@ -351,16 +380,36 @@ const ChatScreen = ({ route }: { route: any }) => {
               (Array.isArray(time.currentMessage.reactions)
                 ? time.currentMessage.reactions
                 : []
-              ).reduce((acc: Record<string, number>, { reaction }: { reaction: string }) => {
-                acc[reaction] = (acc[reaction] || 0) + 1;
-                return acc;
-              }, {})
-            ).map(([emoji, count]) => (
-              <Text key={emoji} style={{}}>
-                {emoji}
-                {(count as number) > 1 ? ` ${count}` : ''}
-              </Text>
-            ))}
+              ).reduce(
+                (
+                  acc: Record<string, { count: number; uids: number[] }>,
+                  { reaction, uid }: { reaction: string; uid: number }
+                ) => {
+                  if (!acc[reaction]) {
+                    acc[reaction] = { count: 0, uids: [] };
+                  }
+                  acc[reaction].count += 1;
+                  acc[reaction].uids.push(uid);
+                  return acc;
+                },
+                {}
+              )
+            ).map(([emoji, { count, uids }]: any) => {
+              const isUserReacted = uids.includes(+currentUserId);
+
+              return (
+                <TouchableOpacity
+                  key={emoji}
+                  onPress={() => handleUnreactToMessage(time.currentMessage._id)}
+                  disabled={!isUserReacted}
+                >
+                  <Text style={{}}>
+                    {emoji}
+                    {(count as number) > 1 ? ` ${count}` : ''}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
           </View>
         )}
         <View

src/types/api.ts

@@ -137,7 +137,8 @@ export enum API_ENDPOINT {
   SET_ARCHIVE = 'set-archive',
   SET_BLOCK = 'set-block',
   SET_MUTE = 'set-mute',
-  DELETE_CHAT = 'delete-conversation'
+  DELETE_CHAT = 'delete-conversation',
+  UNREACT_TO_MESSAGE = 'unreact-to-message'
 }
 
 export enum API {
@@ -251,7 +252,8 @@ export enum API {
   SET_ARCHIVE = `${API_ROUTE.CHAT}/${API_ENDPOINT.SET_ARCHIVE}`,
   SET_BLOCK = `${API_ROUTE.CHAT}/${API_ENDPOINT.SET_BLOCK}`,
   SET_MUTE = `${API_ROUTE.CHAT}/${API_ENDPOINT.SET_MUTE}`,
-  DELETE_CHAT = `${API_ROUTE.CHAT}/${API_ENDPOINT.DELETE_CHAT}`
+  DELETE_CHAT = `${API_ROUTE.CHAT}/${API_ENDPOINT.DELETE_CHAT}`,
+  UNREACT_TO_MESSAGE = `${API_ROUTE.CHAT}/${API_ENDPOINT.UNREACT_TO_MESSAGE}`
 }
 
 export type BaseAxiosError = AxiosError;