stream-chat-react-native-core 4.1.1 → 4.1.3-beta.1

package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Text } from 'react-native';
+
+import { act } from 'react-test-renderer';
+
+import { render, waitFor } from '@testing-library/react-native';
+import type { Channel, ChannelResponse, Event, StreamChat } from 'stream-chat';
+
+import { ChatContext, useChannelUpdated } from '../../../../../index';
+
+describe('useChannelUpdated', () => {
+  it("defaults to the channels own_capabilities if the event doesn't include it", async () => {
+    let eventHanler: (event: Event) => void;
+    const mockChannel = {
+      cid: 'channeltype:123abc',
+      data: {
+        own_capabilities: {
+          send_messages: true,
+        },
+      },
+    } as unknown as Channel;
+
+    const mockEvent = {
+      channel: {
+        cid: mockChannel.cid,
+      } as ChannelResponse,
+      type: 'channel.updated' as Event['type'],
+    };
+
+    const mockClient = {
+      off: jest.fn(),
+      on: jest.fn().mockImplementation((_eventName: string, handler: (event: Event) => void) => {
+        eventHanler = handler;
+      }),
+    } as unknown as StreamChat;
+
+    const TestComponent = () => {
+      const [channels, setChannels] = useState<Channel[]>([mockChannel]);
+
+      useChannelUpdated({ setChannels });
+
+      if (
+        channels[0].data?.own_capabilities &&
+        Object.keys(channels[0].data?.own_capabilities as { [key: string]: boolean }).includes(
+          'send_messages',
+        )
+      ) {
+        return <Text>Send messages enabled</Text>;
+      }
+
+      return <Text>Send messages NOT enabled</Text>;
+    };
+
+    const { getByText } = await waitFor(() =>
+      render(
+        <ChatContext.Provider
+          value={{
+            client: mockClient,
+            connectionRecovering: false,
+            isOnline: true,
+            mutedUsers: [],
+            setActiveChannel: () => null,
+          }}
+        >
+          <TestComponent />
+        </ChatContext.Provider>,
+      ),
+    );
+
+    await waitFor(() => {
+      expect(getByText('Send messages enabled')).toBeTruthy();
+    });
+
+    act(() => {
+      eventHanler(mockEvent);
+    });
+
+    await waitFor(() => {
+      expect(getByText('Send messages enabled')).toBeTruthy();
+    });
+  });
+});

package/src/components/ChannelList/hooks/listeners/useChannelUpdated.ts

@@ -33,8 +33,14 @@ export const useChannelUpdated = <
             (channel) => channel.cid === (event.cid || event.channel?.cid),
           );
           if (index >= 0 && event.channel) {
-            channels[index].data = event.channel;
+            channels[index].data = {
+              ...event.channel,
+              hidden: event.channel?.hidden ?? channels[index].data?.hidden,
+              own_capabilities:
+                event.channel?.own_capabilities ?? channels[index].data?.own_capabilities,
+            };
           }
+
           return [...channels];
         });
       }

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

@@ -61,6 +61,7 @@ export const usePaginatedChannels = <
 
     const hasUpdatedData =
       queryType === 'loadChannels' ||
+      queryType === 'refresh' ||
       [
         JSON.stringify(filtersRef.current) !== JSON.stringify(filters),
         JSON.stringify(sortRef.current) !== JSON.stringify(sort),

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -73,10 +73,16 @@ export type ChannelPreviewMessengerPropsWithContext<
      *    bold: true,
      *    text: 'This is the message preview text'
      *  },
