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

package/src/{components/ChannelList/hooks → hooks/actions}/useChannelActionItems.tsx

@@ -1,39 +1,42 @@
 import React, { useMemo } from 'react';
 import { Alert } from 'react-native';
 
-import type { Channel } from 'stream-chat';
+import type { BlockedUsersState, Channel } from 'stream-chat';
 
-import { ChannelActions, getOtherUserInDirectChannel } from './useChannelActions';
-import { useChannelActions } from './useChannelActions';
-import { useChannelMembershipState } from './useChannelMembershipState';
+import type { ActionItem } from './types';
+import {
+  ChannelActionHandler,
+  ChannelActions,
+  getOtherUserInDirectChannel,
+  useChannelActions,
+} from './useChannelActions';
 
-import { useChannelMuteActive } from './useChannelMuteActive';
-import { useIsDirectChat } from './useIsDirectChat';
+import { useIsChannelMuted } from '../../components/ChannelPreview/hooks/useIsChannelMuted';
+import { useUserMuteActive } from '../../components/Message/hooks/useUserMuteActive';
+import { useTheme, useTranslationContext } from '../../contexts';
+import type { TranslationContextValue } from '../../contexts/translationContext/TranslationContext';
+import { IconProps, Mute, BlockUser, Delete, Sound } from '../../icons';
+import { ArrowBoxLeft } from '../../icons/leave';
+import { useChannelMembershipState } from '../useChannelMembershipState';
+import { useIsDirectChat } from '../useIsDirectChat';
+import { useStateStore } from '../useStateStore';
 
-import { useTheme, useTranslationContext } from '../../../contexts';
-import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
-import { IconProps, Mute, BlockUser, Delete, Sound } from '../../../icons';
-import { ArrowBoxLeft } from '../../../icons/leave';
-
-export type ChannelActionHandler = () => Promise<void> | void;
-
-export type ChannelActionItem = {
-  action: ChannelActionHandler;
-  Icon: React.ComponentType<IconProps>;
-  id: 'mute' | 'block' | 'archive' | 'leave' | 'deleteChannel' | string;
-  label: string;
+export type ChannelActionItem = ActionItem<
+  'mute' | 'muteUser' | 'block' | 'leave' | 'deleteChannel' | string
+> & {
   placement: 'both' | 'sheet' | 'swipe';
-  type: 'destructive' | 'standard';
 };
 
 export type ChannelActionItemsParams = {
   actions: ChannelActions;
   channel: Channel;
+  channelMuteActive: boolean;
   isArchived: boolean;
+  isBlocked: boolean | undefined;
   isDirectChat: boolean;
   isPinned: boolean;
-  muteActive: boolean;
   t: TranslationContextValue['t'];
+  userMuteActive: boolean;
 };
 
 export type BuildDefaultChannelActionItems = (
@@ -65,32 +68,20 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
       blockUser,
       unblockUser,
     },
+    channelMuteActive,
+    isBlocked,
     isDirectChat,
-    muteActive,
+    userMuteActive,
     t,
     channel,
   } = channelActionItemsParams;
   const ownUserId = channel.getClient().userID;
 
