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

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
-import { GestureResponderEvent, Linking, Text, View } from 'react-native';
-import anchorme from 'anchorme';
-import truncate from 'lodash/truncate';
+import React, { PropsWithChildren } from 'react';
+import { GestureResponderEvent, Linking, Text, TextProps, View, ViewProps } from 'react-native';
+
 // @ts-expect-error
 import Markdown from 'react-native-markdown-package';
+
+import truncate from 'lodash/truncate';
 import {
   DefaultRules,
   defaultRules,
@@ -11,11 +12,15 @@ import {
   ParseFunction,
   parseInline,
   ReactNodeOutput,
+  ReactOutput,
   SingleASTNode,
+  State,
 } from 'simple-markdown';
 
-import type { MessageType } from '../../../MessageList/hooks/useMessageList';
+import { parseLinksFromText } from './parseLinks';
 
+import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
+import type { Colors, MarkdownStyle } from '../../../../contexts/themeContext/utils/theme';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -26,8 +31,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../../types/types';
-import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
-import type { Colors, MarkdownStyle } from '../../../../contexts/themeContext/utils/theme';
+import type { MessageType } from '../../../MessageList/hooks/useMessageList';
 
 const defaultMarkdownStyles: MarkdownStyle = {
   inlineCode: {
@@ -51,7 +55,6 @@ const defaultMarkdownStyles: MarkdownStyle = {
   mentions: {
     fontWeight: '700',
   },
-  // unfortunately marginVertical doesn't override the defaults for these within the 3rd party lib
   paragraph: {
     marginBottom: 8,
     marginTop: 8,
@@ -88,6 +91,7 @@ export type RenderTextParams<
   markdownRules?: MarkdownRules;
   markdownStyles?: MarkdownStyle;
   messageOverlay?: boolean;
+  messageTextNumberOfLines?: number;
   onLink?: (url: string) => Promise<void>;
   onlyEmojis?: boolean;
 };
@@ -109,6 +113,7 @@ export const renderText = <
     markdownStyles,
     message,
     messageOverlay,
+    messageTextNumberOfLines,
     onLink: onLinkParams,
     onLongPress: onLongPressParam,
     onlyEmojis,
@@ -123,20 +128,19 @@ export const renderText = <
   if (!text) return null;
 
   let newText = text.trim();
-  const urls = anchorme(newText, {
-    list: true,
-  });
+  const urls = parseLinksFromText(newText);
 
   for (const urlInfo of urls) {
-    const displayLink = truncate(urlInfo.encoded.replace(/^(www\.)/, ''), {
+    const displayLink = truncate(urlInfo.encoded, {
       length: 200,
       omission: '...',
     });
-    const markdown = `[${displayLink}](${urlInfo.protocol}${urlInfo.encoded})`;
+    const markdown = `[${displayLink}](${urlInfo.scheme}${urlInfo.encoded})`;
     newText = newText.replace(urlInfo.raw, markdown);
   }
 
   newText = newText.replace(/[<&"'>]/g, '\\$&');
+
   const styles: MarkdownStyle = {
     ...defaultMarkdownStyles,
     ...markdownStyles,
@@ -169,7 +173,7 @@ export const renderText = <
       ? onLinkParams(url)
       : Linking.canOpenURL(url).then((canOpenUrl) => canOpenUrl && Linking.openURL(url));
 
-  const react: ReactNodeOutput = (node, output, { ...state }) => {
+  const link: ReactNodeOutput = (node, output, { ...state }) => {
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({
@@ -202,6 +206,12 @@ export const renderText = <
     );
   };
 
+  const paragraphText: ReactNodeOutput = (node, output, { ...state }) => (
+    <Text key={state.key} numberOfLines={messageTextNumberOfLines} style={styles.paragraph}>
+      {output(node.content, state)}
+    </Text>
+  );
+
   const mentionedUsers = Array.isArray(mentioned_users)
     ? mentioned_users.reduce((acc, cur) => {
         const userName = cur.name || cur.id || '';
@@ -241,54 +251,18 @@ export const renderText = <
     );
   };
 
-  const listLevels = {
-    sub: 'sub',
-    top: 'top',
-  };
-
-  /**
-   * For lists and sublists, the default behavior of the markdown library we use is
-   * to always renumber any list, so all ordered lists start from 1.
-   *
-   * This custom rule overrides this behavior both for top level lists and sublists,
-   * in order to start the numbering from the number of the first list item provided.
-   * */
-  const customListAtLevel =
-    (level: keyof typeof listLevels): ReactNodeOutput =>
-    (node, output, { ...state }) => {
-      const items = node.items.map((item: Array<SingleASTNode>, index: number) => {
-        const withinList = item.length > 1 && item[1].type === 'list';
-        const content = output(item, { ...state, withinList });
-
-        const isTopLevelText =
-          ['text', 'paragraph', 'strong'].includes(item[0].type) && withinList === false;
-
-        return (
-          <View key={index} style={styles.listRow}>
-            <Text style={styles.listItemNumber}>
-              {node.ordered ? `${node.start + index}. ` : `\u2022`}
-            </Text>
-            <Text style={[styles.listItemText, isTopLevelText && { marginBottom: 0 }]}>
-              {content}
-            </Text>
-          </View>
-        );
-      });
-
-      const isSublist = level === 'sub';
-      return (
-        <View key={state.key} style={[isSublist ? styles.list : styles.sublist]}>
-          {items}
-        </View>
-      );
-    };
+  const list: ReactNodeOutput = (node, output, state) => (
+    <ListOutput node={node} output={output} state={state} styles={styles} />
+  );
 
   const customRules = {
-    link: { react },
-    list: { react: customListAtLevel('top') },
+    link: { link },
+    list: { react: list },
+    // Truncate long text content in the message overlay
+    paragraph: messageTextNumberOfLines ? { react: paragraphText } : {},
     // we have no react rendering support for reflinks
     reflink: { match: () => null },
-    sublist: { react: customListAtLevel('sub') },
+    sublist: { react: list },
     ...(mentionedUsers
       ? {
           mentions: {
@@ -317,3 +291,69 @@ export const renderText = <
     </Markdown>
   );
 };
+
+export interface ListOutputProps {
+  node: SingleASTNode;
+  output: ReactOutput;
+  state: State;
+  styles?: Partial<MarkdownStyle>;
+}
+
+/**
+ * For lists and sublists, the default behavior of the markdown library we use is
+ * to always renumber any list, so all ordered lists start from 1.
+ *
+ * This custom rule overrides this behavior both for top level lists and sublists,
+ * in order to start the numbering from the number of the first list item provided.
+ */
+export const ListOutput = ({ node, output, state, styles }: ListOutputProps) => {
+  let isSublist = state.withinList;
+  const parentTypes = ['text', 'paragraph', 'strong'];
+
+  return (
+    <View key={state.key} style={isSublist ? styles?.sublist : styles?.list}>
+      {node.items.map((item: SingleASTNode, index: number) => {
+        const indexAfterStart = node.start + index;
+
+        if (item === null) {
+          return (
+            <ListRow key={index} style={styles?.listRow} testID='list-item'>
+              <Bullet index={node.ordered && indexAfterStart} />
+            </ListRow>
+          );
+        }
+
+        isSublist = item.length > 1 && item[1].type === 'list';
+        const isSublistWithinText = parentTypes.includes((item[0] ?? {}).type) && isSublist;
+        const style = isSublistWithinText ? { marginBottom: 0 } : {};
+
+        return (
+          <ListRow key={index} style={styles?.listRow} testID='list-item'>
+            <Bullet index={node.ordered && indexAfterStart} />
+            <ListItem key={1} style={[styles?.listItemText, style]}>
+              {output(item, state)}
+            </ListItem>
+          </ListRow>
+        );
+      })}
+    </View>
+  );
+};
+
+interface BulletProps extends TextProps {
+  index?: number;
+}
+
+const Bullet = ({ index, style }: BulletProps) => (
+  <Text key={0} style={[style, defaultMarkdownStyles.listItemNumber]}>
+    {index ? `${index}. ` : '\u2022 '}
+  </Text>
+);
+
+const ListRow = (props: PropsWithChildren<ViewProps>) => (
+  <Text style={[props.style, defaultMarkdownStyles.listRow]}>{props.children}</Text>
+);
+
+const ListItem = ({ children, style }: PropsWithChildren<TextProps>) => (
+  <Text style={style}>{children}</Text>
+);

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -1,7 +1,5 @@
 import { useMemo } from 'react';
 
-import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
-
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type {
   DefaultAttachmentType,
@@ -13,6 +11,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
 
 export const useCreateMessageContext = <
   At extends UnknownType = DefaultAttachmentType,
@@ -25,7 +24,6 @@ export const useCreateMessageContext = <
 >({
   actionsEnabled,
   alignment,
-  canModifyMessage,
   channel,
   disabled,
   files,
@@ -55,7 +53,6 @@ export const useCreateMessageContext = <
   otherAttachments,
   preventPress,
   reactions,
-  readEventsEnabled,
   showAvatar,
   showMessageOverlay,
   showMessageStatus,
@@ -78,7 +75,6 @@ export const useCreateMessageContext = <
     () => ({
       actionsEnabled,
       alignment,
-      canModifyMessage,
       channel,
       disabled,
       files,
@@ -108,7 +104,6 @@ export const useCreateMessageContext = <
       otherAttachments,
       preventPress,
       reactions,
-      readEventsEnabled,
       showAvatar,
       showMessageOverlay,
       showMessageStatus,
@@ -127,7 +122,6 @@ export const useCreateMessageContext = <
       membersValue,
       messageValue,
       reactionsValue,
-      readEventsEnabled,
       showAvatar,
       showMessageStatus,
       threadList,

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -0,0 +1,172 @@
+import type { MessageResponse, Reaction } from 'stream-chat';
+
+import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
+import type {
+  MessageContextValue,
+  Reactions,
+} from '../../../contexts/messageContext/MessageContext';
+import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
+
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../../types/types';
+import { MessageStatusTypes } from '../../../utils/utils';
+
+export const useMessageActionHandlers = <
+  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,
+  message,
+  removeMessage,
+  retrySendMessage,
+  setEditingState,
+  setQuotedMessageState,
+  supportedReactions,
+  updateMessage,
+}: Pick<
+  MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  | 'removeMessage'
+  | 'retrySendMessage'
+  | 'setEditingState'
+  | 'setQuotedMessageState'
+  | 'supportedReactions'
+  | 'updateMessage'
+> &
+  Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'channel' | 'enforceUniqueReaction'> &
+  Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &
+  Pick<MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'message'>) => {
+  const handleResendMessage = () =>
+    retrySendMessage(message as MessageResponse<At, Ch, Co, Me, Re, Us>);
+
+  const handleQuotedReplyMessage = () => {
+    setQuotedMessageState(message);
+  };
+
+  const isMuted = (client.mutedUsers || []).some(
+    (mute) => mute.user.id === client.userID && mute.target.id === message.user?.id,
+  );
+
+  const handleDeleteMessage = async () => {
+    if (message.status === MessageStatusTypes.FAILED) {
+      removeMessage(message);
+    } else {
+      const data = await client.deleteMessage(message.id);
+      updateMessage(data.message);
+    }
+  };
+
+  const handleToggleMuteUser = async () => {
+    if (!message.user?.id) {
+      return;
+    }
+
+    if (isMuted) {
+      await client.unmuteUser(message.user.id);
+    } else {
+      await client.muteUser(message.user.id);
+    }
+  };
+
+  const handleToggleBanUser = async () => {
+    const messageUser = message.user;
+    if (!messageUser) {
+      return;
+    }
+
+    if (messageUser.banned) {
+      await client.unbanUser(messageUser.id);
+    } else {
+      await client.banUser(messageUser.id);
+    }
+  };
+
+  const handleTogglePinMessage = async () => {
+    const MessagePinnedHeaderStatus = message.pinned;
+    if (!MessagePinnedHeaderStatus) {
+      await client.pinMessage(message, null);
+    } else {
+      await client.unpinMessage(message);
+    }
+  };
+
+  const handleEditMessage = () => {
+    setEditingState(message);
+  };
+
+  const clientId = client.userID;
+  const isMessageTypeDeleted = message.type === 'deleted';
+
+  const hasReactions =
+    !isMessageTypeDeleted && !!message.latest_reactions && message.latest_reactions.length > 0;
+
+  const reactions = hasReactions
+    ? supportedReactions.reduce((acc, cur) => {
+        const reactionType = cur.type;
+        const reactionsOfReactionType = message.latest_reactions?.filter(
+          (reaction) => reaction.type === reactionType,
+        );
+
+        if (reactionsOfReactionType?.length) {
+          const hasOwnReaction = reactionsOfReactionType.some(
+            (reaction) => reaction.user_id === clientId,
+          );
+          acc.push({ own: hasOwnReaction, type: reactionType });
+        }
+
+        return acc;
+      }, [] as Reactions)
+    : [];
+
+  const handleToggleReaction = async (reactionType: string) => {
+    const messageId = message.id;
+    const ownReaction = !!reactions.find(
+      (reaction) => reaction.own && reaction.type === reactionType,
+    );
+
+    // Change reaction in local state, make API call in background, revert to old message if fails
+    try {
+      if (channel && messageId) {
+        if (ownReaction) {
+          await channel.deleteReaction(messageId, reactionType);
+        } else {
+          await channel.sendReaction(
+            messageId,
+            {
+              type: reactionType,
+            } as Reaction<Re, Us>,
+            { enforce_unique: enforceUniqueReaction },
+          );
+        }
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return {
+    handleDeleteMessage,
+    handleEditMessage,
+    handleQuotedReplyMessage,
+    handleResendMessage,
+    handleToggleBanUser,
+    handleToggleMuteUser,
+    handleTogglePinMessage,
+    handleToggleReaction,
+  };
+};