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

package/src/components/MessageInput/__tests__/__snapshots__/UploadProgressIndicator.test.js.snap

@@ -24,7 +24,7 @@ exports[`UploadProgressIndicator should render an active IN_PROGRESS UploadProgr
           "width": "100%",
         },
         Object {
-          "backgroundColor": "#00000033",
+          "backgroundColor": "#000000CC",
         },
         Object {},
       ]
@@ -41,7 +41,7 @@ exports[`UploadProgressIndicator should render an active IN_PROGRESS UploadProgr
           "width": "100%",
         },
         Object {
-          "backgroundColor": "#00000033",
+          "backgroundColor": "#000000CC",
         },
         Object {},
       ]
@@ -96,7 +96,7 @@ exports[`UploadProgressIndicator should render an active RETRY UploadProgressInd
           "width": "100%",
         },
         Object {
-          "backgroundColor": "#00000033",
+          "backgroundColor": "#000000CC",
         },
         Object {},
       ]
@@ -113,7 +113,7 @@ exports[`UploadProgressIndicator should render an active RETRY UploadProgressInd
           "width": "100%",
         },
         Object {
-          "backgroundColor": "#00000033",
+          "backgroundColor": "#000000CC",
         },
         Object {},
       ]

package/src/components/MessageInput/hooks/useCooldown.ts

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+
+import { BuiltinRoles, ChannelResponse, Role } from 'stream-chat';
+
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+} from '../../../types/types';
+import { ONE_SECOND_IN_MS } from '../../../utils/date';
+
+type Roles = Array<Role>;
+
+/**
+ * useCooldown can be used to start a cooldown defined
+ * for a Channel by setting an end time for
+ **/
+export const useCooldown = <
+  At extends DefaultAttachmentType = DefaultAttachmentType,
+  Ch extends DefaultChannelType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends DefaultEventType = DefaultEventType,
+  Me extends DefaultMessageType = DefaultMessageType,
+  Re extends DefaultReactionType = DefaultReactionType,
+  Us extends DefaultUserType = DefaultUserType,
+>() => {
+  const [endsAt, setEndsAt] = useState(new Date());
+
+  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { channel } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { cooldown } = (channel?.data || {}) as ChannelResponse<Ch, Co, Us>;
+  const interval: number = cooldown ?? 0;
+
+  /**
+   * We get the roles a user has globally set on the Client, and the role
+   * they have locally within the chat. If any of the predefined
+   * `disabledRoles` are matched to either of the users roles, the user
+   * will not have a cooldown at all.
+   **/
+  const disabledRoles = [BuiltinRoles.Admin, BuiltinRoles.ChannelModerator];
+  const userClientRole = client?.user?.role || '';
+  const userChannelRole = channel?.state.members[client.userID || '']?.role || '';
+
+  const disabledFor = (roles: Roles) =>
+    disabledRoles.some((roleToSkip) => roles.includes(roleToSkip));
+
+  const enabled = interval > 0 && !disabledFor([userClientRole, userChannelRole]);
+
+  const start = () => {
+    if (enabled) {
+      setEndsAt(new Date(Date.now() + interval * ONE_SECOND_IN_MS));
+    }
+  };
+
+  return { endsAt, start };
+};

