Zustand logic update

components/Chat/Message/MessageReactions/MessageReactionsDrawer/MessageReactions.store.tsx

@@ -2,25 +2,30 @@ import { create } from "zustand";
 
 import { RolledUpReactions } from "../MessageReactions.types";
 
+const initialMessageReactionsState: RolledUpReactions = {
+  emojis: [],
+  totalReactions: 0,
+  userReacted: false,
+  details: {},
+};
+
 export interface IMessageReactionsStore {
   rolledUpReactions: RolledUpReactions;
-}
+  setRolledUpReactions: (reactions: RolledUpReactions) => void;
 
-export const initialMessageReactionsState: IMessageReactionsStore = {
-  rolledUpReactions: {
-    emojis: [],
-    totalReactions: 0,
-    userReacted: false,
-    details: {},
-  },
-};
+  // TODO: update state when new reactions come up and drawer is open
+  // updateReactions: (updates: Partial<RolledUpReactions>) => void;
+}
 
 export const useMessageReactionsStore = create<IMessageReactionsStore>(
-  (set, get) => ({
-    ...initialMessageReactionsState,
+  (set) => ({
+    rolledUpReactions: initialMessageReactionsState,
+    setRolledUpReactions: (reactions) => set({ rolledUpReactions: reactions }),
   })
 );
 
 export const resetMessageReactionsStore = () => {
-  useMessageReactionsStore.setState(initialMessageReactionsState);
+  useMessageReactionsStore
+    .getState()
+    .setRolledUpReactions(initialMessageReactionsState);
 };

components/Chat/Message/MessageReactions/MessageReactionsDrawer/MessageReactionsDrawer.service.ts

@@ -2,7 +2,7 @@ import { createBottomSheetModalRef } from "@design-system/BottomSheet/BottomShee
 
 import { RolledUpReactions } from "../MessageReactions.types";
 import {
-  initialMessageReactionsState,
+  resetMessageReactionsStore,
   useMessageReactionsStore,
 } from "./MessageReactions.store";
 
@@ -11,8 +11,16 @@ export const bottomSheetModalRef = createBottomSheetModalRef();
 export function openMessageReactionsDrawer(
   rolledUpReactions: RolledUpReactions
 ) {
-  bottomSheetModalRef.current?.present();
-  useMessageReactionsStore.setState({ rolledUpReactions });
+  try {
+    if (!bottomSheetModalRef.current) {
+      throw new Error("Modal reference not initialized");
+    }
+    useMessageReactionsStore.getState().setRolledUpReactions(rolledUpReactions);
+    bottomSheetModalRef.current.present();
+  } catch (error) {
+    console.error("Failed to open message reactions drawer:", error);
+    resetMessageReactionsDrawer();
+  }
 }
 
 export function closeMessageReactionsDrawer(arg?: { resetStore?: boolean }) {
@@ -24,7 +32,7 @@ export function closeMessageReactionsDrawer(arg?: { resetStore?: boolean }) {
 }
 
 export function resetMessageReactionsDrawer() {
-  useMessageReactionsStore.setState(initialMessageReactionsState);
+  resetMessageReactionsStore();
 }
 
 export function useMessageReactionsRolledUpReactions() {