feat(reactions): add tap-to-remove for own reactions in drawer (#1595)

Co-authored-by: Thierry <[email protected]>
Co-authored-by: Thierry Skoda <[email protected]>

Author: lourou

features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.service.ts

@@ -1,28 +1,20 @@
-import { RolledUpReactions } from "../conversation-message-reactions.types";
+import { MessageId } from "@xmtp/react-native-sdk";
 import {
   resetMessageReactionsStore,
   useMessageReactionsStore,
-  IMessageReactionsStore,
 } from "./conversation-message-reaction-drawer.store";
+import { createBottomSheetModalRef } from "@/design-system/BottomSheet/BottomSheet.utils";
 
-export function openMessageReactionsDrawer(
-  rolledUpReactions: RolledUpReactions
-) {
-  const store = useMessageReactionsStore.getState();
-  store.setRolledUpReactions(rolledUpReactions);
-}
+export const conversationMessageDrawerBottomSheetRef =
+  createBottomSheetModalRef();
 
-export function closeMessageReactionsDrawer(arg?: { resetStore?: boolean }) {
-  const { resetStore = true } = arg ?? {};
-  if (resetStore) {
-    resetMessageReactionsStore();
-  }
+export function openMessageReactionsDrawer(args: { messageId: MessageId }) {
+  const { messageId } = args;
+  const store = useMessageReactionsStore.getState();
+  store.actions.setMessageId(messageId);
 }
 
-export function resetMessageReactionsDrawer() {
+export function closeMessageReactionsDrawer() {
+  conversationMessageDrawerBottomSheetRef.current?.close();
   resetMessageReactionsStore();
 }
-
-export function useMessageReactionsRolledUpReactions() {
-  return useMessageReactionsStore((state) => state.rolledUpReactions);
-}

features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.store.ts

@@ -1,30 +1,24 @@
+import { MessageId } from "@xmtp/react-native-sdk";
 import { create } from "zustand";
-import { RolledUpReactions } from "../conversation-message-reactions.types";
 
 export type IMessageReactionsStore = {
-  rolledUpReactions: RolledUpReactions;
-  setRolledUpReactions: (reactions: RolledUpReactions) => void;
+  messageId: MessageId | null;
+  actions: {
+    setMessageId: (messageId: MessageId | null) => void;
+  };
 };
 
 export const useMessageReactionsStore = create<IMessageReactionsStore>(
   (set) => ({
-    rolledUpReactions: {
-      preview: [],
-      detailed: [],
-      totalCount: 0,
-      userReacted: false,
+    messageId: null,
+    actions: {
+      setMessageId: (messageId) => set({ messageId }),
     },
-    setRolledUpReactions: (reactions) => set({ rolledUpReactions: reactions }),
   })
 );
 
 export function resetMessageReactionsStore() {
   useMessageReactionsStore.setState({
-    rolledUpReactions: {
-      preview: [],
-      detailed: [],
-      totalCount: 0,
-      userReacted: false,
-    },
+    messageId: null,
   });
 }

features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.store.tsx

@@ -1,12 +1,14 @@
 import { create } from "zustand";
 
 import { RolledUpReactions } from "../conversation-message-reactions.types";
+import { MessageId } from "@xmtp/react-native-sdk";
 
 const initialMessageReactionsState: RolledUpReactions = {
   totalCount: 0,
   userReacted: false,
   preview: [],
   detailed: [],
+  messageId: "" as MessageId,
 };
 
 export type IMessageReactionsStore = {