-     *  status: 0 | 1 | 2 // read states of latest message.
+     *  status: 0 | 1 | 2 // read states of the latest message.
      * }
      * ```
      *
+     * The read status is either of the following:
+     *
+     * 0: The message was not sent by the current user
+     * 1: The message was sent by the current user and is unread
+     * 2: The message was sent by the current user and is read
+     *
      * @overrideType object
      */
     latestMessagePreview: LatestMessagePreview<StreamChatGenerics>;

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import type { ChannelPreviewProps } from './ChannelPreview';
-
 import type { ChannelPreviewMessengerPropsWithContext } from './ChannelPreviewMessenger';
+import { MessageReadStatus } from './hooks/useLatestMessagePreview';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Check, CheckAll } from '../../icons';
@@ -48,9 +48,9 @@ export const ChannelPreviewStatus = <
 
   return (
     <View style={styles.flexRow}>
-      {status === 2 ? (
+      {status === MessageReadStatus.READ ? (
         <CheckAll pathFill={accent_blue} {...checkAllIcon} />
-      ) : status === 1 ? (
+      ) : status === MessageReadStatus.UNREAD ? (
         <Check pathFill={grey} {...checkIcon} />
       ) : null}
       <Text style={[styles.date, { color: grey }, date]}>

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -115,12 +115,12 @@ const getLatestMessageDisplayDate = <
   return parserOutput;
 };
 
-/**
- * set up enum
- * 0 = latest message is not current user's message
- * 1 = nobody has read latest message which is the current user's message
- * 2 = someone has read latest message which is the current user's message
- */
+export enum MessageReadStatus {
+  NOT_SENT_BY_CURRENT_USER = 0,
+  UNREAD = 1,
+  READ = 2,
+}
+
 const getLatestMessageReadStatus = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -128,9 +128,11 @@ const getLatestMessageReadStatus = <
   client: StreamChat<StreamChatGenerics>,
   message: LatestMessage<StreamChatGenerics> | undefined,
   readEvents: boolean,
-) => {
+): MessageReadStatus => {
   const currentUserId = client.userID;
-  if (!message || currentUserId !== message.user?.id || readEvents === false) return 0;
+  if (!message || currentUserId !== message.user?.id || readEvents === false) {
+    return MessageReadStatus.NOT_SENT_BY_CURRENT_USER;
+  }
 
   const readList = channel.state.read;
   if (currentUserId) {
@@ -146,8 +148,8 @@ const getLatestMessageReadStatus = <
   return Object.values(readList).some(
     ({ last_read }) => messageUpdatedAt && messageUpdatedAt < last_read,
   )
-    ? 2
-    : 1;
+    ? MessageReadStatus.READ
+    : MessageReadStatus.UNREAD;
 };
 
 const getLatestMessagePreview = <
@@ -176,7 +178,7 @@ const getLatestMessagePreview = <
           text: t('Nothing yet...'),
         },
       ],
-      status: 0,
+      status: MessageReadStatus.NOT_SENT_BY_CURRENT_USER,
     };
   }
   const message = lastMessage || messages.length ? messages[messages.length - 1] : undefined;
@@ -229,7 +231,7 @@ export const useLatestMessagePreview = <
         text: '',
       },
     ],
-    status: 0,
+    status: MessageReadStatus.NOT_SENT_BY_CURRENT_USER,
   });
 
   const readStatus = getLatestMessageReadStatus(

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -100,8 +100,8 @@ export type MessageOverlayPropsWithContext<
     | 'message'
     | 'messageReactions'
     | 'messageTextNumberOfLines'
-    | 'overlayOpacity'
   > & {
+    overlayOpacity: Animated.SharedValue<number>;
     showScreen?: Animated.SharedValue<number>;
   };
 

package/src/contexts/index.ts

@@ -13,6 +13,7 @@ export * from './messagesContext/MessagesContext';
 export * from './paginatedMessageListContext/PaginatedMessageListContext';
 export * from './overlayContext/OverlayContext';
 export * from './overlayContext/OverlayProvider';
+export * from './ownCapabilitiesContext/OwnCapabilitiesContext';
 export * from './suggestionsContext/SuggestionsContext';
 export * from './themeContext/ThemeContext';
 export * from './themeContext/utils/theme';

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import type Animated from 'react-native-reanimated';
 
 import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 
@@ -53,7 +52,6 @@ export type OverlayProviderProps<
     >
   > &
   Pick<OverlayContextValue, 'translucentStatusBar'> & {
-    overlayOpacity: Animated.SharedValue<number>;
     closePicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
     error?: boolean | Error;
     /** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.1.1"
+  "version": "4.1.3-beta.1"
 }