stream-chat-react-native-core 3.10.1 → 4.0.0-beta.2

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

@@ -22,26 +22,21 @@ export const useCreateMessagesContext = <
   Us extends UnknownType = DefaultUserType,
 >({
   additionalTouchableProps,
-  animatedLongPress,
   Attachment,
   AttachmentActions,
-  blockUser,
   Card,
   CardCover,
   CardFooter,
   CardHeader,
   channelId,
-  copyMessage,
   DateHeader,
-  deleteMessage,
+  deletedMessagesVisibilityType,
   disableTypingIndicator,
   dismissKeyboardOnMessageTouch,
-  editMessage,
   enableMessageGroupingByUser,
   FileAttachment,
   FileAttachmentGroup,
   FileAttachmentIcon,
-  flagMessage,
   FlatList,
   forceAlignMessages,
   formatDate,
@@ -53,6 +48,7 @@ export const useCreateMessagesContext = <
   handleEdit,
   handleFlag,
   handleMute,
+  handlePinMessage,
   handleQuotedReply,
   handleReaction,
   handleRetry,
@@ -71,35 +67,28 @@ export const useCreateMessagesContext = <
   MessageFooter,
   MessageHeader,
   MessageList,
+  MessagePinnedHeader,
   MessageReplies,
   MessageRepliesAvatars,
   MessageSimple,
   MessageStatus,
   MessageSystem,
   MessageText,
-  mutesEnabled,
-  muteUser,
   myMessageTheme,
-  onDoubleTapMessage,
   onLongPressMessage,
   onPressInMessage,
   onPressMessage,
   OverlayReactionList,
-  quotedRepliesEnabled,
-  quotedReply,
   ReactionList,
-  reactionsEnabled,
   removeMessage,
   Reply,
-  retry,
   retrySendMessage,
   ScrollToBottomButton,
   selectReaction,
   setEditingState,
   setQuotedMessageState,
   supportedReactions,
-  threadRepliesEnabled,
-  threadReply,
+  targetedMessage,
   TypingIndicator,
   TypingIndicatorContainer,
   updateMessage,
@@ -118,25 +107,20 @@ export const useCreateMessagesContext = <
   const messagesContext: MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us> = useMemo(
     () => ({
       additionalTouchableProps,
-      animatedLongPress,
       Attachment,
       AttachmentActions,
-      blockUser,
       Card,
       CardCover,
       CardFooter,
       CardHeader,
-      copyMessage,
       DateHeader,
-      deleteMessage,
+      deletedMessagesVisibilityType,
       disableTypingIndicator,
       dismissKeyboardOnMessageTouch,
-      editMessage,
       enableMessageGroupingByUser,
       FileAttachment,
       FileAttachmentGroup,
       FileAttachmentIcon,
-      flagMessage,
       FlatList,
       forceAlignMessages,
       formatDate,
@@ -148,6 +132,7 @@ export const useCreateMessagesContext = <
       handleEdit,
       handleFlag,
       handleMute,
+      handlePinMessage,
       handleQuotedReply,
       handleReaction,
       handleRetry,
@@ -166,35 +151,28 @@ export const useCreateMessagesContext = <
       MessageFooter,
       MessageHeader,
       MessageList,
+      MessagePinnedHeader,
       MessageReplies,
       MessageRepliesAvatars,
       MessageSimple,
       MessageStatus,
       MessageSystem,
       MessageText,
-      mutesEnabled,
-      muteUser,
       myMessageTheme,
-      onDoubleTapMessage,
       onLongPressMessage,
       onPressInMessage,
       onPressMessage,
       OverlayReactionList,
-      quotedRepliesEnabled,
-      quotedReply,
       ReactionList,
-      reactionsEnabled,
       removeMessage,
       Reply,
-      retry,
       retrySendMessage,
       ScrollToBottomButton,
       selectReaction,
       setEditingState,
       setQuotedMessageState,
       supportedReactions,
-      threadRepliesEnabled,
-      threadReply,
+      targetedMessage,
       TypingIndicator,
       TypingIndicatorContainer,
       updateMessage,
@@ -209,6 +187,7 @@ export const useCreateMessagesContext = <
       markdownRulesLength,
       messageContentOrderValue,
       supportedReactionsLength,
+      targetedMessage,
     ],
   );
 

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

@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+
+import {
+  allOwnCapabilities,
+  OwnCapabilitiesContextValue,
+  OwnCapability,
+} from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../../types/types';
+import type { Channel } from 'stream-chat';
+
+export const useCreateOwnCapabilitiesContext = <
+  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,
+  overrideCapabilities,
+}: {
+  channel: Channel<At, Ch, Co, Ev, Me, Re, Us>;
+  overrideCapabilities?: Partial<OwnCapabilitiesContextValue>;
+}) => {
+  const overrideCapabilitiesStr = overrideCapabilities
+    ? JSON.stringify(Object.values(overrideCapabilities))
+    : null;
+  const ownCapabilitiesContext: OwnCapabilitiesContextValue = useMemo(() => {
+    const capabilities = (channel?.data?.own_capabilities || []) as Array<string>;
+    const ownCapabilitiesContext = Object.keys(allOwnCapabilities).reduce(
+      (result, capability) => ({
+        ...result,
+        [capability]:
+          overrideCapabilities?.[capability as OwnCapability] ??
+          !!capabilities.includes(allOwnCapabilities[capability as OwnCapability]),
+      }),
+      {} as OwnCapabilitiesContextValue,
+    );
+
+    return ownCapabilitiesContext;
+  }, [channel.id, overrideCapabilitiesStr]);
+  return ownCapabilitiesContext;
+};

package/src/components/ChannelList/ChannelListFooterLoadingIndicator.tsx

@@ -21,7 +21,7 @@ export const ChannelListFooterLoadingIndicator: React.FC = () => {
   } = useTheme();
 
   return (
-    <View style={[styles.container, container]}>
+    <View style={[styles.container, container]} testID='channel-list-footer-loading-indicator'>
       <Spinner />
     </View>
   );

package/src/components/ChannelList/ChannelListHeaderNetworkDownIndicator.tsx

@@ -26,7 +26,10 @@ export const ChannelListHeaderNetworkDownIndicator: React.FC = () => {
   const { t } = useTranslationContext();
 
   return (
-    <View style={[styles.container, { backgroundColor: `${grey}E6` }, container]}>
+    <View
+      style={[styles.container, { backgroundColor: `${grey}E6` }, container]}
+      testID='network-down-indicator'
+    >
       <Text style={[styles.errorText, { color: white }, errorText]}>{t('Reconnecting...')}</Text>
     </View>
   );

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

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 
+import { useActiveChannelsRefContext } from '../../../contexts/activeChannelsRefContext/ActiveChannelsRefContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
@@ -51,11 +52,13 @@ export const usePaginatedChannels = <
   sort = {},
 }: Parameters<Ch, Co, Us>) => {
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
-
   const [channels, setChannels] = useState<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>([]);
-  const [error, setError] = useState(false);
+  const activeChannels = useActiveChannelsRefContext();
+
+  const [error, setError] = useState<boolean | Error>(false);
   const [hasNextPage, setHasNextPage] = useState(true);
   const lastRefresh = useRef(Date.now());
+  const querying = useRef(false);
   const [loadingChannels, setLoadingChannels] = useState(false);
   const [loadingNextPage, setLoadingNextPage] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
@@ -64,6 +67,9 @@ export const usePaginatedChannels = <
   const queryChannels = async (queryType = '', retryCount = 0): Promise<void> => {
     if (!client || loadingChannels || loadingNextPage || refreshing || !isMounted.current) return;
 
+    querying.current = true;
+    setError(false);
+
     if (queryType === 'reload') {
       setLoadingChannels(true);
     } else if (queryType === 'refresh') {
@@ -79,7 +85,9 @@ export const usePaginatedChannels = <
     };
 
     try {
-      const channelQueryResponse = await client.queryChannels(filters, sort, newOptions);
+      const channelQueryResponse = await client.queryChannels(filters, sort, newOptions, {
+        skipInitialization: activeChannels.current,
+      });
 
       if (!isMounted.current) return;
 
@@ -93,12 +101,16 @@ export const usePaginatedChannels = <
       setChannels(newChannels);
       setHasNextPage(channelQueryResponse.length >= newOptions.limit);
       setError(false);
+      querying.current = false;
     } catch (err) {
+      querying.current = false;
       await wait(2000);
 
       if (!isMounted.current) return;
 
-      if (retryCount === 3) {
+      // querying.current check is needed in order to make sure the next query call doesnt flick an error
+      // state and then succeed (reconnect case)
+      if (retryCount === 3 && !querying.current) {
         setLoadingChannels(false);
         setLoadingNextPage(false);
         setRefreshing(false);

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -156,7 +156,10 @@ const ChannelPreviewMessengerWithContext = <
       testID='channel-preview-button'
     >
       <PreviewAvatar channel={channel} />
-      <View style={[styles.contentContainer, contentContainer]}>
+      <View
+        style={[styles.contentContainer, contentContainer]}
+        testID={`channel-preview-content-${channel.id}`}
+      >
         <View style={[styles.row, row]}>
           <PreviewTitle channel={channel} displayName={displayName} />
           <PreviewUnreadCount channel={channel} maxUnreadCount={maxUnreadCount} unread={unread} />

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

@@ -28,12 +28,14 @@ export const getChannelPreviewDisplayAvatar = <
   client: StreamChat<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
   const currentUserId = client?.user?.id;
+  const channelId = channel?.id;
   const channelData = channel?.data;
   const channelName = channelData?.name;
   const channelImage = channelData?.image;
 
   if (channelImage) {
     return {
+      id: channelId,
       image: channelImage,
       name: channelName,
     };
@@ -43,16 +45,20 @@ export const getChannelPreviewDisplayAvatar = <
 
     if (otherMembers.length === 1) {
       return {
+        id: otherMembers[0].user?.id,
         image: otherMembers[0].user?.image,
         name: channelName || otherMembers[0].user?.name,
       };
     }
+
     return {
+      ids: otherMembers.slice(0, 4).map((member) => member.user?.id || ''),
       images: otherMembers.slice(0, 4).map((member) => member.user?.image || ''),
       names: otherMembers.slice(0, 4).map((member) => member.user?.name || ''),
     };
   }
   return {
+    id: channelId,
     name: channelName,
   };
 };

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

@@ -65,7 +65,8 @@ const getLatestMessageDisplayText = <
   t: (key: string) => string,
 ) => {
   if (!message) return [{ bold: false, text: t('Nothing yet...') }];
-  if (message.deleted_at) return [{ bold: false, text: t('Message deleted') }];
+  const isMessageTypeDeleted = message.type === 'deleted';
+  if (isMessageTypeDeleted) return [{ bold: false, text: t('Message deleted') }];
   const currentUserId = client.userID;
   const messageOwnerId = message.user?.id;
   const members = Object.keys(channel.state.members);

package/src/components/Chat/__tests__/Chat.test.js

@@ -11,6 +11,7 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged';
 import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered';
 import { getTestClient } from '../../../mock-builders/mock';
+import { setNetInfoFetchMock } from '../../../../jest-setup';
 
 const ChatContextConsumer = ({ fn }) => {
   fn(useChatContext());
@@ -38,6 +39,8 @@ describe('Chat', () => {
 
   it('listens and updates state on a connection changed event', async () => {
     let context;
+    const netInfoFetch = jest.fn();
+    setNetInfoFetchMock(netInfoFetch);
 
     render(
       <Chat client={chatClient}>
@@ -49,15 +52,16 @@ describe('Chat', () => {
       </Chat>,
     );
 
-    const { connectionRecovering } = context;
+    await waitFor(() => expect(netInfoFetch).toHaveBeenCalledTimes(1));
 
+    const { connectionRecovering } = context;
     act(() => dispatchConnectionChangedEvent(chatClient));
-
     await waitFor(() => {
       expect(context.connectionRecovering).toStrictEqual(!connectionRecovering);
       expect(context.isOnline).toBeFalsy();
     });
   });
+
   it('listens and updates state on a connection recovered event', async () => {
     let context;
 

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

@@ -85,18 +85,21 @@ export const useIsOnline = <
 
     let unsubscribeNetInfo: NetInfoSubscription;
     const setNetInfoListener = () => {
-      NetInfo.fetch().then((netInfoState) => {
-        notifyChatClient(netInfoState);
-      });
       unsubscribeNetInfo = NetInfo.addEventListener((netInfoState) => {
+        if (netInfoState === false && !client.wsConnection?.isHealthy) {
+          setConnectionRecovering(true);
+          setIsOnline(false);
+        }
         notifyChatClient(netInfoState);
       });
     };
 
     const setInitialOnlineState = async () => {
       const status = await NetInfo.fetch();
-
-      if (isMounted.current) setIsOnline(status);
+      if (isMounted.current) {
+        setIsOnline(status);
+        notifyChatClient(status);
+      }
     };
 
     setInitialOnlineState();

package/src/components/ImageGallery/ImageGallery.tsx

@@ -160,7 +160,7 @@ export const ImageGallery = <
       imageGallery: { backgroundColor },
     },
   } = useTheme();
-  const { overlay, setBlurType, setOverlay, translucentStatusBar } = useOverlayContext();
+  const { overlay, setOverlay, translucentStatusBar } = useOverlayContext();
   const { image, images, setImage } = useImageGalleryContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   /**
@@ -348,6 +348,7 @@ export const ImageGallery = <
       ) || [];
 
     const attachmentPhotos = attachmentImages.map((attachmentImage) => ({
+      channelId: cur.cid,
       created_at: cur.created_at,
       id: `photoId-${cur.id}-${attachmentImage.image_url || attachmentImage.thumb_url}`,
       messageId: cur.id,
@@ -646,7 +647,6 @@ export const ImageGallery = <
               () => {
                 showScreen.value = 0;
                 runOnJS(setOverlay)('none');
-                runOnJS(setBlurType)(undefined);
               },
             );
             scale.value = withTiming(0.6, {
@@ -1199,6 +1199,7 @@ const styles = StyleSheet.create({
 export type Photo<Us extends UnknownType = DefaultUserType> = {
   id: string;
   uri: string;
+  channelId?: string;
   created_at?: string | Date;
   messageId?: string;
   user?: UserResponse<Us> | null;

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -100,9 +100,9 @@ export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(pro
     },
   } = useTheme();
   const { t, tDateTimeParser } = useTranslationContext();
-  const { setBlurType, setOverlay, translucentStatusBar } = useOverlayContext();
+  const { setOverlay, translucentStatusBar } = useOverlayContext();
 
-  const parsedDate = tDateTimeParser(photo?.created_at);
+  const parsedDate = photo ? tDateTimeParser(photo?.created_at) : null;
 
   /**
    * .calendar is required on moment types, but in reality it
@@ -114,7 +114,7 @@ export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(pro
       ? parsedDate.calendar
         ? parsedDate.calendar()
         : parsedDate.fromNow()
-      : parsedDate;
+      : null;
 
   const headerStyle = useAnimatedStyle<ViewStyle>(() => ({
     opacity: opacity.value,
@@ -132,7 +132,6 @@ export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(pro
 
   const hideOverlay = () => {
     setOverlay('none');
-    setBlurType(undefined);
   };
 
   return (
@@ -160,7 +159,7 @@ export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(pro
               <Text style={[styles.userName, { color: black }, usernameText]}>
                 {photo?.user?.name || t('Unknown User')}
               </Text>
-              <Text style={[styles.date, { color: black }, dateText]}>{date}</Text>
+              {date && <Text style={[styles.date, { color: black }, dateText]}>{date}</Text>}
             </View>
           )}
           {rightElement ? (

package/src/components/Indicators/LoadingErrorIndicator.tsx

@@ -48,7 +48,7 @@ const LoadingErrorWrapper: React.FC<LoadingErrorWrapperProps> = (props) => {
 };
 
 export type LoadingErrorProps = {
-  error?: boolean;
+  error?: boolean | Error;
   listType?: 'channel' | 'message' | 'default';
   loadNextPage?: () => Promise<void>;
   retry?: () => void;