-  const client = channel.getClient();
-
-  const isBlocked = isDirectChat
-    ? new Set(client.blockedUsers.getLatestValue().userIds).has(
-        getOtherUserInDirectChannel(channel)?.user?.id ?? '',
-      )
-    : undefined;
-
   const actionItems: ChannelActionItem[] = [
     {
-      action: isDirectChat
-        ? muteActive
-          ? unmuteUser
-          : muteUser
-        : muteActive
-          ? unmuteChannel
-          : muteChannel,
+      action: channelMuteActive ? unmuteChannel : muteChannel,
       Icon: (props) =>
-        muteActive ? (
+        channelMuteActive ? (
           <Sound width={20} height={20} {...props} />
         ) : (
           <Mute
@@ -103,25 +94,44 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
         ),
       id: 'mute',
       label: isDirectChat
-        ? muteActive
-          ? t('Unmute User')
-          : t('Mute User')
-        : muteActive
+        ? channelMuteActive
+          ? t('Unmute Chat')
+          : t('Mute Chat')
+        : channelMuteActive
           ? t('Unmute Group')
           : t('Mute Group'),
-      placement: isDirectChat ? 'sheet' : 'swipe',
+      placement: 'swipe',
       type: 'standard',
     },
   ];
 
   if (isDirectChat) {
+    actionItems.push({
+      action: userMuteActive ? unmuteUser : muteUser,
+      Icon: (props) =>
+        userMuteActive ? (
+          <ChannelActionsIcon Icon={Sound} {...props} />
+        ) : (
+          <ChannelActionsIcon
+            Icon={Mute}
+            {...props}
+            fill={props.fill ?? props.stroke}
+            stroke={undefined}
+          />
+        ),
+      id: 'muteUser',
+      label: userMuteActive ? t('Unmute User') : t('Mute User'),
+      placement: 'sheet',
+      type: 'standard',
+    });
+
     actionItems.push({
       action: isBlocked ? unblockUser : blockUser,
       Icon: (props) => <ChannelActionsIcon Icon={BlockUser} {...props} />,
       id: 'block',
       label: isBlocked ? t('Unblock User') : t('Block User'),
       placement: 'sheet',
-      type: 'standard',
+      type: isBlocked ? 'standard' : 'destructive',
     });
   }
 
@@ -136,7 +146,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
 
   if (channel.data?.created_by?.id === ownUserId) {
     actionItems.push({
-      action: () => {
+      action: (...args: Parameters<ChannelActionHandler>) => {
         const title = isDirectChat ? t('Delete chat') : t('Delete group');
         const message = isDirectChat
           ? t("Are you sure you want to delete this chat? This can't be undone.")
@@ -149,7 +159,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
           },
           {
             onPress: async () => {
-              await deleteChannel();
+              await deleteChannel(...args);
             },
             style: 'destructive',
             text: t('Delete'),
@@ -179,6 +189,9 @@ type UseChannelActionItemsParams = {
   getChannelActionItems?: GetChannelActionItems;
 };
 
+const blockedUsersStateSelector = (state: BlockedUsersState) =>
+  ({ userIds: state.userIds }) as const;
+
 export const useChannelActionItems = ({
   channel,
   getChannelActionItems: getChannelActionItemsProp = getChannelActionItems,
@@ -190,19 +203,42 @@ export const useChannelActionItems = ({
   const isPinned = Boolean(membership?.pinned_at);
   const isArchived = Boolean(membership?.archived_at);
 
-  const muteActive = useChannelMuteActive(channel);
+  const { muted: channelMuteActive } = useIsChannelMuted(channel);
+  const otherUser = isDirectChat ? getOtherUserInDirectChannel(channel)?.user : undefined;
+  const userMuteActive = useUserMuteActive(otherUser);
+
+  const { userIds: blockedUserIds } = useStateStore(
+    channel.getClient().blockedUsers,
+    blockedUsersStateSelector,
+  );
+
+  const isBlocked = isDirectChat
+    ? blockedUserIds.includes(getOtherUserInDirectChannel(channel)?.user?.id ?? '')
+    : undefined;
 
   const channelActionItemsParams = useMemo(
     () => ({
       actions: channelActions,
       channel,
+      channelMuteActive,
       isArchived,
+      isBlocked,
       isDirectChat,
       isPinned,
-      muteActive,
       t,
+      userMuteActive,
     }),
-    [channel, muteActive, channelActions, isArchived, isDirectChat, isPinned, t],
+    [
+      channel,
+      channelActions,
+      channelMuteActive,
+      isArchived,
+      isBlocked,
+      isDirectChat,
+      isPinned,
+      t,
+      userMuteActive,
+    ],
   );
 
   const defaultItems = useMemo(

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,