stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/components/Message/hooks/useMessageActions.tsx

@@ -0,0 +1,386 @@
+import React from 'react';
+import { Alert, Clipboard } from 'react-native';
+
+import { useMessageActionHandlers } from './useMessageActionHandlers';
+
+import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
+import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
+import type { OverlayContextValue } from '../../../contexts/overlayContext/OverlayContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
+import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
+import {
+  Copy,
+  CurveLineLeftUp,
+  Delete,
+  Edit,
+  MessageFlag,
+  Mute,
+  Pin,
+  SendUp,
+  ThreadReply,
+  Unpin,
+  UserDelete,
+} from '../../../icons';
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../../types/types';
+import { MessageStatusTypes } from '../../../utils/utils';
+
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
+import type { MessageActionType } from '../../MessageOverlay/MessageActionListItem';
+import { removeReservedFields } from '../utils/removeReservedFields';
+
+export const useMessageActions = <
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends UnknownType = DefaultUserType,
+>({
+  channel,
+  client,
+  enforceUniqueReaction,
+  handleBlock,
+  handleCopy,
+  handleDelete,
+  handleEdit,
+  handleFlag,
+  handleMute,
+  handlePinMessage,
+  handleQuotedReply,
+  handleReaction: handleReactionProp,
+  handleRetry,
+  handleThreadReply,
+  message,
+  onThreadSelect,
+  openThread,
+  removeMessage,
+  retrySendMessage,
+  selectReaction,
+  setEditingState,
+  setOverlay,
+  setQuotedMessageState,
+  supportedReactions,
+  t,
+  updateMessage,
+}: Pick<
+  MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  | 'handleBlock'
+  | 'handleCopy'
+  | 'handleDelete'
+  | 'handleEdit'
+  | 'handleFlag'
+  | 'handleQuotedReply'
+  | 'handleMute'
+  | 'handlePinMessage'
+  | 'handleRetry'
+  | 'handleReaction'
+  | 'handleThreadReply'
+  | 'removeMessage'
+  | 'retrySendMessage'
+  | 'setEditingState'
+  | 'setQuotedMessageState'
+  | 'selectReaction'
+  | 'supportedReactions'
+  | 'updateMessage'
+> &
+  Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'channel' | 'enforceUniqueReaction'> &
+  Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &
+  Pick<OverlayContextValue, 'setOverlay'> &
+  Pick<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'openThread'> &
+  Pick<MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'message'> &
+  Pick<TranslationContextValue, 't'> & {
+    onThreadSelect?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => void;
+  }) => {
+  const {
+    theme: {
+      colors: { accent_blue, accent_red, grey },
+    },
+  } = useTheme();
+  const {
+    handleDeleteMessage,
+    handleEditMessage,
+    handleQuotedReplyMessage,
+    handleResendMessage,
+    handleToggleBanUser,
+    handleToggleMuteUser,
+    handleTogglePinMessage,
+    handleToggleReaction,
+  } = useMessageActionHandlers({
+    channel,
+    client,
+    enforceUniqueReaction,
+    message,
+    removeMessage,
+    retrySendMessage,
+    setEditingState,
+    setQuotedMessageState,
+    supportedReactions,
+    updateMessage,
+  });
+
+  const error = message.type === 'error' || message.status === MessageStatusTypes.FAILED;
+
+  const onOpenThread = () => {
+    if (onThreadSelect) {
+      onThreadSelect(message);
+    }
+    if (openThread) {
+      openThread(message);
+    }
+  };
+
+  const isMuted = (client.mutedUsers || []).some(
+    (mute) => mute.user.id === client.userID && mute.target.id === message.user?.id,
+  );
+
+  const blockUser: MessageActionType = {
+    action: async () => {
+      setOverlay('none');
+      if (message.user?.id) {
+        if (handleBlock) {
+          handleBlock(message);
+        }
+
+        await handleToggleBanUser();
+      }
+    },
+    actionType: 'blockUser',
+    icon: <UserDelete pathFill={grey} />,
+    title: message.user?.banned ? t('Unblock User') : t('Block User'),
+  };
+
+  const copyMessage: MessageActionType = {
+    // using depreciated Clipboard from react-native until expo supports the community version or their own
+    action: () => {
+      setOverlay('none');
+      if (handleCopy) {
+        handleCopy(message);
+      }
+      Clipboard.setString(message.text || '');
+    },
+    actionType: 'copyMessage',
+    icon: <Copy pathFill={grey} />,
+    title: t('Copy Message'),
+  };
+
+  const deleteMessage: MessageActionType = {
+    action: () => {
+      setOverlay('alert');
+      if (message.id) {
+        Alert.alert(
+          t('Delete Message'),
+          t('Are you sure you want to permanently delete this message?'),
+          [
+            { onPress: () => setOverlay('none'), text: t('Cancel') },
+            {
+              onPress: async () => {
+                setOverlay('none');
+                if (handleDelete) {
+                  handleDelete(message);
+                }
+
+                await handleDeleteMessage();
+              },
+              style: 'destructive',
+              text: t('Delete'),
+            },
+          ],
+          { cancelable: false },
+        );
+      }
+    },
+    actionType: 'deleteMessage',
+    icon: <Delete pathFill={accent_red} />,
+    title: t('Delete Message'),
+    titleStyle: { color: accent_red },
+  };
+
+  const editMessage: MessageActionType = {
+    action: () => {
+      setOverlay('none');
+      if (handleEdit) {
+        handleEdit(message);
+      }
+      handleEditMessage();
+    },
+    actionType: 'editMessage',
+    icon: <Edit pathFill={grey} />,
+    title: t('Edit Message'),
+  };
+
+  const pinMessage: MessageActionType = {
+    action: () => {
+      setOverlay('none');
+      if (handlePinMessage) {
+        handlePinMessage(message);
+      }
+      handleTogglePinMessage();
+    },
+    actionType: 'pinMessage',
+    icon: <Pin height={23} pathFill={grey} width={24} />,
+    title: t('Pin to Conversation'),
+  };
+
+  const unpinMessage: MessageActionType = {
+    action: () => {
+      setOverlay('none');
+      if (handlePinMessage) {
+        handlePinMessage(message);
+      }
+      handleTogglePinMessage();
+    },
+    actionType: 'unpinMessage',
+    icon: <Unpin pathFill={grey} />,
+    title: t('Unpin from Conversation'),
+  };
+
+  const flagMessage: MessageActionType = {
+    action: () => {
+      setOverlay('alert');
+      if (message.id) {
+        Alert.alert(
+          t('Flag Message'),
+          t('Do you want to send a copy of this message to a moderator for further investigation?'),
+          [
+            { onPress: () => setOverlay('none'), text: t('Cancel') },
+            {
+              onPress: async () => {
+                try {
+                  if (handleFlag) {
+                    handleFlag(message);
+                  }
+                  await client.flagMessage(message.id);
+                  Alert.alert(
+                    t('Message flagged'),
+                    t('The message has been reported to a moderator.'),
+                    [
+                      {
+                        onPress: () => setOverlay('none'),
+                        text: t('Ok'),
+                      },
+                    ],
+                  );
+                } catch (_) {
+                  Alert.alert(
+                    t('Cannot Flag Message'),
+                    t(
+                      'Flag action failed either due to a network issue or the message is already flagged',
+                    ),
+                    [
+                      {
+                        onPress: () => setOverlay('none'),
+                        text: t('Ok'),
+                      },
+                    ],
+                  );
+                }
+              },
+              text: t('Flag'),
+            },
+          ],
+          { cancelable: false },
+        );
+      }
+    },
+    actionType: 'flagMessage',
+    icon: <MessageFlag pathFill={grey} />,
+    title: t('Flag Message'),
+  };
+
+  const handleReaction = !error
+    ? selectReaction
+      ? selectReaction(message)
+      : async (reactionType: string) => {
+          if (handleReactionProp) {
+            handleReactionProp(message, reactionType);
+          }
+
+          await handleToggleReaction(reactionType);
+        }
+    : undefined;
+
+  const muteUser: MessageActionType = {
+    action: async () => {
+      setOverlay('none');
+      if (message.user?.id) {
+        if (handleMute) {
+          handleMute(message);
+        }
+
+        await handleToggleMuteUser();
+      }
+    },
+    actionType: 'muteUser',
+    icon: <Mute pathFill={grey} />,
+    title: isMuted ? t('Unmute User') : t('Mute User'),
+  };
+
+  const quotedReply: MessageActionType = {
+    action: () => {
+      setOverlay('none');
+      if (handleQuotedReply) {
+        handleQuotedReply(message);
+      }
+      handleQuotedReplyMessage();
+    },
+    actionType: 'quotedReply',
+    icon: <CurveLineLeftUp pathFill={grey} />,
+    title: t('Reply'),
+  };
+
+  const retry: MessageActionType = {
+    action: async () => {
+      setOverlay('none');
+      const messageWithoutReservedFields = removeReservedFields(message);
+      if (handleRetry) {
+        handleRetry(messageWithoutReservedFields);
+      }
+
+      await handleResendMessage();
+    },
+    actionType: 'retry',
+    icon: <SendUp pathFill={accent_blue} />,
+    title: t('Resend'),
+  };
+
+  const threadReply: MessageActionType = {
+    action: () => {
+      setOverlay('none');
+      if (handleThreadReply) {
+        handleThreadReply(message);
+      }
+      onOpenThread();
+    },
+    actionType: 'threadReply',
+    icon: <ThreadReply pathFill={grey} />,
+    title: t('Thread Reply'),
+  };
+
+  return {
+    blockUser,
+    copyMessage,
+    deleteMessage,
+    editMessage,
+    flagMessage,
+    handleReaction,
+    muteUser,
+    pinMessage,
+    quotedReply,
+    retry,
+    threadReply,
+    unpinMessage,
+  };
+};