package/src/components/MessageInput/hooks/useCountdown.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+
+import { ONE_SECOND_IN_MS, secondsUntil } from '../../../utils/date';
+
+/**
+ * Start a countdown to a set date, in seconds.
+ * The date passed in as an argument to useCountdown
+ * will be rounded up to the nearest second.
+ **/
+export const useCountdown = (end: Date) => {
+  const [seconds, setSeconds] = useState(0);
+
+  /**
+   * When a new `end` is set for the countdown, start the counter if
+   * the `end` is in the future.
+   **/
+  useEffect(() => {
+    let intervalId: NodeJS.Timer;
+
+    const startCountdown = (seconds: number) => {
+      setSeconds(seconds);
+      intervalId = setInterval(() => {
+        setSeconds((previous: number) => {
+          const next = previous - 1;
+          if (next < 1) {
+            /* Don't trigger an unnecessary rerender when done */
+            clearInterval(intervalId);
+            return 0;
+          }
+          return next;
+        });
+      }, ONE_SECOND_IN_MS);
+    };
+
+    const secondsUntilEnd = secondsUntil(end);
+    if (secondsUntilEnd > 0) {
+      startCountdown(secondsUntilEnd);
+    }
+
+    return () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [end]);
+
+  return { seconds };
+};

package/src/components/MessageList/DateHeader.tsx

@@ -27,13 +27,13 @@ export type DateHeaderProps = {
 export const DateHeader: React.FC<DateHeaderProps> = ({ dateString }) => {
   const {
     theme: {
-      colors: { overlay_dark, white },
+      colors: { overlay, white },
       dateHeader: { container, text },
     },
   } = useTheme();
 
   return (
-    <View style={[styles.container, { backgroundColor: overlay_dark }, container]}>
+    <View style={[styles.container, { backgroundColor: overlay }, container]}>
       <Text style={[styles.text, { color: white }, text]}>{dateString}</Text>
     </View>
   );

package/src/components/MessageList/InlineDateSeparator.tsx

@@ -31,7 +31,7 @@ export type InlineDateSeparatorProps = {
 export const InlineDateSeparator: React.FC<InlineDateSeparatorProps> = ({ date }) => {
   const {
     theme: {
-      colors: { overlay_dark, white },
+      colors: { overlay, white },
       inlineDateSeparator: { container, text },
     },
   } = useTheme();
@@ -49,7 +49,7 @@ export const InlineDateSeparator: React.FC<InlineDateSeparatorProps> = ({ date }
 
   return (
     <View
-      style={[styles.container, { backgroundColor: overlay_dark }, container]}
+      style={[styles.container, { backgroundColor: overlay }, container]}
       testID='date-separator'
     >
       <Text style={[styles.text, { color: white }, text]}>{dateString}</Text>

package/src/components/MessageList/MessageList.tsx

@@ -8,6 +8,8 @@ import {
   ViewToken,
 } from 'react-native';
 
+import type { Channel as StreamChannel } from 'stream-chat';
+
 import {
   isMessageWithStylesReadByAndDateSeparator,
   MessageType,
@@ -43,16 +45,14 @@ import {
   PaginatedMessageListContextValue,
   usePaginatedMessageListContext,
 } from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
-import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
+import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 import {
   isDayOrMoment,
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import type { Channel as StreamChannel } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -142,7 +142,6 @@ type MessageListPropsWithContext<
     | 'setTargetedMessage'
     | 'StickyHeader'
     | 'targetedMessage'
-    | 'typingEventsEnabled'
   > &
   Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &
   Pick<ImageGalleryContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'setImages'> &
@@ -153,6 +152,7 @@ type MessageListPropsWithContext<
   Pick<OverlayContextValue, 'overlay'> &
   Pick<
     MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    | 'deletedMessagesVisibilityType'
     | 'DateHeader'
     | 'disableTypingIndicator'
     | 'FlatList'
@@ -204,6 +204,7 @@ type MessageListPropsWithContext<
     HeaderComponent?: React.ComponentType;
     /** Whether or not the FlatList is inverted. Defaults to true */
     inverted?: boolean;
+    isListActive?: boolean;
     /** Turn off grouping of messages by user */
     noGroupByUser?: boolean;
     onListScroll?: ScrollViewProps['onScroll'];
@@ -260,6 +261,7 @@ const MessageListWithContext = <
     client,
     closePicker,
     DateHeader,
+    deletedMessagesVisibilityType,
     disabled,
     disableTypingIndicator,
     EmptyStateIndicator,
@@ -271,6 +273,7 @@ const MessageListWithContext = <
     InlineDateSeparator,
     InlineUnreadIndicator,
     inverted = true,
+    isListActive = false,
     legacyImageViewerSwipeBehaviour,
     loadChannelAtMessage,
     loading,
@@ -300,7 +303,6 @@ const MessageListWithContext = <
     tDateTimeParser,
     thread,
     threadList = false,
-    typingEventsEnabled,
     TypingIndicator,
     TypingIndicatorContainer,
   } = props;
@@ -318,6 +320,7 @@ const MessageListWithContext = <
   );
 
   const messageList = useMessageList<At, Ch, Co, Ev, Me, Re, Us>({
+    deletedMessagesVisibilityType,
     inverted,
     noGroupByUser,
     threadList,
@@ -396,9 +399,11 @@ const MessageListWithContext = <
         item: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
       };
 
+      const isMessageTypeDeleted = lastItem.item.type === 'deleted';
+
       if (
         lastItem?.item?.created_at &&
-        !lastItem.item.deleted_at &&
+        !isMessageTypeDeleted &&
         typeof lastItem.item.created_at !== 'string' &&
         lastItem.item.created_at.toDateString() !== stickyHeaderDateRef.current?.toDateString()
       ) {
@@ -561,7 +566,9 @@ const MessageListWithContext = <
     if (message.type === 'system') {
       return (
         <>
-          <MessageSystem message={message} style={styles.messagePadding} />
+          <View testID={`message-list-item-${index}`}>
+            <MessageSystem message={message} style={styles.messagePadding} />
+          </View>
           {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
         </>
       );
@@ -571,43 +578,49 @@ const MessageListWithContext = <
     return wrapMessageInTheme ? (
       <>
         <ThemeProvider mergedStyle={modifiedTheme}>
+          <View testID={`message-list-item-${index}`}>
+            <Message
+              goToMessage={goToMessage}
+              groupStyles={
+                isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []
+              }
+              isTargetedMessage={targetedMessage === message.id}
+              lastReceivedId={lastReceivedId === message.id ? lastReceivedId : undefined}
+              message={message}
+              onThreadSelect={onThreadSelect}
+              showUnreadUnderlay={showUnreadUnderlay}
+              style={styles.messagePadding}
+              threadList={threadList}
+            />
+          </View>
+        </ThemeProvider>
+        {isMessageWithStylesReadByAndDateSeparator(message) && message.dateSeparator && (
+          <InlineDateSeparator date={message.dateSeparator} />
+        )}
+        {/* Adding indicator below the messages, since the list is inverted */}
+        {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
+      </>
+    ) : (
+      <>
+        <View testID={`message-list-item-${index}`}>
           <Message
             goToMessage={goToMessage}
             groupStyles={
               isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []
             }
-            lastReceivedId={lastReceivedId === message.id ? lastReceivedId : undefined}
+            isTargetedMessage={targetedMessage === message.id}
+            lastReceivedId={
+              lastReceivedId === message.id || message.quoted_message_id
+                ? lastReceivedId
+                : undefined
+            }
             message={message}
             onThreadSelect={onThreadSelect}
             showUnreadUnderlay={showUnreadUnderlay}
             style={styles.messagePadding}
-            targetedMessage={targetedMessage === message.id}
             threadList={threadList}
           />
-        </ThemeProvider>
-        {isMessageWithStylesReadByAndDateSeparator(message) && message.dateSeparator && (
-          <InlineDateSeparator date={message.dateSeparator} />
-        )}
-        {/* Adding indicator below the messages, since the list is inverted */}
-        {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
-      </>
-    ) : (
-      <>
-        <Message
-          goToMessage={goToMessage}
-          groupStyles={
-            isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []
-          }
-          lastReceivedId={
-            lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined
-          }
-          message={message}
-          onThreadSelect={onThreadSelect}
-          showUnreadUnderlay={showUnreadUnderlay}
-          style={styles.messagePadding}
-          targetedMessage={targetedMessage === message.id}
-          threadList={threadList}
-        />
+        </View>
         {isMessageWithStylesReadByAndDateSeparator(message) && message.dateSeparator && (
           <InlineDateSeparator date={message.dateSeparator} />
         )}
@@ -811,7 +824,8 @@ const MessageListWithContext = <
   const messagesWithImages =
     legacyImageViewerSwipeBehaviour &&
     messageList.filter((message) => {
-      if (!message.deleted_at && message.attachments) {
+      const isMessageTypeDeleted = message.type === 'deleted';
+      if (!isMessageTypeDeleted && message.attachments) {
         return message.attachments.some(
           (attachment) =>
             attachment.type === 'image' &&
@@ -843,11 +857,16 @@ const MessageListWithContext = <
   const threadExists = !!thread;
 
   useEffect(() => {
-    if (legacyImageViewerSwipeBehaviour && ((threadList && thread) || (!threadList && !thread))) {
+    if (
+      legacyImageViewerSwipeBehaviour &&
+      isListActive &&
+      ((threadList && thread) || (!threadList && !thread))
+    ) {
       setImages(messagesWithImages as MessageType<At, Ch, Co, Ev, Me, Re, Us>[]);
     }
   }, [
     imageString,
+    isListActive,
     legacyImageViewerSwipeBehaviour,
     numberOfMessagesWithImages,
     threadExists,
@@ -898,7 +917,10 @@ const MessageListWithContext = <
   }
 
   return (
-    <View style={[styles.container, { backgroundColor: white_snow }, container]}>
+    <View
+      style={[styles.container, { backgroundColor: white_snow }, container]}
+      testID='message-flat-list-wrapper'
+    >
       <FlatList
         contentContainerStyle={[styles.contentContainer, contentContainer]}
         data={messageList}
@@ -937,7 +959,7 @@ const MessageListWithContext = <
                 <DateHeader dateString={stickyHeaderDateToRender} />
               ) : null)}
           </View>
-          {!disableTypingIndicator && TypingIndicator && typingEventsEnabled !== false && (
+          {!disableTypingIndicator && TypingIndicator && (
             <TypingIndicatorContainer>
               <TypingIndicator />
             </TypingIndicatorContainer>
@@ -983,6 +1005,7 @@ export const MessageList = <
     enableMessageGroupingByUser,
     error,
     hideStickyDateHeader,
+    isChannelActive,
     loadChannelAtMessage,
     loading,
     LoadingIndicator,
@@ -993,12 +1016,12 @@ export const MessageList = <
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
-    typingEventsEnabled,
   } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { setImages } = useImageGalleryContext<At, Ch, Co, Ev, Me, Re, Us>();
   const {
     DateHeader,
+    deletedMessagesVisibilityType,
     disableTypingIndicator,
     FlatList,
     initialScrollToFirstUnreadMessage,
@@ -1024,6 +1047,7 @@ export const MessageList = <
         client,
         closePicker,
         DateHeader,
+        deletedMessagesVisibilityType,
         disabled,
         disableTypingIndicator,
         EmptyStateIndicator,
@@ -1034,6 +1058,7 @@ export const MessageList = <
         initialScrollToFirstUnreadMessage,
         InlineDateSeparator,
         InlineUnreadIndicator,
+        isListActive: isChannelActive,
         legacyImageViewerSwipeBehaviour,
         loadChannelAtMessage,
         loading,
@@ -1059,7 +1084,6 @@ export const MessageList = <
         targetedMessage,
         tDateTimeParser,
         thread,
-        typingEventsEnabled,
         TypingIndicator,
         TypingIndicatorContainer,
       }}

package/src/components/MessageList/MessageSystem.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
+import type { MessageType } from './hooks/useMessageList';
+
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import {
   isDayOrMoment,
@@ -8,8 +10,6 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import type { MessageType } from './hooks/useMessageList';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/MessageList/TypingIndicator.tsx

@@ -3,8 +3,6 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { useTypingString } from './hooks/useTypingString';
 
-import { LoadingDots } from '../Indicators/LoadingDots';
-
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 import type {
@@ -17,6 +15,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { LoadingDots } from '../Indicators/LoadingDots';
 
 const styles = StyleSheet.create({
   container: {