stream-chat-react-native-core 4.6.1 → 4.7.0-beta.3

package/src/components/Channel/Channel.tsx

@@ -82,6 +82,7 @@ import { FileAttachmentGroup as FileAttachmentGroupDefault } from '../Attachment
 import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
 import { Gallery as GalleryDefault } from '../Attachment/Gallery';
 import { Giphy as GiphyDefault } from '../Attachment/Giphy';
+import { VideoThumbnail as VideoThumbnailDefault } from '../Attachment/VideoThumbnail';
 import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
 import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
 import { AutoCompleteSuggestionList as AutoCompleteSuggestionListDefault } from '../AutoCompleteInput/AutoCompleteSuggestionList';
@@ -287,6 +288,7 @@ export type ChannelPropsWithContext<
       | 'TypingIndicator'
       | 'TypingIndicatorContainer'
       | 'UrlPreview'
+      | 'VideoThumbnail'
     >
   > &
   Partial<
@@ -534,6 +536,7 @@ const ChannelWithContext = <
     TypingIndicatorContainer = TypingIndicatorContainerDefault,
     UploadProgressIndicator = UploadProgressIndicatorDefault,
     UrlPreview = CardDefault,
+    VideoThumbnail = VideoThumbnailDefault,
     watcherCount,
     watchers,
   } = props;
@@ -1738,6 +1741,7 @@ const ChannelWithContext = <
     TypingIndicatorContainer,
     updateMessage,
     UrlPreview,