package/src/components/Message/utils/messageActions.ts

@@ -1,6 +1,5 @@
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
-
-import type { MessageAction } from '../../../contexts/messageOverlayContext/MessageOverlayContext';
+import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+import type { OwnCapabilitiesContextValue } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -11,6 +10,44 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import type { MessageActionType } from '../../MessageOverlay/MessageActionListItem';
+
+export type MessageActionsParams<
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends UnknownType = DefaultUserType,
+> = {
+  blockUser: MessageActionType;
+  copyMessage: MessageActionType;
+  deleteMessage: MessageActionType;
+  dismissOverlay: () => void;
+  editMessage: MessageActionType;
+  error: boolean | Error;
+  flagMessage: MessageActionType;
+  isThreadMessage: boolean;
+  messageReactions: boolean;
+  muteUser: MessageActionType;
+  ownCapabilities: OwnCapabilitiesContextValue;
+  pinMessage: MessageActionType;
+  quotedReply: MessageActionType;
+  retry: MessageActionType;
+  threadReply: MessageActionType;
+  unpinMessage: MessageActionType;
+} & Pick<MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'message' | 'isMyMessage'>;
+
+export type MessageActionsProp<
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends UnknownType = DefaultUserType,
+> = (param: MessageActionsParams<At, Ch, Co, Ev, Me, Re, Us>) => MessageActionType[];
 
 export const messageActions = <
   At extends UnknownType = DefaultAttachmentType,
