[lib] Move selectFromGalleryAndUpdateThreadAvatar from provider to …

…`avatar-hooks`

Summary:
This diff involved moving `selectFromGalleryAndUpdateThreadAvatar` from `EditThreadAvatarProvider` to `avatar-hooks.react.js`.

1. This allows us to better decouple the avatar providers and hooks. The providers are an entity(user/thread)-specific, but platform-agnostic interface b/w client and `keyserver`, whereas avatar hooks are platform-specific implementations. The coupling between providers and hooks made things difficult to work w/ when dealing w/ implementing image avatars on `web`.
2. Previously we had hooks which were "functions" of provider state which itself was a "function" of hooks. This diff starts to enforce the idea that hooks are "downstream" of providers.. which makes things easier to reason about.
3. `selectFromGallery` functionality is specific to `native` where we launch the image gallery programmatically and process the media selection. On `web`, we "virtually" click on the `<input>` to launch file selection, and then handle selected media from `onChange` callback... so things aren't as "sequential."

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

Test Plan: Still able to select and set image thread avatars on `native`.

Reviewers: ashoat, ginsu

Reviewed By: ashoat

Subscribers: tomek

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

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

@@ -12,10 +12,7 @@ import type {
   ImageAvatarDBContent,
 } from '../types/avatar-types.js';
 import type { LoadingStatus } from '../types/loading-types.js';
