stream-chat-react-native-core 8.13.7 → 9.0.0-beta.2

package/src/components/ChannelList/hooks/useChannelActionItems.tsx

@@ -0,0 +1,236 @@
+import React, { useMemo } from 'react';
+import { Alert } from 'react-native';
+
+import type { Channel } from 'stream-chat';
+
+import { ChannelActions, getOtherUserInDirectChannel } from './useChannelActions';
+import { useChannelActions } from './useChannelActions';
+import { useChannelMembershipState } from './useChannelMembershipState';
+
+import { useChannelMuteActive } from './useChannelMuteActive';
+import { useIsDirectChat } from './useIsDirectChat';
+
+import { useTheme, useTranslationContext } from '../../../contexts';
+import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
+import { Archive, IconProps, Mute, BlockUser, Delete } from '../../../icons';
+import { ArrowBoxLeft } from '../../../icons/ArrowBoxLeft';
+
+export type ChannelActionHandler = () => Promise<void> | void;
+
+export type ChannelActionItem = {
+  action: ChannelActionHandler;
+  Icon: React.ComponentType<IconProps>;
+  id: 'mute' | 'block' | 'archive' | 'leave' | 'deleteChannel' | string;
+  label: string;
+  placement: 'both' | 'sheet' | 'swipe';
+  type: 'destructive' | 'standard';
+};
+
+export type ChannelActionItemsParams = {
+  actions: ChannelActions;
+  channel: Channel;
+  isArchived: boolean;
+  isDirectChat: boolean;
+  isPinned: boolean;
+  muteActive: boolean;
+  t: TranslationContextValue['t'];
+};
+
+export type BuildDefaultChannelActionItems = (
+  channelActionItemsParams: ChannelActionItemsParams,
+) => ChannelActionItem[];
+
+const ChannelActionsIcon = ({
+  Icon,
+  ...rest
+}: { Icon: React.ComponentType<IconProps> } & IconProps) => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return <Icon stroke={semantics.textSecondary} width={20} height={20} {...rest} />;
+};
+
+export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
+  channelActionItemsParams,
+) => {
+  const {
+    actions: {
+      archive,
+      deleteChannel,
+      leave,
+      unarchive,
+      muteChannel,
+      unmuteChannel,
+      muteUser,
+      unmuteUser,
+      blockUser,
+      unblockUser,
+    },
+    isArchived,
+    isDirectChat,
+    muteActive,
+    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,
+      Icon: (props) => (
+        <Mute
+          width={20}
+          height={20}
+          {...props}
+          stroke={undefined}
+          fill={props.fill ?? props.stroke}
+        />
+      ),
+      id: 'mute',
+      label: isDirectChat
+        ? muteActive
+          ? t('Unmute User')
+          : t('Mute User')
+        : muteActive
+          ? t('Unmute Group')
+          : t('Mute Group'),
+      placement: isDirectChat ? 'sheet' : 'both',
+      type: 'standard',
+    },
+  ];
+
+  if (isDirectChat) {
+    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',
+    });
+  }
+
+  actionItems.push({
+    action: isArchived ? unarchive : archive,
+    Icon: (props) => <ChannelActionsIcon Icon={Archive} {...props} />,
+    id: 'archive',
+    label: isDirectChat
+      ? isArchived
+        ? t('Unarchive Chat')
+        : t('Archive Chat')
+      : isArchived
+        ? t('Unarchive Group')
+        : t('Archive Group'),
+    placement: isDirectChat ? 'sheet' : 'both',
+    type: 'standard',
+  });
+
+  actionItems.push({
+    action: leave,
+    Icon: (props) => <ChannelActionsIcon Icon={ArrowBoxLeft} {...props} />,
+    id: 'leave',
+    label: isDirectChat ? t('Leave Chat') : t('Leave Group'),
+    placement: 'sheet',
+    type: 'destructive',
+  });
+
+  if (channel.data?.created_by?.id === ownUserId) {
+    actionItems.push({
+      action: () => {
+        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.")
+          : t("Are you sure you want to delete this group? This can't be undone.");
+
+        Alert.alert(title, message, [
+          {
+            style: 'cancel',
+            text: t('Cancel'),
+          },
+          {
+            onPress: async () => {
+              await deleteChannel();
+            },
+            style: 'destructive',
+            text: t('Delete'),
+          },
+        ]);
+      },
+      Icon: (props) => <ChannelActionsIcon Icon={Delete} {...props} />,
+      id: 'deleteChannel',
+      label: isDirectChat ? t('Delete Chat') : t('Delete Group'),
+      placement: 'sheet',
+      type: 'destructive',
+    });
+  }
+
+  return actionItems;
+};
+
+export type GetChannelActionItems = (params: {
+  context: ChannelActionItemsParams;
+  defaultItems: ChannelActionItem[];
+}) => ChannelActionItem[];
+
+export const getChannelActionItems: GetChannelActionItems = ({ defaultItems }) => defaultItems;
+
+type UseChannelActionItemsParams = {
+  channel: Channel;
+  getChannelActionItems?: GetChannelActionItems;
+};
+
+export const useChannelActionItems = ({
+  channel,
+  getChannelActionItems: getChannelActionItemsProp = getChannelActionItems,
+}: UseChannelActionItemsParams) => {
+  const { t } = useTranslationContext();
+  const membership = useChannelMembershipState(channel);
+  const channelActions = useChannelActions(channel);
+  const isDirectChat = useIsDirectChat(channel);
+  const isPinned = Boolean(membership?.pinned_at);
+  const isArchived = Boolean(membership?.archived_at);
+
+  const muteActive = useChannelMuteActive(channel);
+
+  const channelActionItemsParams = useMemo(
+    () => ({
+      actions: channelActions,
+      channel,
+      isArchived,
+      isDirectChat,
+      isPinned,
+      muteActive,
+      t,
+    }),
+    [channel, muteActive, channelActions, isArchived, isDirectChat, isPinned, t],
+  );
+
+  const defaultItems = useMemo(
+    () => buildDefaultChannelActionItems(channelActionItemsParams),
+    [channelActionItemsParams],
+  );
+
+  return useMemo(
+    () =>
+      getChannelActionItemsProp({
+        context: channelActionItemsParams,
+        defaultItems,
+      }),
+    [channelActionItemsParams, defaultItems, getChannelActionItemsProp],
+  );
+};

