refactor: clean hooks up properly

Author: isekovanic

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

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Alert } from 'react-native';
 
-import { UserResponse } from 'stream-chat';
+import { LocalMessage, UserResponse } from 'stream-chat';
 
 import { useUserMuteActive } from './useUserMuteActive';
 
@@ -12,10 +12,20 @@ import type { MessageContextValue } from '../../../contexts/messageContext/Messa
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { usePortalClosingKeyboardSafeCallback, useStableCallback } from '../../../hooks';
+import {
+  useAfterKeyboardOpenCallback,
+  usePortalSettledCallback,
+  useStableCallback,
+} from '../../../hooks';
 import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import { NativeHandlers } from '../../../native';
 
+const useWithPortalKeyboardSafety = <T extends unknown[]>(callback: (...args: T) => void) => {
+  const callbackAfterKeyboardOpen = useAfterKeyboardOpenCallback(callback);
+
+  return usePortalSettledCallback(callbackAfterKeyboardOpen);
+};
+
 export const useMessageActionHandlers = ({
   channel,
   client,
@@ -114,7 +124,10 @@ export const useMessageActionHandlers = ({
     }
   });
 
-  const handleEditMessage = usePortalClosingKeyboardSafeCallback(() => setEditingState(message));
+  const setEditingMessage = useStableCallback((messageToEdit: LocalMessage = message) => {
+    setEditingState(messageToEdit);
+  });
+  const handleEditMessage = useWithPortalKeyboardSafety(setEditingMessage);
 
   const handleFlagMessage = useStableCallback(() => {
     if (!message.id) {

package/src/hooks/index.ts

@@ -7,9 +7,10 @@ export * from './useStableCallback';
 export * from './useLoadingImage';
 export * from './useMessageReminder';
 export * from './useQueryReminders';
+export * from './useAfterKeyboardOpenCallback';
 export * from './useClientNotifications';
 export * from './useInAppNotificationsState';
-export * from './usePortalClosingKeyboardSafeCallback';
+export * from './usePortalSettledCallback';
 export * from './useRAFCoalescedValue';
 export * from './useAudioPlayerControl';
 export * from './useAttachmentPickerState';

package/src/hooks/useAfterKeyboardOpenCallback.ts

@@ -0,0 +1,61 @@
+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';
+
+/**
+ * A utility hook that returns a stable callback which focuses the message input
+ * and invokes the callback once the keyboard is open.
+ *
+ * @param callback - callback we want to run once the keyboard is ready
+ * @returns A stable callback that will wait for the keyboard to be open before executing.
+ */
+export const useAfterKeyboardOpenCallback = <T extends unknown[]>(
+  callback: (...args: T) => void,
+) => {
+  const isKeyboardVisible = useKeyboardVisibility();
+  const { inputBoxRef } = useMessageInputContext();
+  const keyboardSubscriptionRef = useRef<EventSubscription | undefined>(undefined);
+  const stableCallback = useStableCallback(callback);
+
+  /** Clears the pending keyboard listener, if any. */
+  const clearKeyboardSubscription = useStableCallback(() => {
+    keyboardSubscriptionRef.current?.remove();
+    keyboardSubscriptionRef.current = undefined;
+  });
+
+  useEffect(() => clearKeyboardSubscription, [clearKeyboardSubscription]);
+
+  return useStableCallback((...args: T) => {
+    clearKeyboardSubscription();
+
+    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();
+  });
+};

package/src/hooks/usePortalClosingKeyboardSafeCallback.ts

@@ -0,0 +1,77 @@
+import { useEffect, useRef } from 'react';
+import { Platform } from 'react-native';
+
+import { useStableCallback } from './useStableCallback';
+
+/**
+ * Number of frames we wait before invoking input focus sensitive work after the
+ * overlay closes.
+ */
+const SETTLE_FRAMES = Platform.OS === 'android' ? 2 : 0;
+
+/**
+ * Runs a callback after a fixed number of animation frames.
+ *
+ * We use RAFs here because the settling work we care about is tied to the next
+ * rendered frames after the overlay close transition.
+ *
+ * @param callback - callback to run once the frame budget has elapsed
+ * @param frames - number of frames to wait
+ * @param rafIds - accumulator used for later cancellation/cleanup
+ */
+const scheduleAfterFrames = (callback: () => void, frames: number, rafIds: number[]) => {
+  if (frames <= 0) {
+    callback();
+    return;
+  }
+
+  const rafId = requestAnimationFrame(() => scheduleAfterFrames(callback, frames - 1, rafIds));
+  rafIds.push(rafId);
+};
+
+/**
+ * Returns a stable callback that is safe to run after a `PortalWhileClosingView`
+ * has settled back into its original tree.
+ *
+ * Some followup actions are sensitive to that handoff window. If they run
+ * while a view is still being returned from a portal host to its in place host,
+ * they can target a node that is about to be reattached. On Android, that is
+ * especially noticeable with focus sensitive work, where the target can lose
+ * focus again mid keyboard animation.
+ *
+ * Two frames are intentional here:
+ * - frame 1 lets the portal retarget and React commit the component tree
+ * - frame 2 lets the native view hierarchy settle in its final host
+ *
+ * iOS does not currently need this settle window for this flow.
+ *
+ * A good example is the message composer edit action: after closing the message
+ * overlay, we wait for the portal handoff to settle before focusing the input
+ * and opening the keyboard. Doing this prematurely will result in the keyboard
+ * being immediately closed.
+ *
+ * Another good example would be having a button wrapped in a `PortalWhileClosingView`,
+ * that possibly renders (or morphs into) something when pressed. Handling `onPress`
+ * prematurely here may lead to the morphed button rendering into a completely different
+ * part of the UI hierarchy, causing unknown behaviour. This hook prevents that from
+ * happening.
+ *
+ * @param callback - callback we want to invoke once the portal handoff has settled
+ * @returns A stable callback gated behind the portal settle window.
+ */
+export const usePortalSettledCallback = <T extends unknown[]>(callback: (...args: T) => void) => {
+  const rafIdsRef = useRef<number[]>([]);
+  const stableCallback = useStableCallback(callback);
+
+  const clearScheduledFrames = useStableCallback(() => {
+    rafIdsRef.current.forEach((rafId) => cancelAnimationFrame(rafId));
+    rafIdsRef.current = [];
+  });
+
+  useEffect(() => clearScheduledFrames, [clearScheduledFrames]);
+
+  return useStableCallback((...args: T) => {
+    clearScheduledFrames();
+    scheduleAfterFrames(() => stableCallback(...args), SETTLE_FRAMES, rafIdsRef.current);
+  });
+};