refactor: move PWC concern in a separate hook

Author: isekovanic

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { Alert, EventSubscription, Keyboard, Platform } from 'react-native';
+import { useMemo } from 'react';
+import { Alert } from 'react-native';
 
 import { UserResponse } from 'stream-chat';
 
@@ -9,15 +9,12 @@ import type { ChannelContextValue } from '../../../contexts/channelContext/Chann
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import { MessageComposerAPIContextValue } from '../../../contexts/messageComposerContext/MessageComposerAPIContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
-import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { useStableCallback } from '../../../hooks';
-import { useKeyboardVisibility } from '../../../hooks/useKeyboardVisibility';
+import { usePortalClosingKeyboardSafeCallback, useStableCallback } from '../../../hooks';
 import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import { NativeHandlers } from '../../../native';
-import { KeyboardControllerPackage } from '../../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 
 export const useMessageActionHandlers = ({
   channel,
@@ -40,19 +37,9 @@ export const useMessageActionHandlers = ({
   const { t } = useTranslationContext();
   const handleResendMessage = useStableCallback(() => retrySendMessage(message));
   const translatedMessage = useTranslatedMessage(message);
-  const { inputBoxRef } = useMessageInputContext();
-  const isKeyboardVisible = useKeyboardVisibility();
-  const keyboardDidShowSubscriptionRef = useRef<EventSubscription | undefined>(undefined);
 
   const isMuted = useUserMuteActive(message.user);
 
-  const clearKeyboardDidShowSubscription = useStableCallback(() => {
-    keyboardDidShowSubscriptionRef.current?.remove();
-    keyboardDidShowSubscriptionRef.current = undefined;
-  });
-
-  useEffect(() => clearKeyboardDidShowSubscription, [clearKeyboardDidShowSubscription]);
-
   const handleQuotedReplyMessage = useStableCallback(() => {
     setQuotedMessage(message);
   });
@@ -127,40 +114,7 @@ export const useMessageActionHandlers = ({
     }
   });
 
-  const handleEditMessage = useStableCallback(() => {
-    requestAnimationFrame(() =>
-      requestAnimationFrame(() => {
-        clearKeyboardDidShowSubscription();
-
-        const openEditingState = () => {
-          clearKeyboardDidShowSubscription();
-          setEditingState(message);
-        };
-
-        if (!inputBoxRef.current) {
-          openEditingState();
-          return;
-        }
-
-        if (isKeyboardVisible) {
-          inputBoxRef.current?.focus();
-          openEditingState();
-          return;
-        }
-
-        const event = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-
-        keyboardDidShowSubscriptionRef.current = KeyboardControllerPackage?.KeyboardEvents
-          ? KeyboardControllerPackage.KeyboardEvents.addListener(
-              'keyboardDidShow',
-              openEditingState,
-            )
-          : Keyboard.addListener(event, openEditingState);
-
-        inputBoxRef.current?.focus();
-      }),
-    );
-  });
+  const handleEditMessage = usePortalClosingKeyboardSafeCallback(() => setEditingState(message));
 
   const handleFlagMessage = useStableCallback(() => {
     if (!message.id) {

package/src/hooks/index.ts

@@ -9,6 +9,7 @@ export * from './useMessageReminder';
 export * from './useQueryReminders';
 export * from './useClientNotifications';
 export * from './useInAppNotificationsState';
+export * from './usePortalClosingKeyboardSafeCallback';
 export * from './useRAFCoalescedValue';
 export * from './useAudioPlayerControl';
 export * from './useAttachmentPickerState';

package/src/hooks/usePortalClosingKeyboardSafeCallback.ts

@@ -0,0 +1,83 @@
+import { useEffect, useRef } from 'react';
+import { EventSubscription, Keyboard, Platform } from 'react-native';
+
+import { useKeyboardVisibility } from './useKeyboardVisibility';
+
+import { useStableCallback } from './useStableCallback';
+
+import { KeyboardControllerPackage } from '../components/KeyboardCompatibleView/KeyboardControllerAvoidingView';
+import { useMessageInputContext } from '../contexts/messageInputContext/MessageInputContext';
+
+const SETTLE_FRAMES = Platform.OS === 'android' ? 2 : 0;
+
+const scheduleAfterFrames = (callback: () => void, frames: number, rafIds: number[]) => {
+  if (frames <= 0) {
+    callback();
+    return;
+  }
+
+  const rafId = requestAnimationFrame(() => scheduleAfterFrames(callback, frames - 1, rafIds));
+  rafIds.push(rafId);
+};
+
+export const usePortalClosingKeyboardSafeCallback = <T extends unknown[]>(
+  callback: (...args: T) => void,
+) => {
+  const isKeyboardVisible = useKeyboardVisibility();
+  const { inputBoxRef } = useMessageInputContext();
+  const keyboardSubscriptionRef = useRef<EventSubscription | undefined>(undefined);
+  const rafIdsRef = useRef<number[]>([]);
+  const stableCallback = useStableCallback(callback);
+
+  const clearKeyboardSubscription = useStableCallback(() => {
+    keyboardSubscriptionRef.current?.remove();
+    keyboardSubscriptionRef.current = undefined;
+  });
+
+  const clearScheduledFrames = useStableCallback(() => {
+    rafIdsRef.current.forEach((rafId) => cancelAnimationFrame(rafId));
+    rafIdsRef.current = [];
+  });
+
+  useEffect(() => {
+    return () => {
+      clearKeyboardSubscription();
+      clearScheduledFrames();
+    };
+  }, [clearKeyboardSubscription, clearScheduledFrames]);
+
+  return useStableCallback((...args: T) => {
+    clearKeyboardSubscription();
+    clearScheduledFrames();
+
+    scheduleAfterFrames(
+      () => {
+        const runCallback = () => {
+          clearKeyboardSubscription();
+          stableCallback(...args);
+        };
+
+        if (!inputBoxRef.current) {
+          runCallback();
+          return;
+        }
+
+        if (isKeyboardVisible) {
+          inputBoxRef.current.focus();
+          runCallback();
+          return;
+        }
+
+        const keyboardEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+
+        keyboardSubscriptionRef.current = KeyboardControllerPackage?.KeyboardEvents
+          ? KeyboardControllerPackage.KeyboardEvents.addListener(keyboardEvent, runCallback)
+          : Keyboard.addListener(keyboardEvent, runCallback);
+
+        inputBoxRef.current.focus();
+      },
+      SETTLE_FRAMES,
+      rafIdsRef.current,
+    );
+  });
+};