package/src/components/ChannelList/hooks/useChannelActionItemsById.ts

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+
+import type { Channel } from 'stream-chat';
+
+import type { ChannelActionItem, GetChannelActionItems } from './useChannelActionItems';
+import { useChannelActionItems } from './useChannelActionItems';
+
+export type ChannelActionItemsById = Partial<Record<ChannelActionItem['id'], ChannelActionItem>>;
+
+type UseChannelActionItemsByIdParams = {
+  channel: Channel;
+  getChannelActionItems?: GetChannelActionItems;
+};
+
+export const useChannelActionItemsById = ({
+  channel,
+  getChannelActionItems,
+}: UseChannelActionItemsByIdParams) => {
+  const channelActionItems = useChannelActionItems({
+    channel,
+    getChannelActionItems,
+  });
+
+  return useMemo(
+    () =>
+      channelActionItems.reduce<ChannelActionItemsById>((acc, channelActionItem) => {
+        acc[channelActionItem.id] = channelActionItem;
+        return acc;
+      }, {}),
+    [channelActionItems],
+  );
+};

package/src/components/ChannelList/hooks/useChannelActions.ts

@@ -0,0 +1,217 @@
+import { useMemo } from 'react';
+
+import { Channel } from 'stream-chat';
+
+import { useChatContext } from '../../../contexts';
+import { useStableCallback } from '../../../hooks';
+
+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>;
+};
+
+export const getOtherUserInDirectChannel = (channel: Channel) => {
+  const members = Object.values(channel.state.members);
+  return members.length === 2
+    ? members.find((member) => member.user?.id !== channel.getClient().userID)
+    : undefined;
+};
+
+export const useChannelActions = (channel: Channel) => {
+  const { client } = useChatContext();
+  const ownUserId = client.userID;
+
+  const pin = useStableCallback(async () => {
+    try {
+      if (!channel) {
+        return;
+      }
+      await channel.pin();
+    } catch (error) {
+      console.log('Error pinning channel', error);
+    }
+  });
+
+  const unpin = useStableCallback(async () => {
+    try {
+      if (!channel) {
+        return;
+      }
+      await channel.unpin();
+    } catch (error) {
+      console.log('Error unpinning channel', error);
+    }
+  });
+
+  const archive = useStableCallback(async () => {
+    try {
+      if (!channel) {
+        return;
+      }
+      await channel.archive();
+    } catch (error) {
+      console.log('Error archiving channel', error);
+    }
+  });
+
+  const unarchive = useStableCallback(async () => {
+    try {
+      if (!channel) {
+        return;
+      }
+      await channel.unarchive();
+    } catch (error) {
+      console.log('Error unarchiving channel', error);
+    }
+  });
+
+  const leave = useStableCallback(async () => {
+    if (!channel) {
+      return;
+    }
+    if (ownUserId) {
+      await channel.removeMembers([ownUserId]);
+    }
+  });
+
+  const deleteChannel = useStableCallback(async () => {
+    if (!channel) {
+      return;
+    }
+
+    try {
+      await channel.delete();
+    } catch (error) {
+      console.log('Error deleting channel', error);
+    }
+  });
+
+  const muteUser = useStableCallback(async () => {
+    if (!channel) {
+      return;
+    }
+
+    const otherUser = getOtherUserInDirectChannel(channel);
+
+    try {
+      if (otherUser?.user?.id) {
+        await client.muteUser(otherUser.user.id);
+      }
+    } catch (error) {
+      console.log('Error muting user', error);
+    }
+  });
+
+  const unmuteUser = useStableCallback(async () => {
+    if (!channel) {
+      return;
+    }
+
+    const otherUser = getOtherUserInDirectChannel(channel);
+
+    try {
+      if (otherUser?.user?.id) {
+        await client.unmuteUser(otherUser.user.id);
+      }
+    } catch (error) {
+      console.log('Error muting user', error);
+    }
+  });
+
+  const muteChannel = useStableCallback(async () => {
+    if (!channel) {
+      return;
+    }
+
+    try {
+      await channel.mute();
+    } catch (error) {
+      console.log('Error muting channel', error);
+    }
+  });
+
+  const unmuteChannel = useStableCallback(async () => {
+    if (!channel) {
+      return;
+    }
+
+    try {
+      await channel.unmute();
+    } catch (error) {
+      console.log('Error muting channel', error);
+    }
+  });
+
+  const blockUser = useStableCallback(async () => {
+    if (!channel) {
+      return;
+    }
+
+    const otherUser = getOtherUserInDirectChannel(channel);
+
+    try {
+      if (otherUser?.user?.id) {
+        await client.blockUser(otherUser.user.id);
+      }
+    } catch (error) {
+      console.log('Error blocking user', error);
+    }
+  });
+
+  const unblockUser = useStableCallback(async () => {
+    if (!channel) {
+      return;
+    }
+
+    const otherUser = getOtherUserInDirectChannel(channel);
+
+    try {
+      if (otherUser?.user?.id) {
+        await client.unBlockUser(otherUser.user.id);
+      }
+    } catch (error) {
+      console.log('Error unblocking user', error);
+    }
+  });
+
+  return useMemo<ChannelActions>(
+    () => ({
+      pin,
+      unpin,
+      archive,
+      unarchive,
+      leave,
+      deleteChannel,
+      muteUser,
+      unmuteUser,
+      muteChannel,
+      unmuteChannel,
+      blockUser,
+      unblockUser,
+    }),
+    [
+      pin,
+      unpin,
+      archive,
+      unarchive,
+      leave,
+      deleteChannel,
+      muteUser,
+      unmuteUser,
+      muteChannel,
+      unmuteChannel,
+      blockUser,
+      unblockUser,
+    ],
+  );
+};

