From 1a59bd9e0e6e8f068937ba427f97e1683f440976 Mon Sep 17 00:00:00 2001
From: KyeongSoo Kim <soo@novelastudio.com>
Date: Wed, 22 Nov 2023 22:05:58 +0900
Subject: [PATCH] [MM-42586] Reaction toggle behavior (#7674)

---
 app/actions/remote/reactions.ts               | 29 +++++++++++++++++++
 .../post/body/reactions/reactions.tsx         |  8 ++---
 .../reaction_bar/reaction_bar.tsx             |  4 +--
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/app/actions/remote/reactions.ts b/app/actions/remote/reactions.ts
index d710fc868..90b601350 100644
--- a/app/actions/remote/reactions.ts
+++ b/app/actions/remote/reactions.ts
@@ -16,6 +16,35 @@ import {forceLogoutIfNecessary} from './session';
 import type {Model} from '@nozbe/watermelondb';
 import type PostModel from '@typings/database/models/servers/post';
 
+export async function getIsReactionAlreadyAddedToPost(serverUrl: string, postId: string, emojiName: string) {
+    try {
+        const {database} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
+
+        const currentUserId = await getCurrentUserId(database);
+        const emojiAlias = getEmojiFirstAlias(emojiName);
+        return await queryReaction(database, emojiAlias, postId, currentUserId).fetchCount() > 0;
+    } catch (error) {
+        logDebug('error on getIsReactionAlreadyAddedToPost', getFullErrorMessage(error));
+        forceLogoutIfNecessary(serverUrl, error);
+        return {error};
+    }
+}
+
+export async function toggleReaction(serverUrl: string, postId: string, emojiName: string) {
+    try {
+        const isReactionAlreadyAddedToPost = await getIsReactionAlreadyAddedToPost(serverUrl, postId, emojiName);
+
+        if (isReactionAlreadyAddedToPost) {
+            return removeReaction(serverUrl, postId, emojiName);
+        }
+        return addReaction(serverUrl, postId, emojiName);
+    } catch (error) {
+        logDebug('error on toggleReaction', getFullErrorMessage(error));
+        forceLogoutIfNecessary(serverUrl, error);
+        return {error};
+    }
+}
+
 export async function addReaction(serverUrl: string, postId: string, emojiName: string) {
     try {
         const client = NetworkManager.getClient(serverUrl);
diff --git a/app/components/post_list/post/body/reactions/reactions.tsx b/app/components/post_list/post/body/reactions/reactions.tsx
index 9bda75844..2ca18c922 100644
--- a/app/components/post_list/post/body/reactions/reactions.tsx
+++ b/app/components/post_list/post/body/reactions/reactions.tsx
@@ -5,7 +5,7 @@ import React, {useCallback, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {Keyboard, TouchableOpacity} from 'react-native';
 
-import {addReaction, removeReaction} from '@actions/remote/reactions';
+import {addReaction, removeReaction, toggleReaction} from '@actions/remote/reactions';
 import CompassIcon from '@components/compass_icon';
 import {Screens} from '@constants';
 import {MAX_ALLOWED_REACTIONS} from '@constants/emoji';
@@ -100,8 +100,8 @@ const Reactions = ({currentUserId, canAddReaction, canRemoveReaction, disabled,
         return {reactionsByName, highlightedReactions};
     }, [sortedReactions, reactions]);
 
-    const handleAddReactionToPost = (emoji: string) => {
-        addReaction(serverUrl, postId, emoji);
+    const handleToggleReactionToPost = (emoji: string) => {
+        toggleReaction(serverUrl, postId, emoji);
     };
 
     const handleAddReaction = useCallback(preventDoubleTap(() => {
@@ -110,7 +110,7 @@ const Reactions = ({currentUserId, canAddReaction, canRemoveReaction, disabled,
             screen: Screens.EMOJI_PICKER,
             theme,
             title: formatMessage({id: 'mobile.post_info.add_reaction', defaultMessage: 'Add Reaction'}),
-            props: {onEmojiPress: handleAddReactionToPost},
+            props: {onEmojiPress: handleToggleReactionToPost},
         });
     }), [formatMessage, theme]);
 
diff --git a/app/screens/post_options/reaction_bar/reaction_bar.tsx b/app/screens/post_options/reaction_bar/reaction_bar.tsx
index 93a25af9a..14874b707 100644
--- a/app/screens/post_options/reaction_bar/reaction_bar.tsx
+++ b/app/screens/post_options/reaction_bar/reaction_bar.tsx
@@ -5,7 +5,7 @@ import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {useWindowDimensions, View} from 'react-native';
 
-import {addReaction} from '@actions/remote/reactions';
+import {toggleReaction} from '@actions/remote/reactions';
 import {Screens} from '@constants';
 import {
     LARGE_CONTAINER_SIZE,
@@ -57,7 +57,7 @@ const ReactionBar = ({bottomSheetId, recentEmojis = [], postId}: QuickReactionPr
 
     const handleEmojiPress = useCallback(async (emoji: string) => {
         await dismissBottomSheet(bottomSheetId);
-        addReaction(serverUrl, postId, emoji);
+        toggleReaction(serverUrl, postId, emoji);
     }, [bottomSheetId, postId, serverUrl]);
 
     const openEmojiPicker = useCallback(async () => {