+    VideoThumbnail,
   });
 
   const suggestionsContext = {

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

@@ -80,6 +80,7 @@ export const useCreateMessagesContext = <
   TypingIndicatorContainer,
   updateMessage,
   UrlPreview,
+  VideoThumbnail,
 }: MessagesContextValue<StreamChatGenerics> & {
   /**
    * To ensure we allow re-render, when channel is changed
@@ -166,6 +167,7 @@ export const useCreateMessagesContext = <
       TypingIndicatorContainer,
       updateMessage,
       UrlPreview,
+      VideoThumbnail,
     }),
     [
       additionalTouchablePropsLength,

package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewDisplayName.test.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+import type { DefaultStreamChatGenerics } from 'src/types/types';
+import type { Channel, ChannelMemberResponse, DefaultGenerics, StreamChat } from 'stream-chat';
+
+import {
+  GROUP_CHANNEL_MEMBERS_MOCK,
+  ONE_CHANNEL_MEMBER_MOCK,
+  ONE_MEMBER_WITH_EMPTY_USER_MOCK,
+} from '../../../../mock-builders/api/queryMembers';
+import { generateUser } from '../../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import {
+  getChannelPreviewDisplayName,
+  useChannelPreviewDisplayName,
+} from '../useChannelPreviewDisplayName';
+
+describe('useChannelPreviewDisplayName', () => {
+  const clientUser = generateUser();
+  let chatClient: StreamChat<DefaultGenerics> | StreamChat<DefaultStreamChatGenerics>;
+  const CHARACTER_LENGTH = 15;
+
+  beforeEach(async () => {
+    chatClient = await getTestClientWithUser(clientUser);
+  });
+
+  it('should return a channel display name', async () => {
+    const channelName = 'okechukwu';
+
+    const TestComponent = () => {
+      const channelDisplayName = useChannelPreviewDisplayName(
+        {
+          data: { name: channelName },
+        } as unknown as Channel<DefaultGenerics>,
+        CHARACTER_LENGTH,
+      );
+      return <Text>{channelDisplayName}</Text>;
+    };
+
+    const { getByText } = render(<TestComponent />);
+
+    await waitFor(() => {
+      expect(getByText(channelName)).toBeTruthy();
+    });
+  });
+
+  it('should return the full channelName when channelName length is less than characterLength', () => {
+    const channelName = 'okechukwu';
+    const currentUserId = chatClient.userID;
+
+    const displayName = getChannelPreviewDisplayName({
+      channelName,
+      characterLimit: CHARACTER_LENGTH,
+      currentUserId,
+      members: ONE_CHANNEL_MEMBER_MOCK,
+    });
+
+    expect(displayName).toEqual(channelName);
+  });
+
+  it.each([
+    [CHARACTER_LENGTH, GROUP_CHANNEL_MEMBERS_MOCK, 'okechukwu nwagba', 'ben, nick, q,...+2'],
+    [CHARACTER_LENGTH, ONE_CHANNEL_MEMBER_MOCK, 'okechukwu nwagba', 'okechukwu nw...'],
+    [CHARACTER_LENGTH, ONE_MEMBER_WITH_EMPTY_USER_MOCK, 'okechukwu nwagba', 'Unknown User...'],
+  ])(
+    'getChannelPreviewDisplayName(%i, %p, %s) result in %s',
+    (characterLength, members, currentUserId, expected) => {
+      const displayName = getChannelPreviewDisplayName({
+        characterLimit: characterLength,
+        currentUserId,
+        members: members as unknown as Record<
+          string,
+          ChannelMemberResponse<DefaultStreamChatGenerics>
+        >,
+      });
+
+      expect(displayName).toEqual(expected);
+    },
+  );
+});

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

@@ -1,48 +1,66 @@
 import { useEffect, useState } from 'react';
 
-import type { Channel } from 'stream-chat';
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { vw } from '../../../utils/utils';
 
-const maxCharacterLengthDefault = (vw(100) - 16) / 6;
+const DEFAULT_MAX_CHARACTER_LENGTH = (vw(100) - 16) / 6;
+
+const ELLIPSIS = `...`;
+
+const getMemberName = (member: ChannelMemberResponse) =>
+  member.user?.name || member.user?.id || 'Unknown User';
 
 export const getChannelPreviewDisplayName = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channelName,
+  characterLimit,
   currentUserId,
-  maxCharacterLength,
   members,
 }: {
-  maxCharacterLength: number;
+  characterLimit: number;
   channelName?: string;
   currentUserId?: string;
   members?: Channel<StreamChatGenerics>['state']['members'];
-}) => {
+}): string => {
   if (channelName) return channelName;
 
   const channelMembers = Object.values(members || {});
+
   const otherMembers = channelMembers.filter((member) => member.user?.id !== currentUserId);
+  otherMembers.sort((prevUser, nextUser) =>
+    (prevUser?.user?.name ?? '')
+      .toLowerCase()
+      .localeCompare((nextUser?.user?.name ?? '').toLocaleUpperCase()),
+  );
+
+  const createChannelNameSuffix = (remainingNumberOfMembers: number) =>
+    remainingNumberOfMembers <= 1 ? `${ELLIPSIS}` : `,${ELLIPSIS}+${remainingNumberOfMembers}`;
 
-  const name = otherMembers.slice(0).reduce((returnString, currentMember, index, originalArray) => {
-    const returnStringLength = returnString.length;
-    const currentMemberName = currentMember.user?.name || currentMember.user?.id || 'Unknown User';
-    // a rough approximation of when the +Number shows up
-    if (returnStringLength + (currentMemberName.length + 2) < maxCharacterLength) {
-      if (returnStringLength) {
-        returnString += `, ${currentMemberName}`;
-      } else {
-        returnString = currentMemberName;
-      }
+  const name = otherMembers.reduce((result, currentMember, index, originalArray) => {
+    if (result.length >= characterLimit) {
+      return result;
+    }
+
+    const currentMemberName = getMemberName(currentMember);
+
+    const resultHasSpaceForCurrentMemberName =
+      result.length + (currentMemberName.length + ELLIPSIS.length) < characterLimit;
+    if (resultHasSpaceForCurrentMemberName) {
+      return result.length > 0 ? `${result}, ${currentMemberName}, ` : currentMemberName;
     } else {
-      const remainingMembers = originalArray.length - index;
-      returnString += `, +${remainingMembers}`;
-      originalArray.splice(1); // exit early
+      const remainingNumberOfMembers = originalArray.length - index;
+      const truncateLimit = characterLimit - (ELLIPSIS.length + result.length);
+      const tuncatedCurrentMemberName = `${currentMemberName.slice(0, truncateLimit)}`;
+
+      const channelNameSuffix = createChannelNameSuffix(remainingNumberOfMembers);
+
+      return `${result}${tuncatedCurrentMemberName}${channelNameSuffix}`;
     }
-    return returnString;
   }, '');
 
   return name;
@@ -56,17 +74,16 @@ export const useChannelPreviewDisplayName = <
 ) => {
   const { client } = useChatContext<StreamChatGenerics>();
 
-  const currentUserId = client.userID;
-  const members = channel?.state.members;
+  const currentUserId = client?.userID;
+  const members = channel?.state?.members;
   const numOfMembers = Object.keys(members || {}).length;
   const channelName = channel?.data?.name;
-  const maxCharacterLength = characterLength || maxCharacterLengthDefault;
-
+  const characterLimit = characterLength || DEFAULT_MAX_CHARACTER_LENGTH;
   const [displayName, setDisplayName] = useState(
     getChannelPreviewDisplayName({
       channelName,
+      characterLimit,
       currentUserId,
-      maxCharacterLength,
       members,
     }),
   );
@@ -75,12 +92,12 @@ export const useChannelPreviewDisplayName = <
     setDisplayName(
       getChannelPreviewDisplayName({
         channelName,
+        characterLimit,
         currentUserId,
-        maxCharacterLength,
         members,
       }),
     );
-  }, [channelName, currentUserId, maxCharacterLength, numOfMembers]);
+  }, [channelName, currentUserId, characterLimit, numOfMembers]);
 
   return displayName;
 };

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

@@ -13,7 +13,7 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
 /**
  * Disconnect the websocket connection when app goes to background,
  * and reconnect when app comes to foreground.
- * We do this to make sure, user receives push notifications when app is in the background.
+ * We do this to make sure the user receives push notifications when app is in the background.
  * You can't receive push notification until you have active websocket connection.
  */
 export const useIsOnline = <
@@ -25,10 +25,10 @@ export const useIsOnline = <
   const [isOnline, setIsOnline] = useState(true);
   const [connectionRecovering, setConnectionRecovering] = useState(false);
   const isMounted = useIsMountedRef();
-  const clientExits = !!client;
+  const clientExists = !!client;
 
   const onBackground = useCallback(() => {
-    if (!closeConnectionOnBackground) return;
+    if (!closeConnectionOnBackground || !clientExists) return;
 
     for (const cid in client.activeChannels) {
       const channel = client.activeChannels[cid];
@@ -37,13 +37,13 @@ export const useIsOnline = <
 
     client.closeConnection();
     setIsOnline(false);
-  }, [closeConnectionOnBackground, client]);
+  }, [closeConnectionOnBackground, client, clientExists]);
 
   const onForeground = useCallback(() => {
-    if (!closeConnectionOnBackground) return;
+    if (!closeConnectionOnBackground || !clientExists) return;
 
     client.openConnection();
-  }, [closeConnectionOnBackground, client]);
+  }, [closeConnectionOnBackground, client, clientExists]);
 
   useAppStateListener(onForeground, onBackground);
 
@@ -101,7 +101,7 @@ export const useIsOnline = <
       chatListeners.forEach((listener) => listener.unsubscribe?.());
       unsubscribeNetInfo?.();
     };
-  }, [clientExits]);
+  }, [clientExists]);
 
   return { connectionRecovering, isOnline };
 };