package/src/components/ChannelList/hooks/useChannelMembersState.ts

@@ -0,0 +1,21 @@
+import { Channel, ChannelMemberResponse, EventTypes } from 'stream-chat';
+
+import { useSelectedChannelState } from '../../../hooks/useSelectedChannelState';
+
+const selector = (channel: Channel) => channel.state.members;
+const keys: EventTypes[] = [
+  'member.added',
+  'member.updated',
+  'member.removed',
+  'user.banned',
+  'user.unbanned',
+  'user.presence.changed',
+  'user.updated',
+];
+export function useChannelMembersState(channel: Channel): Record<string, ChannelMemberResponse>;
+export function useChannelMembersState(
+  channel?: Channel,
+): Record<string, ChannelMemberResponse> | undefined;
+export function useChannelMembersState(channel?: Channel) {
+  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });
+}

package/src/components/ChannelList/hooks/useChannelMuteActive.ts

@@ -0,0 +1,18 @@
+import { Channel } from 'stream-chat';
+
+import { getOtherUserInDirectChannel } from './useChannelActions';
+import { useIsDirectChat } from './useIsDirectChat';
+import { useMutedChannels } from './useMutedChannels';
+import { useMutedUsers } from './useMutedUsers';
+
+export const useChannelMuteActive = (channel: Channel) => {
+  const isDirectChat = useIsDirectChat(channel);
+  const mutedChannels = useMutedChannels(channel);
+  const mutedUsers = useMutedUsers(channel);
+
+  return isDirectChat
+    ? !!mutedUsers.find(
+        (mutedUser) => getOtherUserInDirectChannel(channel)?.user?.id === mutedUser.target.id,
+      )
+    : !!mutedChannels.find((mutedChannel) => channel.cid === mutedChannel.channel?.cid);
+};

package/src/components/ChannelList/hooks/useChannelOnlineMemberCount.ts

