stream-chat-react-native-core 6.0.2-beta.1 → 6.1.0-beta.1

package/src/components/Channel/hooks/useTargetedMessage.ts

@@ -2,16 +2,21 @@ import { useEffect, useRef, useState } from 'react';
 
 export const useTargetedMessage = (messageId?: string) => {
   const clearTargetedMessageCall = useRef<ReturnType<typeof setTimeout>>();
-  const [targetedMessage, setTargetedMessage] = useState(messageId);
+  const [targetedMessage, setTargetedMessage] = useState<string | undefined>(messageId);
+  const [highlightedMessageId, setHighlightedMessageId] = useState<string | undefined>();
   const prevTargetedMessageRef = useRef<string>();
 
   useEffect(() => {
     prevTargetedMessageRef.current = targetedMessage;
+    if (targetedMessage) {
+      setHighlightedMessageId(targetedMessage);
+    }
   }, [targetedMessage]);
 
   useEffect(() => {
     clearTargetedMessageCall.current = setTimeout(() => {
       setTargetedMessage(undefined);
+      setHighlightedMessageId(undefined);
     }, 3000);
 
     return () => {
@@ -19,17 +24,19 @@ export const useTargetedMessage = (messageId?: string) => {
     };
   }, []);
 
-  const setTargetedMessageTimeoutRef = useRef((messageId: string) => {
+  const setTargetedMessageTimeoutRef = useRef((messageId: string | undefined) => {
     clearTargetedMessageCall.current && clearTimeout(clearTargetedMessageCall.current);
 
     clearTargetedMessageCall.current = setTimeout(() => {
       setTargetedMessage(undefined);
+      setHighlightedMessageId(undefined);
     }, 3000);
 
     setTargetedMessage(messageId);
   });
 
   return {
+    highlightedMessageId,
     prevTargetedMessage: prevTargetedMessageRef.current,
     setTargetedMessage: setTargetedMessageTimeoutRef.current,
     targetedMessage,

package/src/components/Chat/hooks/handleEventToSyncDB.ts

@@ -77,7 +77,7 @@ export const handleEventToSyncDB = async <
     return createQueries(flush);
   };
 
-  if (type === 'message.read') {
+  if (type === 'message.read' || type === 'notification.mark_read') {
     const cid = event.cid;
     const user = event.user;
     if (user?.id && cid) {
@@ -88,6 +88,7 @@ export const handleEventToSyncDB = async <
           reads: [
             {
               last_read: event.received_at as string,
+              last_read_message_id: event.last_read_message_id,
               unread_messages: 0,
               user,
             },
@@ -97,6 +98,27 @@ export const handleEventToSyncDB = async <
     }
   }
 
+  if (type === 'notification.mark_unread') {
+    const cid = event.cid;
+    const user = event.user;
+    if (user?.id && cid) {
+      return await queriesWithChannelGuard((flushOverride) =>
+        upsertReads({
+          cid,
+          flush: flushOverride,
+          reads: [
+            {
+              last_read: event.received_at as string,
+              last_read_message_id: event.last_read_message_id,
+              unread_messages: event.unread_messages,
+              user,
+            },
+          ],
+        }),
+      );
+    }
+  }
+
   if (type === 'message.new') {
     const message = event.message;
 

package/src/components/Message/Message.tsx

@@ -110,6 +110,7 @@ export type MessageActionHandlers<
   deleteMessage: () => void;
   editMessage: () => void;
   flagMessage: () => void;
+  markUnread: () => Promise<void>;
   pinMessage: () => Promise<void>;
   quotedReply: () => void;
   resendMessage: () => Promise<void>;
@@ -145,6 +146,7 @@ export type MessagePropsWithContext<
     | 'handleDelete'
     | 'handleEdit'
     | 'handleFlag'
+    | 'handleMarkUnread'
     | 'handleMute'
     | 'handlePinMessage'
     | 'handleQuotedReply'
@@ -223,6 +225,7 @@ const MessageWithContext = <
     handleDelete,
     handleEdit,
     handleFlag,
+    handleMarkUnread,
     handleMute,
     handlePinMessage,
     handleQuotedReply,
@@ -472,6 +475,7 @@ const MessageWithContext = <
     handleDeleteMessage,
     handleEditMessage,
     handleFlagMessage,
+    handleMarkUnreadMessage,
     handleQuotedReplyMessage,
     handleResendMessage,
     handleToggleBanUser,
@@ -499,6 +503,7 @@ const MessageWithContext = <
     editMessage,
     flagMessage,
     handleReaction,
+    markUnread,
     muteUser,
     pinMessage,
     quotedReply,
@@ -517,6 +522,7 @@ const MessageWithContext = <
     handleDelete,
     handleEdit,
     handleFlag,
+    handleMarkUnread,
     handleMute,
     handlePinMessage,
     handleQuotedReply,
@@ -552,6 +558,7 @@ const MessageWithContext = <
           flagMessage,
           isMyMessage,
           isThreadMessage,
+          markUnread,
           message,
           muteUser,
           ownCapabilities,
@@ -568,6 +575,7 @@ const MessageWithContext = <
     deleteMessage: handleDeleteMessage,
     editMessage: handleEditMessage,
     flagMessage: handleFlagMessage,
+    markUnread: handleMarkUnreadMessage,
     pinMessage: handleTogglePinMessage,
     quotedReply: handleQuotedReplyMessage,
     resendMessage: handleResendMessage,

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

@@ -48,27 +48,27 @@ export const useMessageActionHandlers = <
   );
 
   const handleCopyMessage = () => {
-    setClipboardString(message.text || '');
+    if (!message.text) return;
+    setClipboardString(message.text);
   };
 
   const handleDeleteMessage = () => {
-    if (message.id) {
-      Alert.alert(
-        t('Delete Message'),
-        t('Are you sure you want to permanently delete this message?'),
-        [
-          { style: 'cancel', text: t('Cancel') },
-          {
-            onPress: async () => {
-              await deleteMessage(message as MessageResponse<StreamChatGenerics>);
-            },
-            style: 'destructive',
-            text: t('Delete'),
+    if (!message.id) return;
+    Alert.alert(
+      t('Delete Message'),
+      t('Are you sure you want to permanently delete this message?'),
+      [
+        { style: 'cancel', text: t('Cancel') },
+        {
+          onPress: async () => {
+            await deleteMessage(message as MessageResponse<StreamChatGenerics>);
           },
-        ],
-        { cancelable: false },
-      );
-    }
+          style: 'destructive',
+          text: t('Delete'),
+        },
+      ],
+      { cancelable: false },
+    );
   };
 
   const handleToggleMuteUser = async () => {
@@ -110,31 +110,44 @@ export const useMessageActionHandlers = <
   };
 
   const handleFlagMessage = () => {
+    if (!message.id) return;
+    Alert.alert(
+      t('Flag Message'),
+      t('Do you want to send a copy of this message to a moderator for further investigation?'),
+      [
+        { style: 'cancel', text: t('Cancel') },
+        {
+          onPress: async () => {
+            try {
+              await client.flagMessage(message.id);
+              Alert.alert(t('Message flagged'), t('The message has been reported to a moderator.'));
+            } catch (error) {
+              console.log('Error flagging message:', error);
+              Alert.alert(
+                t('Cannot Flag Message'),
+                t(
+                  'Flag action failed either due to a network issue or the message is already flagged',
+                ),
+              );
+            }
+          },
+          text: t('Flag'),
+        },
+      ],
+      { cancelable: false },
+    );
+  };
+
+  const handleMarkUnreadMessage = async () => {
+    if (!message.id) return;
     try {
-      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?'),
-          [
-            { style: 'cancel', text: t('Cancel') },
-            {
-              onPress: async () => {
-                await client.flagMessage(message.id);
-                Alert.alert(
-                  t('Message flagged'),
-                  t('The message has been reported to a moderator.'),
-                );
-              },
-              text: t('Flag'),
-            },
-          ],
-          { cancelable: false },
-        );
-      }
-    } catch (_) {
+      await channel.markUnread({ message_id: message.id });
+    } catch (error) {
+      console.log('Error marking message as unread:', error);
       Alert.alert(
-        t('Cannot Flag Message'),
-        t('Flag action failed either due to a network issue or the message is already flagged'),
+        t(
+          'Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.',
+        ),
       );
     }
   };
@@ -173,6 +186,7 @@ export const useMessageActionHandlers = <
     handleDeleteMessage,
     handleEditMessage,
     handleFlagMessage,
+    handleMarkUnreadMessage,
     handleQuotedReplyMessage,
     handleResendMessage,
     handleToggleBanUser,

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

@@ -20,6 +20,7 @@ import {
   Resend,
   ThreadReply,
   Unpin,
+  UnreadIndicator,
   UserDelete,
 } from '../../../icons';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
@@ -41,6 +42,7 @@ export type MessageActionsHookProps<
   | 'handleEdit'
   | 'handleFlag'
   | 'handleQuotedReply'
+  | 'handleMarkUnread'
   | 'handleMute'
   | 'handlePinMessage'
   | 'handleRetry'
@@ -77,6 +79,7 @@ export const useMessageActions = <
   handleDelete,
   handleEdit,
   handleFlag,
+  handleMarkUnread,
   handleMute,
   handlePinMessage,
   handleQuotedReply,
@@ -104,6 +107,7 @@ export const useMessageActions = <
     handleDeleteMessage,
     handleEditMessage,
     handleFlagMessage,
+    handleMarkUnreadMessage,
     handleQuotedReplyMessage,
     handleResendMessage,
     handleToggleBanUser,
@@ -195,6 +199,32 @@ export const useMessageActions = <
     title: t('Edit Message'),
   };
 
+  const flagMessage: MessageActionType = {
+    action: () => {
+      dismissOverlay();
+      if (handleFlag) {
+        handleFlag(message);
+      }
+      handleFlagMessage();
+    },
+    actionType: 'flagMessage',
+    icon: <MessageFlag pathFill={grey} />,
+    title: t('Flag Message'),
+  };
+
+  const markUnread: MessageActionType = {
+    action: () => {
+      dismissOverlay();
+      if (handleMarkUnread) {
+        handleMarkUnread(message);
+      }
+      handleMarkUnreadMessage();
+    },
+    actionType: 'markUnread',
+    icon: <UnreadIndicator fill={grey} size={24} />,
+    title: t('Mark as Unread'),
+  };
+
   const pinMessage: MessageActionType = {
     action: () => {
       dismissOverlay();
@@ -221,20 +251,6 @@ export const useMessageActions = <
     title: t('Unpin from Conversation'),
   };
 
-  const flagMessage: MessageActionType = {
-    action: () => {
-      dismissOverlay();
-      if (handleFlag) {
-        handleFlag(message);
-      }
-
-      handleFlagMessage();
-    },
-    actionType: 'flagMessage',
-    icon: <MessageFlag pathFill={grey} />,
-    title: t('Flag Message'),
-  };
-
   const handleReaction = !error
     ? selectReaction
       ? selectReaction(message)
@@ -311,6 +327,7 @@ export const useMessageActions = <
     editMessage,
     flagMessage,
     handleReaction,
+    markUnread,
     muteUser,
     pinMessage,
     quotedReply,

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

@@ -15,6 +15,7 @@ export type MessageActionsParams<
   error: boolean | Error;
   flagMessage: MessageActionType;
   isThreadMessage: boolean;
+  markUnread: MessageActionType;
   muteUser: MessageActionType;
   ownCapabilities: OwnCapabilitiesContextValue;
   pinMessage: MessageActionType;
@@ -43,6 +44,7 @@ export const messageActions = <
   flagMessage,
   isMyMessage,
   isThreadMessage,
+  markUnread,
   message,
   ownCapabilities,
   pinMessage,
@@ -77,6 +79,10 @@ export const messageActions = <
     actions.push(editMessage);
   }
 
+  if (ownCapabilities.readEvents && !error && !isThreadMessage) {
+    actions.push(markUnread);
+  }
+
   if (isClipboardAvailable() && message.text && !error) {
     actions.push(copyMessage);
   }

package/src/components/MessageList/InlineUnreadIndicator.tsx

@@ -1,47 +1,38 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { useViewport } from '../../hooks/useViewport';
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 10,
-    width: '100%',
-  },
-  text: {
-    fontSize: 12,
-  },
-});
 
 export const InlineUnreadIndicator = () => {
   const {
     theme: {
-      colors: { bg_gradient_end, bg_gradient_start, grey },
+      colors: { grey, light_gray },
       messageList: {
         inlineUnreadIndicator: { container, text },
       },
     },
   } = useTheme();
   const { t } = useTranslationContext();
-  const { vw } = useViewport();
 
   return (
-    <View style={[styles.container, container]}>
-      <Svg height={24} style={{ position: 'absolute' }} width={vw(100)}>
-        <Rect fill='url(#gradient)' height={24} width={vw(100)} x={0} y={0} />
-        <Defs>
-          <LinearGradient gradientUnits='userSpaceOnUse' id='gradient' x1={0} x2={0} y1={24} y2={0}>
-            <Stop offset={1} stopColor={bg_gradient_end} stopOpacity={1} />
-            <Stop offset={0} stopColor={bg_gradient_start} stopOpacity={1} />
-          </LinearGradient>
-        </Defs>
-      </Svg>
+    <View
+      accessibilityLabel='Inline unread indicator'
+      style={[styles.container, { backgroundColor: light_gray }, container]}
+    >
       <Text style={[styles.text, { color: grey }, text]}>{t<string>('Unread Messages')}</Text>
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 2,
+    padding: 10,
+  },
+  text: {
+    fontSize: 12,
+  },
+});