Merge branch 'develop' into V7

# Conflicts:
#	.github/workflows/sample-distribution.yml
#	package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayPresence.ts
#	package/src/components/ChannelPreview/hooks/useIsChannelMuted.ts
#	package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts
#	package/src/hooks/useTranslatedMessage.ts

Author: isekovanic

.github/workflows/sample-distribution.yml

@@ -14,7 +14,7 @@ on:
 jobs:
   build_and_deploy_ios_testflight_qa:
     name: Build SampleApp iOS and Deploy-${{ github.ref == 'refs/heads/V7' }}
-    runs-on: [macos-14]
+    runs-on: [macos-15]
     steps:
       - name: Connect Bot
         uses: webfactory/[email protected]

package/src/components/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   Image,
   ImageProps,
@@ -83,6 +83,34 @@ export const Avatar = (props: AvatarProps) => {
 
   const { isLoadingImageError, setLoadingImageError } = useLoadingImage();
 
+  const onError = useCallback(() => {
+    setLoadingImageError(true);
+  }, [setLoadingImageError]);
+
+  const uri = useMemo(() => {
+    let imageUrl;
+    if (
+      !imageProp ||
+      imageProp.includes(randomImageBaseUrl) ||
+      imageProp.includes(randomSvgBaseUrl)
+    ) {
+      if (imageProp?.includes(streamCDN)) {
+        imageUrl = imageProp;
+      } else {
+        imageUrl = `${randomImageBaseUrl}${name ? `?name=${getInitials(name)}&size=${size}` : ''}`;
+      }
+    } else {
+      imageUrl = getResizedImageUrl({
+        height: size,
+        resizableCDNHosts,
+        url: imageProp,
+        width: size,
+      });
+    }
+
+    return imageUrl;
+  }, [imageProp, name, size, resizableCDNHosts]);
+
   return (
     <View>
       <View
@@ -108,24 +136,10 @@ export const Avatar = (props: AvatarProps) => {
           />
         ) : (
           <ImageComponent
-            accessibilityLabel={testID || 'Avatar Image'}
-            onError={() => setLoadingImageError(true)}
+            accessibilityLabel={testID ?? 'Avatar Image'}
+            onError={onError}
             source={{
-              uri:
-                !imageProp ||
-                imageProp.includes(randomImageBaseUrl) ||
-                imageProp.includes(randomSvgBaseUrl)
-                  ? imageProp?.includes(streamCDN)
-                    ? imageProp
-                    : `${randomImageBaseUrl}${
-                        name ? `?name=${getInitials(name)}&size=${size}` : ''
-                      }`
-                  : getResizedImageUrl({
-                      height: size,
-                      resizableCDNHosts,
-                      url: imageProp,
-                      width: size,
-                    }),
+              uri,
             }}
             style={[
               image,
@@ -139,7 +153,7 @@ export const Avatar = (props: AvatarProps) => {
                 : {},
               imageStyle,
             ]}
-            testID={testID || 'avatar-image'}
+            testID={testID ?? 'avatar-image'}
           />
         )}
       </View>

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 
 import type { Channel, StreamChat } from 'stream-chat';
 
@@ -50,19 +50,10 @@ export const getChannelPreviewDisplayAvatar = (channel: Channel, client: StreamC
 export const useChannelPreviewDisplayAvatar = (channel: Channel) => {
   const { client } = useChatContext();
 
-  const channelData = channel?.data;
-  const image = channelData?.image;
-  const name = channelData?.name;
-  const id = client?.user?.id;
-
-  const [displayAvatar, setDisplayAvatar] = useState(
-    getChannelPreviewDisplayAvatar(channel, client),
+  const displayAvatar = useMemo(
+    () => getChannelPreviewDisplayAvatar(channel, client),
+    [channel, client],
   );
 
-  useEffect(() => {
-    setDisplayAvatar(getChannelPreviewDisplayAvatar(channel, client));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id, image, name]);
-
   return displayAvatar;
 };

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 
 import type { Channel, ChannelMemberResponse } from 'stream-chat';
 
@@ -22,7 +22,9 @@ export const getChannelPreviewDisplayName = ({
   members?: Channel['state']['members'];
 }): string => {
   if (channelName) {
-    return channelName;
+    return channelName.length > characterLimit
+      ? `${channelName.slice(0, characterLimit - ELLIPSIS.length)}${ELLIPSIS}`
+      : channelName;
   }
 
   const channelMembers = Object.values(members || {});
@@ -74,33 +76,25 @@ export const useChannelPreviewDisplayName = (channel?: Channel, characterLength?
   const { client } = useChatContext();
   const { vw } = useViewport();
 
-  const DEFAULT_MAX_CHARACTER_LENGTH = (vw(100) - 16) / 6;
+  const DEFAULT_MAX_CHARACTER_LENGTH = Math.floor((vw(100) - 16) / 6);
 
   const currentUserId = client?.userID;
   const members = channel?.state?.members;
-  const numOfMembers = Object.keys(members || {}).length;
   const channelName = channel?.data?.name;
   const characterLimit = characterLength || DEFAULT_MAX_CHARACTER_LENGTH;
-  const [displayName, setDisplayName] = useState(
-    getChannelPreviewDisplayName({
-      channelName,
-      characterLimit,
-      currentUserId,
-      members,
-    }),
-  );
+  const numOfMembers = Object.keys(members || {}).length;
 
-  useEffect(() => {
-    setDisplayName(
+  const displayName = useMemo(
+    () =>
       getChannelPreviewDisplayName({
         channelName,
         characterLimit,
         currentUserId,
         members,
       }),
-    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channelName, currentUserId, characterLimit, numOfMembers]);
+    [channelName, characterLimit, currentUserId, members, numOfMembers],
+  );
 
   return displayName;
 };

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

@@ -1,43 +1,23 @@
-import { useEffect, useState } from 'react';
-
-import type { Channel, StreamChat } from 'stream-chat';
+import type { Channel } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
-const getChannelPreviewDisplayPresence = (channel: Channel, client: StreamChat) => {
-  const currentUserId = client.userID;
-
-  if (currentUserId) {
-    const members = Object.values(channel.state.members);
-    const otherMembers = members.filter((member) => member.user?.id !== currentUserId);
-
-    if (otherMembers.length === 1) {
-      return !!otherMembers[0].user?.online;
-    }
-  }
-  return false;
-};
-
 /**
  * Hook to set the display avatar presence for channel preview
  * @param {*} channel
  *
  * @returns {boolean} e.g., true
  */
-export const useChannelPreviewDisplayPresence = (channel: Channel) => {
+export const useChannelPreviewDisplayPresence = (
+  channel: Channel,
+) => {
   const { client } = useChatContext();
+  const members = channel.state.members;
+  const membersCount = Object.keys(members).length;
 
-  const currentUserId = client.userID;
-  const members = Object.values(channel.state.members).filter(
-    (member) => !!member.user?.id && !!currentUserId && member.user?.id !== currentUserId,
-  );
-  const channelMemberOnline = members.some((member) => member.user?.online);
-
-  const [displayPresence, setDisplayPresence] = useState(false);
+  if (membersCount !== 2) return false;
 
-  useEffect(() => {
-    setDisplayPresence(getChannelPreviewDisplayPresence(channel, client));
-  }, [channel, channelMemberOnline, client]);
+  const otherMember = Object.values(members).find((member) => member.user?.id !== client.userID);
 
-  return displayPresence;
+  return otherMember?.user?.online ?? false;
 };

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

@@ -4,7 +4,16 @@ import type { Channel } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
-export const useIsChannelMuted = (channel: Channel) => {
+
+const defaultMuteStatus = {
+  createdAt: null,
+  expiresAt: null,
+  muted: false,
+};
+
+export const useIsChannelMuted =(
+  channel: Channel,
+) => {
   const { client } = useChatContext();
 
   const [muted, setMuted] = useState(() => channel.muteStatus());
@@ -18,5 +27,5 @@ export const useIsChannelMuted = (channel: Channel) => {
     return () => client.off('notification.channel_mutes_updated', handleEvent);
   }, [channel, client, muted]);
 
-  return muted || { createdAt: null, expiresAt: null, muted: false };
+  return muted ?? defaultMuteStatus;
 };

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 
 import { TFunction } from 'i18next';
 import type {
@@ -259,61 +259,44 @@ export const useLatestMessagePreview = (
     ? stringifyMessage(translatedLastMessage)
     : '';
 
-  const [readEvents, setReadEvents] = useState(true);
-  const [latestMessagePreview, setLatestMessagePreview] = useState<LatestMessagePreview>({
-    created_at: '',
-    messageObject: undefined,
-    previews: [
-      {
-        bold: false,
-        text: '',
-      },
-    ],
-    status: MessageReadStatus.NOT_SENT_BY_CURRENT_USER,
-  });
+  const readEvents = useMemo(() => {
+    if (!channelConfigExists) {
+      return true;
+    }
+    const read_events = !channel.disconnected && !!channel?.id && channel.getConfig()?.read_events;
+    if (typeof read_events !== 'boolean') {
+      return true;
+    }
+    return read_events;
+  }, [channelConfigExists, channel]);
 
   const readStatus = getLatestMessageReadStatus(channel, client, translatedLastMessage, readEvents);
 
-  useEffect(() => {
-    if (channelConfigExists) {
-      const read_events =
-        !channel.disconnected && !!channel?.id && channel.getConfig()?.read_events;
-      if (typeof read_events === 'boolean') {
-        setReadEvents(read_events);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channelConfigExists]);
-
   const pollId = lastMessage?.poll_id ?? '';
   const poll = client.polls.fromState(pollId);
   const pollState: LatestMessagePreviewSelectorReturnType =
     useStateStore(poll?.state, selector) ?? {};
   const { createdBy, latestVotesByOption, name } = pollState;
 
-  useEffect(
-    () =>
-      setLatestMessagePreview(
-        getLatestMessagePreview({
-          channel,
-          client,
-          lastMessage: translatedLastMessage,
-          pollState,
-          readEvents,
-          t,
-        }),
-      ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      channelLastMessageString,
-      forceUpdate,
+  const latestMessagePreview = useMemo(() => {
+    return getLatestMessagePreview({
+      channel,
+      client,
+      lastMessage: translatedLastMessage,
+      pollState,
       readEvents,
-      readStatus,
-      latestVotesByOption,
-      createdBy,
-      name,
-    ],
-  );
+      t,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    channelLastMessageString,
+    forceUpdate,
+    readEvents,
+    readStatus,
+    latestVotesByOption,
+    createdBy,
+    name,
+  ]);
 
   return latestMessagePreview;
 };

package/src/hooks/useTranslatedMessage.ts

@@ -4,10 +4,10 @@ import { useTranslationContext } from '../contexts/translationContext/Translatio
 
 type TranslationKey = `${TranslationLanguages}_text`;
 
-export const useTranslatedMessage = (message?: MessageResponse | FormatMessageResponse) => {
-  const { userLanguage: translationContextUserLanguage } = useTranslationContext();
-
-  const userLanguage = translationContextUserLanguage;
+export const useTranslatedMessage = (
+  message?: MessageResponse | FormatMessageResponse,
+) => {
+  const { userLanguage } = useTranslationContext();
 
   const translationKey: TranslationKey = `${userLanguage}_text`;