[lib] Introduce useNativeUpdateThreadImageAvatar to AvatarHooks

Summary:
The `updateThreadImageAvatar` function within `EditThreadAvatarProvider` previously contained a call to the `displayFailureAlert(...)` function, which was passed in via props. However, the `displayFailureAlert` function is only relevant on `native` as we surface errors differently on `web`.

As part of making `EditThreadAvatarProvider` platform-agnostic, we introduce the `useNativeUpdateThreadImageAvatar()` hook. The function it "creates" encapsulates the call to `updateThreadImageAvatar` in a `try/catch` block that handles errors in a `native`-specific way. As a result, `updateImageThreadAvatar` can throw a plain old exception that will be caught by the platform-specific "wrapper" functions.

In subsequent diffs we'll do the same thing for `setThreadAvatar` so we can completely removed the `displayFailureAlert` prop from `EditThreadAvatarProvider`. After that we'll work on removing the `useUploadSelectedMedia` prop so the provider is fully "platform-agnostic." At that point we'll be able to consolidate things into a single `EditThreadAvatarProvider` component.

NOTE: This is the "thread avatar version" of D8339.

Test Plan:
1. Modify thread update endpoint to throw `ServerError`
2. Try to set thread avatar via "Camera" flow
3. Ensure that alert still appears as expected (via displayFailureAlert)

Reviewers: ashoat, ginsu

Reviewed By: ashoat

Subscribers: tomek

Differential Revision: https://phab.comm.dev/D8740

lib/components/base-edit-thread-avatar-provider.react.js

@@ -104,26 +104,16 @@ function BaseEditThreadAvatarProvider(props: Props): React.Node {
       };
 
       const action = changeThreadSettingsActionTypes.started;
-      dispatchActionPromise(
-        changeThreadSettingsActionTypes,
-        (async () => {
-          updateThreadAvatarMediaUploadInProgress(false);
-          try {
-            return await changeThreadSettingsCall(updateThreadRequest);
-          } catch (e) {
-            displayFailureAlert();
-            throw e;
-          }
-        })(),
-        {
-          customKeyName: `${action}:${threadID}:avatar`,
-        },
-      );
+      updateThreadAvatarMediaUploadInProgress(false);
+      const promise = changeThreadSettingsCall(updateThreadRequest);
+      dispatchActionPromise(changeThreadSettingsActionTypes, promise, {
+        customKeyName: `${action}:${threadID}:avatar`,
+      });
+      await promise;
     },
     [
       changeThreadSettingsCall,
       dispatchActionPromise,
-      displayFailureAlert,
       updateThreadAvatarMediaUploadInProgress,
       uploadSelectedMedia,
     ],

native/avatars/avatar-hooks.js

@@ -308,6 +308,31 @@ function useSelectFromGalleryAndUpdateUserAvatar(): () => Promise<void> {
   return selectFromGalleryAndUpdateUserAvatar;
 }
 
+function useNativeUpdateThreadImageAvatar(): (
+  selection: NativeMediaSelection,
+  threadID: string,
+) => Promise<void> {
+  const editThreadAvatarContext = React.useContext(EditThreadAvatarContext);
+  invariant(editThreadAvatarContext, 'editThreadAvatarContext must be defined');
+  const { updateImageThreadAvatar } = editThreadAvatarContext;
+
+  const nativeUpdateThreadImageAvatar = React.useCallback(
+    async (
+      selection: NativeMediaSelection,
+      threadID: string,
+    ): Promise<void> => {
+      try {
+        await updateImageThreadAvatar(selection, threadID);
+      } catch {
+        displayAvatarUpdateFailureAlert();
+      }
+    },
+    [updateImageThreadAvatar],
+  );
+
+  return nativeUpdateThreadImageAvatar;
+}
+
 function useSelectFromGalleryAndUpdateThreadAvatar(): (
   threadID: string,
 ) => Promise<void> {
@@ -463,4 +488,5 @@ export {
   useNativeSetUserAvatar,
   useNativeUpdateUserImageAvatar,
   useSelectFromGalleryAndUpdateThreadAvatar,
+  useNativeUpdateThreadImageAvatar,
 };

native/media/thread-avatar-camera-modal.react.js

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js';
 import type { PhotoCapture } from 'lib/types/media-types.js';
 
+import { useNativeUpdateThreadImageAvatar } from '../avatars/avatar-hooks.js';
 import CameraModal from '../media/camera-modal.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
@@ -25,13 +26,12 @@ function ThreadAvatarCameraModal(props: Props): React.Node {
 
   const editThreadAvatarContext = React.useContext(EditThreadAvatarContext);
   invariant(editThreadAvatarContext, 'editThreadAvatarContext should be set');
-  const { updateImageThreadAvatar } = editThreadAvatarContext;
+
+  const nativeUpdateThreadImageAvatar = useNativeUpdateThreadImageAvatar();
 
   const sendPhoto = React.useCallback(
-    (capture: PhotoCapture) => {
-      updateImageThreadAvatar(capture, threadID);
-    },
-    [threadID, updateImageThreadAvatar],
+    (capture: PhotoCapture) => nativeUpdateThreadImageAvatar(capture, threadID),
+    [threadID, nativeUpdateThreadImageAvatar],
   );
 
   return <CameraModal handlePhotoCapture={sendPhoto} navigation={navigation} />;