stream-chat-react-native-core 9.3.1 → 9.4.0-beta.10

package/src/{components/ChannelList/hooks → hooks/actions}/useChannelActions.ts

@@ -2,23 +2,38 @@ import { useMemo } from 'react';
 
 import { Channel } from 'stream-chat';
 
-import { useChatContext, useTranslationContext } from '../../../contexts';
-import { useStableCallback } from '../../../hooks';
-import { useNotificationApi } from '../../Notifications';
+import type { ActionHandler, ActionOptions } from './types';
+
+import { useNotificationApi } from '../../components/Notifications/hooks';
+import { useChatContext, useTranslationContext } from '../../contexts';
+import { File, GlobalFileUploadRequest } from '../../types/types';
+import { useStableCallback } from '../useStableCallback';
+
+export type ChannelActionOptions = ActionOptions;
+
+export type ChannelActionHandler = ActionHandler;
 
 export type ChannelActions = {
-  archive: () => Promise<void>;
-  deleteChannel: () => Promise<void>;
-  leave: () => Promise<void>;
-  pin: () => Promise<void>;
-  unarchive: () => Promise<void>;
-  unpin: () => Promise<void>;
-  muteUser: () => Promise<void>;
-  unmuteUser: () => Promise<void>;
-  muteChannel: () => Promise<void>;
-  unmuteChannel: () => Promise<void>;
-  blockUser: () => Promise<void>;
-  unblockUser: () => Promise<void>;
+  addMembers: (memberIds: string[], options?: ChannelActionOptions) => Promise<void>;
+  removeMembers: (memberIds: string[], options?: ChannelActionOptions) => Promise<void>;
+  archive: ChannelActionHandler;
+  deleteChannel: ChannelActionHandler;
+  leave: ChannelActionHandler;
+  pin: ChannelActionHandler;
+  unarchive: ChannelActionHandler;
+  unpin: ChannelActionHandler;
+  updateImage: (
+    image: File | null,
+    options?: ChannelActionOptions,
+    doFileUploadRequest?: GlobalFileUploadRequest,
+  ) => Promise<void>;
+  updateName: (name: string, options?: ChannelActionOptions) => Promise<void>;
+  muteUser: ChannelActionHandler;
+  unmuteUser: ChannelActionHandler;
+  muteChannel: ChannelActionHandler;
+  unmuteChannel: ChannelActionHandler;
+  blockUser: ChannelActionHandler;
+  unblockUser: ChannelActionHandler;
 };
 
 export const getOtherUserInDirectChannel = (channel: Channel) => {
@@ -38,7 +53,7 @@ const getNotificationError = (error: unknown): Error | undefined => {
   return undefined;
 };
 
-const getNotificationErrorOptions = (error: unknown) => {
+export const getNotificationErrorOptions = (error: unknown) => {
   const originalError = getNotificationError(error);
   return originalError ? { originalError } : {};
 };
@@ -49,7 +64,7 @@ export const useChannelActions = (channel: Channel) => {
   const { t } = useTranslationContext();
   const ownUserId = client.userID;
 
-  const pin = useStableCallback(async () => {
+  const pin = useStableCallback(async (options?: ChannelActionOptions) => {
     try {
       if (!channel) {
         return;
@@ -60,6 +75,7 @@ export const useChannelActions = (channel: Channel) => {
         options: { severity: 'success', type: 'api:channel:pin:success' },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onSuccess?.();
     } catch (error) {
       addNotification({
         message: t('Failed to update channel pinned status'),
@@ -70,10 +86,11 @@ export const useChannelActions = (channel: Channel) => {
         },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onFailure?.(error);
     }
   });
 
-  const unpin = useStableCallback(async () => {
+  const unpin = useStableCallback(async (options?: ChannelActionOptions) => {
     try {
       if (!channel) {
         return;
@@ -84,6 +101,7 @@ export const useChannelActions = (channel: Channel) => {
         options: { severity: 'success', type: 'api:channel:unpin:success' },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onSuccess?.();
     } catch (error) {
       addNotification({
         message: t('Failed to update channel pinned status'),
@@ -94,10 +112,11 @@ export const useChannelActions = (channel: Channel) => {
         },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onFailure?.(error);
     }
   });
 
-  const archive = useStableCallback(async () => {
+  const archive = useStableCallback(async (options?: ChannelActionOptions) => {
     try {
       if (!channel) {
         return;
@@ -108,6 +127,7 @@ export const useChannelActions = (channel: Channel) => {
         options: { severity: 'success', type: 'api:channel:archive:success' },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onSuccess?.();
     } catch (error) {
       addNotification({
         message: t('Failed to update channel archive status'),
@@ -118,10 +138,11 @@ export const useChannelActions = (channel: Channel) => {
         },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onFailure?.(error);
     }
   });
 
-  const unarchive = useStableCallback(async () => {
+  const unarchive = useStableCallback(async (options?: ChannelActionOptions) => {
     try {
       if (!channel) {
         return;
@@ -132,6 +153,7 @@ export const useChannelActions = (channel: Channel) => {
         options: { severity: 'success', type: 'api:channel:unarchive:success' },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onSuccess?.();
     } catch (error) {
       addNotification({
         message: t('Failed to update channel archive status'),
@@ -142,10 +164,11 @@ export const useChannelActions = (channel: Channel) => {
         },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onFailure?.(error);
     }
   });
 
-  const leave = useStableCallback(async () => {
+  const leave = useStableCallback(async (options?: ChannelActionOptions) => {
     if (!channel) {
       return;
     }
@@ -157,6 +180,7 @@ export const useChannelActions = (channel: Channel) => {
           options: { severity: 'success', type: 'api:channel:leave:success' },
           origin: { context: { channel }, emitter: 'ChannelActions' },
         });
+        options?.onSuccess?.();
       } catch (error) {
         addNotification({
           message: t('Failed to leave channel'),
@@ -167,23 +191,95 @@ export const useChannelActions = (channel: Channel) => {
           },
           origin: { context: { channel }, emitter: 'ChannelActions' },
         });
+        options?.onFailure?.(error);
       }
     }
   });
 
-  const deleteChannel = useStableCallback(async () => {
+  const removeMembers = useStableCallback(
+    async (memberIds: string[], options?: ChannelActionOptions) => {
+      if (!channel) {
+        return;
+      }
+      try {
+        await channel.removeMembers(memberIds);
+        addNotification({
+          message: t('{{count}} members removed', { count: memberIds.length }),
+          options: { severity: 'success', type: 'api:channel:remove-members:success' },
+          origin: { context: { channel }, emitter: 'ChannelActions' },
+        });
+        options?.onSuccess?.();
+      } catch (error) {
+        addNotification({
+          message: t('Failed to remove members'),
+          options: {
+            ...getNotificationErrorOptions(error),
+            severity: 'error',
+            type: 'api:channel:remove-members:failed',
+          },
+          origin: { context: { channel }, emitter: 'ChannelActions' },
+        });
+        options?.onFailure?.(error);
+      }
+    },
+  );
+
+  const addMembers = useStableCallback(
+    async (memberIds: string[], options?: ChannelActionOptions) => {
+      if (!channel) {
+        return;
+      }
+      try {
+        await channel.addMembers(memberIds);
+        addNotification({
+          message: t('{{count}} members added', { count: memberIds.length }),
+          options: { severity: 'success', type: 'api:channel:add-members:success' },
+          origin: { context: { channel }, emitter: 'ChannelActions' },
+        });
+        options?.onSuccess?.();
+      } catch (error) {
+        addNotification({
+          message: t('Failed to add members'),
+          options: {
+            ...getNotificationErrorOptions(error),
+            severity: 'error',
+            type: 'api:channel:add-members:failed',
+          },
+          origin: { context: { channel }, emitter: 'ChannelActions' },
+        });
+        options?.onFailure?.(error);
+      }
+    },
+  );
+
+  const deleteChannel = useStableCallback(async (options?: ChannelActionOptions) => {
     if (!channel) {
       return;
     }
 
     try {
       await channel.delete();
+      addNotification({
+        message: t('Channel deleted'),
+        options: { severity: 'success', type: 'api:channel:delete:success' },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
+      options?.onSuccess?.();
     } catch (error) {
-      console.log('Error deleting channel', error);
+      addNotification({
+        message: t('Failed to delete channel'),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:channel:delete:failed',
+        },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
+      options?.onFailure?.(error);
     }
   });
 
-  const muteUser = useStableCallback(async () => {
+  const muteUser = useStableCallback(async (options?: ChannelActionOptions) => {
     if (!channel) {
       return;
     }
@@ -200,6 +296,7 @@ export const useChannelActions = (channel: Channel) => {
           options: { severity: 'success', type: 'api:user:mute:success' },
           origin: { context: { channel }, emitter: 'ChannelActions' },
         });
+        options?.onSuccess?.();
       }
     } catch (error) {
       addNotification({
@@ -211,10 +308,11 @@ export const useChannelActions = (channel: Channel) => {
         },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onFailure?.(error);
     }
   });
 
-  const unmuteUser = useStableCallback(async () => {
+  const unmuteUser = useStableCallback(async (options?: ChannelActionOptions) => {
     if (!channel) {
       return;
     }
@@ -231,6 +329,7 @@ export const useChannelActions = (channel: Channel) => {
           options: { severity: 'success', type: 'api:user:unmute:success' },
           origin: { context: { channel }, emitter: 'ChannelActions' },
         });
+        options?.onSuccess?.();
       }
     } catch (error) {
       addNotification({
@@ -242,10 +341,11 @@ export const useChannelActions = (channel: Channel) => {
         },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onFailure?.(error);
     }
   });
 
-  const muteChannel = useStableCallback(async () => {
+  const muteChannel = useStableCallback(async (options?: ChannelActionOptions) => {
     if (!channel) {
       return;
     }
@@ -257,6 +357,7 @@ export const useChannelActions = (channel: Channel) => {
         options: { severity: 'success', type: 'api:channel:mute:success' },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onSuccess?.();
     } catch (error) {
       addNotification({
         message: t('Failed to update channel mute status'),
@@ -267,10 +368,11 @@ export const useChannelActions = (channel: Channel) => {
         },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onFailure?.(error);
     }
   });
 
-  const unmuteChannel = useStableCallback(async () => {
+  const unmuteChannel = useStableCallback(async (options?: ChannelActionOptions) => {
     if (!channel) {
       return;
     }
@@ -282,6 +384,7 @@ export const useChannelActions = (channel: Channel) => {
         options: { severity: 'success', type: 'api:channel:unmute:success' },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onSuccess?.();
     } catch (error) {
       addNotification({
         message: t('Failed to update channel mute status'),
@@ -292,10 +395,11 @@ export const useChannelActions = (channel: Channel) => {
         },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onFailure?.(error);
     }
   });
 
-  const blockUser = useStableCallback(async () => {
+  const blockUser = useStableCallback(async (options?: ChannelActionOptions) => {
     if (!channel) {
       return;
     }
@@ -310,6 +414,7 @@ export const useChannelActions = (channel: Channel) => {
           options: { severity: 'success', type: 'api:user:block:success' },
           origin: { context: { channel }, emitter: 'ChannelActions' },
         });
+        options?.onSuccess?.();
       }
     } catch (error) {
       addNotification({
@@ -321,10 +426,82 @@ export const useChannelActions = (channel: Channel) => {
         },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onFailure?.(error);
+    }
+  });
+
+  const updateName = useStableCallback(async (name: string, options?: ChannelActionOptions) => {
+    if (!channel) {
+      return;
+    }
+
+    try {
+      if (name.trim() === '') {
+        await channel.updatePartial({ unset: ['name'] });
+      } else {
+        await channel.updatePartial({ set: { name } });
+      }
+      addNotification({
+        message: t('Channel name updated'),
+        options: { severity: 'success', type: 'api:channel:update-name:success' },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
+      options?.onSuccess?.();
+    } catch (error) {
+      addNotification({
+        message: t('Failed to update channel name'),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:channel:update-name:failed',
+        },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
+      options?.onFailure?.(error);
     }
   });
 
-  const unblockUser = useStableCallback(async () => {
+  const updateImage = useStableCallback(
+    async (
+      image: File | null,
+      options?: ChannelActionOptions,
+      doFileUploadRequest?: GlobalFileUploadRequest,
+    ) => {
+      if (!channel) {
+        return;
+      }
+
+      try {
+        if (image === null) {
+          await channel.updatePartial({ unset: ['image'] });
+        } else {
+          const { file } = doFileUploadRequest
+            ? await doFileUploadRequest(image)
+            : await client.uploadImage(image.uri, image.name, image.type);
+          await channel.updatePartial({ set: { image: file } });
+        }
+        addNotification({
+          message: t('Channel image updated'),
+          options: { severity: 'success', type: 'api:channel:update-image:success' },
+          origin: { context: { channel }, emitter: 'ChannelActions' },
+        });
+        options?.onSuccess?.();
+      } catch (error) {
+        addNotification({
+          message: t('Failed to update channel image'),
+          options: {
+            ...getNotificationErrorOptions(error),
+            severity: 'error',
+            type: 'api:channel:update-image:failed',
+          },
+          origin: { context: { channel }, emitter: 'ChannelActions' },
+        });
+        options?.onFailure?.(error);
+      }
+    },
+  );
+
+  const unblockUser = useStableCallback(async (options?: ChannelActionOptions) => {
     if (!channel) {
       return;
     }
@@ -339,6 +516,7 @@ export const useChannelActions = (channel: Channel) => {
           options: { severity: 'success', type: 'api:user:unblock:success' },
           origin: { context: { channel }, emitter: 'ChannelActions' },
         });
+        options?.onSuccess?.();
       }
     } catch (error) {
       addNotification({
@@ -350,17 +528,22 @@ export const useChannelActions = (channel: Channel) => {
         },
         origin: { context: { channel }, emitter: 'ChannelActions' },
       });
+      options?.onFailure?.(error);
     }
   });
 
   return useMemo<ChannelActions>(
     () => ({
+      addMembers,
+      removeMembers,
       pin,
       unpin,
       archive,
       unarchive,
       leave,
       deleteChannel,
+      updateName,
+      updateImage,
       muteUser,
       unmuteUser,
       muteChannel,
@@ -369,12 +552,16 @@ export const useChannelActions = (channel: Channel) => {
       unblockUser,
     }),
     [
+      addMembers,
+      removeMembers,
       pin,
       unpin,
       archive,
       unarchive,
       leave,
       deleteChannel,
+      updateName,
+      updateImage,
       muteUser,
       unmuteUser,
       muteChannel,

package/src/hooks/actions/useChannelMemberActionItems.tsx

@@ -0,0 +1,204 @@
+import React, { useMemo } from 'react';
+import { Alert } from 'react-native';
+
+import type { BlockedUsersState, Channel, ChannelMemberResponse } from 'stream-chat';
+
+import type { ActionItem } from './types';
+import { ChannelActions, useChannelActions } from './useChannelActions';
+import { useUserActions, UserActions } from './useUserActions';
+
+import { useUserMuteActive } from '../../components/Message/hooks/useUserMuteActive';
+import { useTheme, useTranslationContext } from '../../contexts';
+import type { TranslationContextValue } from '../../contexts/translationContext/TranslationContext';
+import { BlockUser, IconProps, Mute, Sound, UserDelete } from '../../icons';
+import { useChannelOwnCapabilities } from '../useChannelOwnCapabilities';
+import { useStateStore } from '../useStateStore';
+
+export type ChannelMemberActionItem = ActionItem<'muteUser' | 'block' | string>;
+
+export type ChannelMemberActionItemsParams = {
+  channel: Channel;
+  channelActions: ChannelActions;
+  isBlocked: boolean;
+  isCurrentUser: boolean;
+  member: ChannelMemberResponse;
+  ownCapabilities: string[] | undefined;
+  t: TranslationContextValue['t'];
+  userActions: UserActions;
+  userMuteActive: boolean;
+};
+
+export type BuildDefaultChannelMemberActionItems = (
+  channelMemberActionItemsParams: ChannelMemberActionItemsParams,
+) => ChannelMemberActionItem[];
+
+const ChannelMemberActionsIcon = ({
+  Icon,
+  ...rest
+}: { Icon: React.ComponentType<IconProps> } & IconProps) => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return <Icon stroke={semantics.textSecondary} width={20} height={20} {...rest} />;
+};
+
+export const buildDefaultChannelMemberActionItems: BuildDefaultChannelMemberActionItems = (
+  channelMemberActionItemsParams,
+) => {
+  const {
+    channelActions: { removeMembers },
+    isBlocked,
+    isCurrentUser,
+    member,
+    ownCapabilities,
+    t,
+    userActions: { blockUser, muteUser, unblockUser, unmuteUser },
+    userMuteActive,
+  } = channelMemberActionItemsParams;
+
+  const canRemoveMember = ownCapabilities?.includes('update-channel-members') ?? false;
+
+  const actionItems: ChannelMemberActionItem[] = [];
+
+  // Muting or blocking yourself is meaningless, so these actions are only
+  // added for other members.
+  if (!isCurrentUser) {
+    actionItems.push(
+      {
+        action: userMuteActive ? unmuteUser : muteUser,
+        Icon: (props) =>
+          userMuteActive ? (
+            <ChannelMemberActionsIcon Icon={Sound} {...props} />
+          ) : (
+            <ChannelMemberActionsIcon
+              Icon={Mute}
+              {...props}
+              fill={props.fill ?? props.stroke}
+              stroke={undefined}
+            />
+          ),
+        id: 'muteUser',
+        label: userMuteActive ? t('Unmute User') : t('Mute User'),
+        type: 'standard',
+      },
+      {
+        action: isBlocked ? unblockUser : blockUser,
+        Icon: (props) => <ChannelMemberActionsIcon Icon={BlockUser} {...props} />,
+        id: 'block',
+        label: isBlocked ? t('Unblock User') : t('Block User'),
+        type: isBlocked ? 'standard' : 'destructive',
+      },
+    );
+
+    if (canRemoveMember) {
+      actionItems.push({
+        action: () => {
+          const memberId = member.user?.id;
+          if (!memberId) {
+            return;
+          }
+          Alert.alert(
+            t('Remove User'),
+            t('Are you sure you want to remove this member from the channel?'),
+            [
+              { style: 'cancel', text: t('Cancel') },
+              {
+                onPress: async () => {
+                  await removeMembers([memberId]);
+                },
+                style: 'destructive',
+                text: t('Remove'),
+              },
+            ],
+          );
+        },
+        Icon: (props) => <ChannelMemberActionsIcon Icon={UserDelete} {...props} />,
+        id: 'removeMember',
+        label: t('Remove User'),
+        type: 'destructive',
+      });
+    }
+  }
+
+  return actionItems;
+};
+
+export type GetChannelMemberActionItems = (params: {
+  context: ChannelMemberActionItemsParams;
+  defaultItems: ChannelMemberActionItem[];
+}) => ChannelMemberActionItem[];
+
+export const getChannelMemberActionItems: GetChannelMemberActionItems = ({ defaultItems }) =>
+  defaultItems;
+
+type UseChannelMemberActionItemsParams = {
+  channel: Channel;
+  member: ChannelMemberResponse;
+  getChannelMemberActionItems?: GetChannelMemberActionItems;
+};
+
+const blockedUsersStateSelector = (state: BlockedUsersState) =>
+  ({ userIds: state.userIds }) as const;
+
+export const useChannelMemberActionItems = ({
+  channel,
+  member,
+  getChannelMemberActionItems: getChannelMemberActionItemsProp = getChannelMemberActionItems,
+}: UseChannelMemberActionItemsParams) => {
+  const { t } = useTranslationContext();
+  const userActions = useUserActions(member.user);
+  const channelActions = useChannelActions(channel);
+
+  const ownCapabilities = useChannelOwnCapabilities(channel);
+
+  const userMuteActive = useUserMuteActive(member.user);
+
+  const { userIds: blockedUserIds } = useStateStore(
+    channel.getClient().blockedUsers,
+    blockedUsersStateSelector,
+  );
+
+  const isBlocked = blockedUserIds.includes(member.user?.id ?? '');
+
+  const isCurrentUser = member.user?.id === channel.getClient().userID;
+
+  const channelMemberActionItemsParams = useMemo<ChannelMemberActionItemsParams>(
+    () => ({
+      channel,
+      channelActions,
+      isBlocked,
+      isCurrentUser,
+      member,
+      ownCapabilities,
+      t,
+      userActions,
+      userMuteActive,
+    }),
+    [
+      channel,
+      channelActions,
+      isBlocked,
+      isCurrentUser,
+      member,
+      ownCapabilities,
+      t,
+      userActions,
+      userMuteActive,
+    ],
+  );
+
+  const defaultItems = useMemo(
+    () => buildDefaultChannelMemberActionItems(channelMemberActionItemsParams),
+    [channelMemberActionItemsParams],
+  );
+
+  return useMemo(
+    () =>
+      getChannelMemberActionItemsProp({
+        context: channelMemberActionItemsParams,
+        defaultItems,
+      }),
+    [channelMemberActionItemsParams, defaultItems, getChannelMemberActionItemsProp],
+  );
+};