@@ -0,0 +1,22 @@
+import { Channel, EventTypes, StreamChat } from 'stream-chat';
+
+import { useChatContext } from '../../../contexts';
+import { useSyncClientEventsToChannel } from '../../../hooks/useSyncClientEvents';
+
+const selector = (channel: Channel, client: StreamChat) => {
+  const members = channel.state.members;
+  const onlineMembersCount = Object.values(members).filter(
+    (member) => member.user?.id !== client.userID && member.user?.online,
+  ).length;
+
+  return onlineMembersCount ?? 0;
+};
+
+const keys: EventTypes[] = ['user.presence.changed', 'user.updated'];
+
+export function useChannelOnlineMemberCount(channel: Channel): number;
+export function useChannelOnlineMemberCount(channel?: Channel): number | undefined;
+export function useChannelOnlineMemberCount(channel?: Channel) {
+  const { client } = useChatContext();
+  return useSyncClientEventsToChannel({ channel, client, selector, stateChangeEventKeys: keys });
+}

package/src/components/ChannelList/hooks/useCreateChannelsContext.ts

@@ -24,17 +24,24 @@ export const useCreateChannelsContext = ({
   numberOfSkeletons,
   onSelect,
   Preview,
+  getChannelActionItems,
   PreviewAvatar,
   PreviewMessage,
   PreviewMutedStatus,
   PreviewStatus,
   PreviewTitle,
+  PreviewLastMessage,
+  PreviewTypingIndicator,
+  PreviewMessageDeliveryStatus,
   PreviewUnreadCount,
+  ChannelDetailsBottomSheet,
+  swipeActionsEnabled,
   refreshing,
   refreshList,
   reloadList,
   setFlatListRef,
   Skeleton,
+  mutedStatusPosition,
 }: ChannelsContextValue) => {
   const channelValueString = channels
     ?.map(
@@ -69,17 +76,24 @@ export const useCreateChannelsContext = ({
       numberOfSkeletons,
       onSelect,
       Preview,
+      getChannelActionItems,
       PreviewAvatar,
       PreviewMessage,
       PreviewMutedStatus,
       PreviewStatus,
       PreviewTitle,
       PreviewUnreadCount,
+      PreviewTypingIndicator,
+      PreviewMessageDeliveryStatus,
+      PreviewLastMessage,
+      ChannelDetailsBottomSheet,
+      swipeActionsEnabled,
       refreshing,
       refreshList,
       reloadList,
       setFlatListRef,
       Skeleton,
+      mutedStatusPosition,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -90,7 +104,10 @@ export const useCreateChannelsContext = ({
       loadingChannels,
       loadingNextPage,
       channelListInitialized,
+      ChannelDetailsBottomSheet,
+      swipeActionsEnabled,
       refreshing,
+      mutedStatusPosition,
     ],
   );
 

package/src/components/ChannelList/hooks/useIsDirectChat.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+
+import type { Channel } from 'stream-chat';
+
+import { useChannelMembersState } from './useChannelMembersState';
+
+import { useChatContext } from '../../../contexts';
+
+export const useIsDirectChat = (channel: Channel) => {
+  const { client } = useChatContext();
+  const ownUserId = client.userID;
+  const members = useChannelMembersState(channel);
+
+  const otherMembers = useMemo(
+    () => Object.values(members).filter((member) => member.user?.id !== ownUserId),
+    [members, ownUserId],
+  );
+
+  return otherMembers.length === 1;
+};

package/src/components/ChannelList/hooks/useMutedChannels.ts

@@ -0,0 +1,18 @@
+import { Channel, ChannelMute, EventTypes, StreamChat } from 'stream-chat';
+
+import { useChatContext } from '../../../contexts';
+import { useSyncClientEventsToChannel } from '../../../hooks/useSyncClientEvents';
+
+const selector = (_channel: Channel, client: StreamChat) => client.mutedChannels;
+const keys: EventTypes[] = [
+  'health.check',
+  'notification.channel_mutes_updated',
+  'channel.muted',
+  'channel.unmuted',
+];
+export function useMutedChannels(channel: Channel): Array<ChannelMute>;
+export function useMutedChannels(channel?: Channel): Array<ChannelMute> | undefined;
+export function useMutedChannels(channel?: Channel) {
+  const { client } = useChatContext();
+  return useSyncClientEventsToChannel({ channel, client, selector, stateChangeEventKeys: keys });
+}

package/src/components/ChannelList/hooks/useMutedUsers.ts

@@ -0,0 +1,13 @@
+import { Channel, EventTypes, Mute, StreamChat } from 'stream-chat';
+
+import { useChatContext } from '../../../contexts';
+import { useSyncClientEventsToChannel } from '../../../hooks/useSyncClientEvents';
+
+const selector = (_channel: Channel, client: StreamChat) => client.mutedUsers;
+const keys: EventTypes[] = ['health.check', 'notification.mutes_updated'];
+export function useMutedUsers(channel: Channel): Array<Mute>;
+export function useMutedUsers(channel?: Channel): Array<Mute> | undefined;
+export function useMutedUsers(channel?: Channel) {
+  const { client } = useChatContext();
+  return useSyncClientEventsToChannel({ channel, client, selector, stateChangeEventKeys: keys });
+}