-import type {
-  MediaLibrarySelection,
-  NativeMediaSelection,
-} from '../types/media-types.js';
+import type { NativeMediaSelection } from '../types/media-types.js';
 import type { UpdateThreadRequest } from '../types/thread-types.js';
 import {
   useDispatchActionPromise,
@@ -25,7 +22,6 @@ import { useSelector } from '../utils/redux-utils.js';
 
 export type EditThreadAvatarContextType = {
   +threadAvatarSaveInProgress: boolean,
-  +selectFromGalleryAndUpdateThreadAvatar: (threadID: string) => Promise<void>,
   +updateImageThreadAvatar: (
     selection: NativeMediaSelection,
     threadID: string,
@@ -41,7 +37,6 @@ const EditThreadAvatarContext: React.Context<?EditThreadAvatarContextType> =
 
 type Props = {
   +displayFailureAlert: () => mixed,
-  +selectFromGallery: () => Promise<?MediaLibrarySelection>,
   +useUploadSelectedMedia: (
     setProcessingOrUploadInProgress?: (inProgress: boolean) => mixed,
   ) => (selection: NativeMediaSelection) => Promise<?ImageAvatarDBContent>,
@@ -51,7 +46,6 @@ type Props = {
 function BaseEditThreadAvatarProvider(props: Props): React.Node {
   const {
     displayFailureAlert,
-    selectFromGallery,
     useUploadSelectedMedia,
     activeThreadID,
     children,
@@ -135,17 +129,6 @@ function BaseEditThreadAvatarProvider(props: Props): React.Node {
     ],
   );
 
-  const selectFromGalleryAndUpdateThreadAvatar = React.useCallback(
-    async (threadID: string) => {
-      const selection: ?MediaLibrarySelection = await selectFromGallery();
-      if (!selection) {
-        return;
-      }
-      await updateImageThreadAvatar(selection, threadID);
-    },
-    [selectFromGallery, updateImageThreadAvatar],
-  );
-
   const setThreadAvatar = React.useCallback(
     async (threadID: string, avatarRequest: UpdateUserAvatarRequest) => {
       const updateThreadRequest: UpdateThreadRequest = {
@@ -174,16 +157,10 @@ function BaseEditThreadAvatarProvider(props: Props): React.Node {
   const context = React.useMemo(
     () => ({
       threadAvatarSaveInProgress,
-      selectFromGalleryAndUpdateThreadAvatar,
       updateImageThreadAvatar,
       setThreadAvatar,
     }),
-    [
-      threadAvatarSaveInProgress,
-      selectFromGalleryAndUpdateThreadAvatar,
-      updateImageThreadAvatar,
-      setThreadAvatar,
-    ],
+    [threadAvatarSaveInProgress, updateImageThreadAvatar, setThreadAvatar],
   );
 
   return (

native/avatars/avatar-hooks.js

@@ -9,6 +9,7 @@ import filesystem from 'react-native-fs';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { uploadMultimedia } from 'lib/actions/upload-actions.js';
+import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js';
 import { EditUserAvatarContext } from 'lib/components/edit-user-avatar-provider.react.js';
 import {
   extensionFromFilename,
@@ -307,6 +308,27 @@ function useSelectFromGalleryAndUpdateUserAvatar(): () => Promise<void> {
   return selectFromGalleryAndUpdateUserAvatar;
 }
 
+function useSelectFromGalleryAndUpdateThreadAvatar(): (
+  threadID: string,
+) => Promise<void> {
+  const editThreadAvatarContext = React.useContext(EditThreadAvatarContext);
+  invariant(editThreadAvatarContext, 'editThreadAvatarContext must be defined');
+  const { updateImageThreadAvatar } = editThreadAvatarContext;
+
+  const selectFromGalleryAndUpdateThreadAvatar = React.useCallback(
+    async (threadID: string): Promise<void> => {
+      const selection: ?MediaLibrarySelection = await selectFromGallery();
+      if (!selection) {
+        return;
+      }
+      await updateImageThreadAvatar(selection, threadID);
+    },
+    [updateImageThreadAvatar],
+  );
+
+  return selectFromGalleryAndUpdateThreadAvatar;
+}
+
 type ShowAvatarActionSheetOptions = {
   +id: 'emoji' | 'image' | 'camera' | 'ens' | 'cancel' | 'remove',
   +onPress?: () => mixed,
@@ -440,4 +462,5 @@ export {
   useSelectFromGalleryAndUpdateUserAvatar,
   useNativeSetUserAvatar,
   useNativeUpdateUserImageAvatar,
+  useSelectFromGalleryAndUpdateThreadAvatar,
 };

native/avatars/edit-thread-avatar.react.js

@@ -8,7 +8,10 @@ import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js';
 import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js';
 
-import { useShowAvatarActionSheet } from './avatar-hooks.js';
+import {
+  useSelectFromGalleryAndUpdateThreadAvatar,
+  useShowAvatarActionSheet,
+} from './avatar-hooks.js';
 import EditAvatarBadge from './edit-avatar-badge.react.js';
 import ThreadAvatar from './thread-avatar.react.js';
 import {
@@ -27,11 +30,11 @@ function EditThreadAvatar(props: Props): React.Node {
 
   const editThreadAvatarContext = React.useContext(EditThreadAvatarContext);
   invariant(editThreadAvatarContext, 'editThreadAvatarContext should be set');
-  const {
-    threadAvatarSaveInProgress,
-    selectFromGalleryAndUpdateThreadAvatar,
-    setThreadAvatar,
-  } = editThreadAvatarContext;
+  const { threadAvatarSaveInProgress, setThreadAvatar } =
+    editThreadAvatarContext;
+
+  const selectFromGalleryAndUpdateThreadAvatar =
+    useSelectFromGalleryAndUpdateThreadAvatar();
 
   const { navigate } = useNavigation();
 

native/avatars/native-edit-thread-avatar-provider.react.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { BaseEditThreadAvatarProvider } from 'lib/components/base-edit-thread-avatar-provider.react.js';
 
-import { selectFromGallery, useUploadSelectedMedia } from './avatar-hooks.js';
+import { useUploadSelectedMedia } from './avatar-hooks.js';
 import { activeThreadSelector } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import Alert from '../utils/alert.js';
@@ -32,7 +32,6 @@ function NativeEditThreadAvatarProvider(props: Props): React.Node {
   return (
     <BaseEditThreadAvatarProvider
       displayFailureAlert={displayAvatarUpdateFailureAlert}
-      selectFromGallery={selectFromGallery}
       useUploadSelectedMedia={useUploadSelectedMedia}
       activeThreadID={activeThreadID}
     >