@@ -22,7 +59,6 @@ export const messageActions = <
   Us extends UnknownType = DefaultUserType,
 >({
   blockUser,
-  canModifyMessage,
   copyMessage,
   deleteMessage,
   editMessage,
@@ -32,52 +68,35 @@ export const messageActions = <
   isThreadMessage,
   message,
   messageReactions,
-  mutesEnabled,
-  muteUser,
-  quotedRepliesEnabled,
+  ownCapabilities,
+  pinMessage,
   quotedReply,
   retry,
-  threadRepliesEnabled,
   threadReply,
-}: {
-  blockUser: MessageAction | null;
-  canModifyMessage: boolean;
-  copyMessage: MessageAction | null;
-  deleteMessage: MessageAction | null;
-  editMessage: MessageAction | null;
-  error: boolean;
-  flagMessage: MessageAction | null;
-  isMyMessage: boolean;
-  isThreadMessage: boolean;
-  message: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
-  messageReactions: boolean;
-  muteUser: MessageAction | null;
-  quotedReply: MessageAction | null;
-  retry: MessageAction | null;
-  threadReply: MessageAction | null;
-  mutesEnabled?: boolean;
-  quotedRepliesEnabled?: boolean;
-  threadRepliesEnabled?: boolean;
-}): Array<MessageAction | null> | undefined => {
+  unpinMessage,
+}: MessageActionsParams<At, Ch, Co, Ev, Me, Re, Us>) => {
   if (messageReactions) {
     return undefined;
   }
 
-  const actions: Array<MessageAction | null> = [];
+  const actions: Array<MessageActionType | null> = [];
 
   if (error && isMyMessage) {
     actions.push(retry);
   }
 
-  if (quotedRepliesEnabled && !isThreadMessage && !error) {
+  if (ownCapabilities.quoteMessage && !isThreadMessage && !error) {
     actions.push(quotedReply);
   }
 
-  if (threadRepliesEnabled && !isThreadMessage && !error) {
+  if (ownCapabilities.sendReply && !isThreadMessage && !error) {
     actions.push(threadReply);
   }
 
-  if (canModifyMessage) {
+  if (
+    (isMyMessage && ownCapabilities.updateOwnMessage) ||
+    (!isMyMessage && ownCapabilities.updateAnyMessage)
+  ) {
     actions.push(editMessage);
   }
 
@@ -85,19 +104,26 @@ export const messageActions = <
     actions.push(copyMessage);
   }
 
-  if (mutesEnabled && !isMyMessage) {
-    actions.push(muteUser);
+  if (!isMyMessage && ownCapabilities.flagMessage) {
+    actions.push(flagMessage);
+  }
+
+  if (ownCapabilities.pinMessage && !message.pinned) {
+    actions.push(pinMessage);
   }
 
-  if (!isMyMessage) {
-    actions.push(flagMessage);
+  if (ownCapabilities.pinMessage && message.pinned) {
+    actions.push(unpinMessage);
   }
 
-  if (!isMyMessage && canModifyMessage) {
+  if (!isMyMessage && ownCapabilities.banChannelMembers) {
     actions.push(blockUser);
   }
 
-  if (canModifyMessage) {
+  if (
+    (isMyMessage && ownCapabilities.deleteOwnMessage) ||
+    (!isMyMessage && ownCapabilities.deleteAnyMessage)
+  ) {
     actions.push(deleteMessage);
   }
 

package/src/components/Message/utils/removeReservedFields.ts

@@ -1,4 +1,3 @@
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -9,6 +8,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 export const removeReservedFields = <
   At extends UnknownType = DefaultAttachmentType,

package/src/components/MessageInput/AttachButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
@@ -9,8 +10,6 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Attach } from '../../icons/Attach';
 
-import type { GestureResponderEvent } from 'react-native';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/MessageInput/CommandsButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import {
@@ -13,8 +14,6 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Lightning } from '../../icons/Lightning';
 
-import type { GestureResponderEvent } from 'react-native';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/MessageInput/CooldownTimer.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+export type CooldownTimerProps = {
+  seconds: number;
+};
+
+const CONTAINER_SIZE = 24;
+const CONTAINER_HORIZONTAL_PADDING = 6;
+const EXTRA_CHARACTER_PADDING = CONTAINER_SIZE - CONTAINER_HORIZONTAL_PADDING * 2;
+
+/**
+ * To avoid the container jumping between sizes when there are more
+ * than one character in the width of the container since we aren't
+ * using a monospaced font.
+ */
+const normalizeWidth = (seconds: number) =>
+  CONTAINER_SIZE + EXTRA_CHARACTER_PADDING * (`${seconds}`.length - 1);
+
+/**
+ * Renders an amount of seconds left for a cooldown to finish.
+ *
+ * See `useCountdown` for an example of how to set a countdown
+ * to use as the source of `seconds`.
+ **/
+export const CooldownTimer = (props: CooldownTimerProps) => {
+  const { seconds } = props;
+  const {
+    theme: {
+      colors: { black, grey_gainsboro },
+      messageInput: {
+        cooldownTimer: { container, text },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: grey_gainsboro,
+          width: normalizeWidth(seconds),
+        },
+        container,
+      ]}
+    >
+      <Text style={[styles.text, { color: black }, text]} testID='cooldown-seconds'>
+        {seconds}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    borderRadius: CONTAINER_SIZE / 2,
+    height: CONTAINER_SIZE,
+    justifyContent: 'center',
+    minWidth: CONTAINER_SIZE,
+    paddingHorizontal: CONTAINER_HORIZONTAL_PADDING,
+  },
+  text: { fontSize: 16, fontWeight: '600' },
+});

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -3,7 +3,6 @@ import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
-import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 import {
   FileUpload,
   MessageInputContextValue,
@@ -15,8 +14,6 @@ import {
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Close } from '../../icons/Close';
-import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -27,6 +24,9 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { FileState, ProgressIndicatorTypes } from '../../utils/utils';
+
+import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 
 const FILE_PREVIEW_HEIGHT = 60;
 
@@ -102,7 +102,7 @@ const FileUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { black, grey, grey_whisper, overlay_dark },
+      colors: { black, grey, grey_whisper, overlay },
       messageInput: {
         fileUploadPreview: {
           dismiss,
@@ -182,7 +182,7 @@ const FileUploadPreviewWithContext = <
           onPress={() => {
             removeFile(item.id);
           }}
-          style={[styles.dismiss, { backgroundColor: overlay_dark }, dismiss]}
+          style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
           testID='remove-file-upload-preview'
         >
           <Close />