chore: add message id to state as well

Author: isekovanic

package/src/components/Message/Message.tsx

@@ -351,7 +351,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       const layout = await measureInWindow(messageWrapperRef, insets);
       setRect(layout);
       setOverlayMessageH(layout);
-      openOverlay(messageOverlayId);
+      openOverlay({ id: messageOverlayId, messageId: message.id });
     } catch (e) {
       console.error(e);
     }

package/src/components/Message/hooks/__tests__/useShouldUseOverlayStyles.test.tsx

@@ -66,6 +66,7 @@ describe('useShouldUseOverlayStyles', () => {
         closing: false,
         closingPortalHostBlacklist: [],
         id: undefined,
+        messageId: undefined,
       });
     });
   });
@@ -79,6 +80,7 @@ describe('useShouldUseOverlayStyles', () => {
         closing: false,
         closingPortalHostBlacklist: [],
         id: undefined,
+        messageId: undefined,
       });
     });
   });

package/src/components/UIComponents/__tests__/PortalWhileClosingView.test.tsx

@@ -58,6 +58,7 @@ describe('PortalWhileClosingView', () => {
         closing: false,
         closingPortalHostBlacklist: [],
         id: undefined,
+        messageId: undefined,
       });
     });
   });
@@ -72,6 +73,7 @@ describe('PortalWhileClosingView', () => {
         closing: false,
         closingPortalHostBlacklist: [],
         id: undefined,
+        messageId: undefined,
       });
     });
 

package/src/contexts/overlayContext/__tests__/MessageOverlayHostLayer.test.tsx

@@ -111,6 +111,7 @@ describe('MessageOverlayHostLayer', () => {
         closing: false,
         closingPortalHostBlacklist: [],
         id: undefined,
+        messageId: undefined,
       });
     });
   });
@@ -124,6 +125,7 @@ describe('MessageOverlayHostLayer', () => {
         closing: false,
         closingPortalHostBlacklist: [],
         id: undefined,
+        messageId: undefined,
       });
     });
 

package/src/state-store/__tests__/message-overlay-store.test.tsx

@@ -65,6 +65,7 @@ describe('message overlay store portal hooks', () => {
         closing: false,
         closingPortalHostBlacklist: [],
         id: undefined,
+        messageId: undefined,
       });
     });
   });
@@ -81,6 +82,7 @@ describe('message overlay store portal hooks', () => {
         closing: false,
         closingPortalHostBlacklist: [],
         id: undefined,
+        messageId: undefined,
       });
     });
 
@@ -147,6 +149,7 @@ describe('message overlay store portal hooks', () => {
         closing: true,
         closingPortalHostBlacklist: [],
         id: undefined,
+        messageId: undefined,
       });
     });
 

package/src/state-store/message-overlay-store.ts

@@ -10,9 +10,15 @@ import { useStateStore } from '../hooks';
 type OverlayState = {
   closingPortalHostBlacklist: string[];
   id: string | undefined;
+  messageId: string | undefined;
   closing: boolean;
 };
 
+type OpenOverlayParams = {
+  id: string;
+  messageId?: string;
+};
+
 export type Rect = { x: number; y: number; w: number; h: number } | undefined;
 export type ClosingPortalLayoutEntry = {
   id: string;
@@ -26,6 +32,7 @@ const DefaultState = {
   closingPortalHostBlacklist: [],
   closing: false,
   id: undefined,
+  messageId: undefined,
 };
 const DefaultClosingPortalLayoutsState: ClosingPortalLayoutsState = {
   layouts: {},
@@ -71,12 +78,14 @@ export const bumpOverlayLayoutRevision = (closeCorrectionDeltaY = 0) => {
   sharedValueController?.incrementCloseCorrectionY(closeCorrectionDeltaY);
 };
 
-export const openOverlay = (id: string) => {
+export const openOverlay = (params: OpenOverlayParams | string) => {
+  const overlayPayload = typeof params === 'string' ? { id: params, messageId: undefined } : params;
+
   sharedValueController?.resetCloseCorrectionY();
   overlayStore.partialNext({
     closing: false,
     closingPortalHostBlacklist: getCurrentClosingPortalHostBlacklist(),
-    id,
+    ...overlayPayload,
   });
 };
 
@@ -216,6 +225,7 @@ overlayStore.subscribeWithSelector(actionQueueSelector, async ({ active }) => {
 const selector = (nextState: OverlayState) => ({
   closing: nextState.closing,
   id: nextState.id,
+  messageId: nextState.messageId,
 });
 
 export const useOverlayController = () => {
@@ -323,11 +333,11 @@ export const useClosingPortalLayouts = () => {
 
 const noOpObject = { active: false, closing: false };
 
-export const useIsOverlayActive = (messageId: string) => {
+export const useIsOverlayActive = (id: string) => {
   const messageOverlaySelector = useCallback(
     (nextState: OverlayState) =>
-      nextState.id === messageId ? { active: true, closing: nextState.closing } : noOpObject,
-    [messageId],
+      nextState.id === id ? { active: true, closing: nextState.closing } : noOpObject,
+    [id],
   );
 
   return useStateStore(overlayStore, messageOverlaySelector);