stream-chat-react-native-core 6.6.8-beta.3 → 7.0.0-rc.2

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -19,7 +19,6 @@ import {
 } from '../../contexts/channelsContext/ChannelsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../hooks/useViewport';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const styles = StyleSheet.create({
   container: {
@@ -44,11 +43,9 @@ const styles = StyleSheet.create({
   title: { fontSize: 14, fontWeight: '700' },
 });
 
-export type ChannelPreviewMessengerPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> &
+export type ChannelPreviewMessengerPropsWithContext = Pick<ChannelPreviewProps, 'channel'> &
   Pick<
-    ChannelsContextValue<StreamChatGenerics>,
+    ChannelsContextValue,
     | 'maxUnreadCount'
     | 'onSelect'
     | 'PreviewAvatar'
@@ -83,7 +80,7 @@ export type ChannelPreviewMessengerPropsWithContext<
      *
      * @overrideType object
      */
-    latestMessagePreview: LatestMessagePreview<StreamChatGenerics>;
+    latestMessagePreview: LatestMessagePreview;
     /**
      * Formatter function for date of latest message.
      * @param date Message date
@@ -100,11 +97,7 @@ export type ChannelPreviewMessengerPropsWithContext<
     unread?: number;
   };
 
-const ChannelPreviewMessengerWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,
-) => {
+const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsWithContext) => {
   const {
     channel,
     formatLatestMessageDate,
@@ -175,18 +168,10 @@ const ChannelPreviewMessengerWithContext = <
   );
 };
 
-export type ChannelPreviewMessengerProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<
-  Omit<
-    ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,
-    'channel' | 'latestMessagePreview'
-  >
+export type ChannelPreviewMessengerProps = Partial<
+  Omit<ChannelPreviewMessengerPropsWithContext, 'channel' | 'latestMessagePreview'>
 > &
-  Pick<
-    ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,
-    'channel' | 'latestMessagePreview'
-  >;
+  Pick<ChannelPreviewMessengerPropsWithContext, 'channel' | 'latestMessagePreview'>;
 
 const MemoizedChannelPreviewMessengerWithContext = React.memo(
   ChannelPreviewMessengerWithContext,
@@ -196,11 +181,7 @@ const MemoizedChannelPreviewMessengerWithContext = React.memo(
  * This UI component displays an individual preview item for each channel in a list. It also receives all props
  * from the ChannelPreview component.
  */
-export const ChannelPreviewMessenger = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ChannelPreviewMessengerProps<StreamChatGenerics>,
-) => {
+export const ChannelPreviewMessenger = (props: ChannelPreviewMessengerProps) => {
   const {
     forceUpdate,
     maxUnreadCount,
@@ -211,7 +192,7 @@ export const ChannelPreviewMessenger = <
     PreviewStatus,
     PreviewTitle,
     PreviewUnreadCount,
-  } = useChannelsContext<StreamChatGenerics>();
+  } = useChannelsContext();
   return (
     <MemoizedChannelPreviewMessengerWithContext
       {...{

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -9,7 +9,6 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { Check, CheckAll } from '../../icons';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getDateString } from '../../utils/i18n/getDateString';
 
 const styles = StyleSheet.create({
@@ -23,19 +22,13 @@ const styles = StyleSheet.create({
   },
 });
 
-export type ChannelPreviewStatusProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<
-  ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,
+export type ChannelPreviewStatusProps = Pick<
+  ChannelPreviewMessengerPropsWithContext,
   'latestMessagePreview' | 'formatLatestMessageDate'
 > &
-  Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'>;
+  Pick<ChannelPreviewProps, 'channel'>;
 
-export const ChannelPreviewStatus = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ChannelPreviewStatusProps<StreamChatGenerics>,
-) => {
+export const ChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
   const { formatLatestMessageDate, latestMessagePreview } = props;
   const { t, tDateTimeParser } = useTranslationContext();
   const {

package/src/components/ChannelPreview/ChannelPreviewTitle.tsx

@@ -4,26 +4,19 @@ import { StyleSheet, Text } from 'react-native';
 import type { ChannelPreviewProps } from './ChannelPreview';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const styles = StyleSheet.create({
   title: { fontSize: 14, fontWeight: '700' },
 });
 
-export type ChannelPreviewTitleProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> & {
+export type ChannelPreviewTitleProps = Pick<ChannelPreviewProps, 'channel'> & {
   /**
    * Formatted name for the previewed channel.
    */
   displayName: string;
 };
 
-export const ChannelPreviewTitle = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ChannelPreviewTitleProps<StreamChatGenerics>,
-) => {
+export const ChannelPreviewTitle = (props: ChannelPreviewTitleProps) => {
   const { displayName } = props;
   const {
     theme: {

package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx

@@ -6,23 +6,15 @@ import { ChannelPreviewProps } from './ChannelPreview';
 import type { ChannelsContextValue } from '../../contexts/channelsContext/ChannelsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
-
-export type ChannelPreviewUnreadCountProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChannelsContextValue<StreamChatGenerics>, 'maxUnreadCount'> &
-  Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> & {
+export type ChannelPreviewUnreadCountProps = Pick<ChannelsContextValue, 'maxUnreadCount'> &
+  Pick<ChannelPreviewProps, 'channel'> & {
     /**
      * Number of unread messages on the channel
      */
     unread?: number;
   };
 
-export const ChannelPreviewUnreadCount = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ChannelPreviewUnreadCountProps<StreamChatGenerics>,
-) => {
+export const ChannelPreviewUnreadCount = (props: ChannelPreviewUnreadCountProps) => {
   const { maxUnreadCount, unread } = props;
   const {
     theme: {

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

@@ -12,7 +12,7 @@ import {
 } from '../../../../mock-builders/api/queryMembers';
 import { generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+
 import {
   getChannelPreviewDisplayName,
   useChannelPreviewDisplayName,

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

@@ -18,7 +18,6 @@ import {
 
 import { generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 import { useLatestMessagePreview } from '../useLatestMessagePreview';
 

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

@@ -8,23 +8,19 @@ import { useIsChannelMuted } from './useIsChannelMuted';
 import { useLatestMessagePreview } from './useLatestMessagePreview';
 
 import { useChannelsContext } from '../../../contexts';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
 
-export const useChannelPreviewData = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  channel: Channel<StreamChatGenerics>,
-  client: StreamChat<StreamChatGenerics>,
+export const useChannelPreviewData = (
+  channel: Channel,
+  client: StreamChat,
   forceUpdateOverride?: number,
 ) => {
   const [forceUpdate, setForceUpdate] = useState(0);
   const [lastMessage, setLastMessage] = useState<
-    | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
-    | MessageResponse<StreamChatGenerics>
+    ReturnType<ChannelState['formatMessage']> | MessageResponse
   >(channel.state.messages[channel.state.messages.length - 1]);
   const [unread, setUnread] = useState(channel.countUnread());
   const { muted } = useIsChannelMuted(channel);
-  const { forceUpdate: contextForceUpdate } = useChannelsContext<StreamChatGenerics>();
+  const { forceUpdate: contextForceUpdate } = useChannelsContext();
   const channelListForceUpdate = forceUpdateOverride ?? contextForceUpdate;
 
   const channelLastMessage = channel.lastMessage();
@@ -113,7 +109,7 @@ export const useChannelPreviewData = <
       refreshUnreadCount();
     };
 
-    const handleNewMessageEvent = (event: Event<StreamChatGenerics>) => {
+    const handleNewMessageEvent = (event: Event) => {
       const message = event.message;
       if (message && (!message.parent_id || message.show_in_channel)) {
         setLastMessage(message);
@@ -121,7 +117,7 @@ export const useChannelPreviewData = <
       }
     };
 
-    const handleUpdatedOrDeletedMessage = (event: Event<StreamChatGenerics>) => {
+    const handleUpdatedOrDeletedMessage = (event: Event) => {
       setLastMessage((prevLastMessage) => {
         if (prevLastMessage?.id === event.message?.id) {
           return event.message;

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

@@ -1,17 +1,10 @@
-import { useMemo } from 'react';
+import { useEffect, useState } from 'react';
 
 import type { Channel, StreamChat } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
-import type { DefaultStreamChatGenerics } from '../../../types/types';
-
-export const getChannelPreviewDisplayAvatar = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  channel: Channel<StreamChatGenerics>,
-  client: StreamChat<StreamChatGenerics>,
-) => {
+export const getChannelPreviewDisplayAvatar = (channel: Channel, client: StreamChat) => {
   const currentUserId = client?.user?.id;
   const channelId = channel?.id;
   const channelData = channel?.data;
@@ -54,17 +47,22 @@ export const getChannelPreviewDisplayAvatar = <
  *
  * @returns {object} e.g., { image: 'http://dummyurl.com/test.png', name: 'Uhtred Bebbanburg' }
  */
-export const useChannelPreviewDisplayAvatar = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  channel: Channel<StreamChatGenerics>,
-) => {
-  const { client } = useChatContext<StreamChatGenerics>();
+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 = useMemo(
-    () => getChannelPreviewDisplayAvatar(channel, client),
-    [channel, client],
+  const [displayAvatar, setDisplayAvatar] = useState(
+    getChannelPreviewDisplayAvatar(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,20 +1,16 @@
-import { useMemo } from 'react';
+import { useEffect, useState } from 'react';
 
 import type { Channel, ChannelMemberResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useViewport } from '../../../hooks/useViewport';
 
-import type { DefaultStreamChatGenerics } from '../../../types/types';
-
 const ELLIPSIS = '...';
 
 const getMemberName = (member: ChannelMemberResponse) =>
   member.user?.name || member.user?.id || 'Unknown User';
 
-export const getChannelPreviewDisplayName = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export const getChannelPreviewDisplayName = ({
   channelName,
   characterLimit,
   currentUserId,
@@ -23,12 +19,10 @@ export const getChannelPreviewDisplayName = <
   characterLimit: number;
   channelName?: string;
   currentUserId?: string;
-  members?: Channel<StreamChatGenerics>['state']['members'];
+  members?: Channel['state']['members'];
 }): string => {
   if (channelName) {
-    return channelName.length > characterLimit
-      ? `${channelName.slice(0, characterLimit - ELLIPSIS.length)}${ELLIPSIS}`
-      : channelName;
+    return channelName;
   }
 
   const channelMembers = Object.values(members || {});
@@ -76,34 +70,37 @@ export const getChannelPreviewDisplayName = <
   return name;
 };
 
-export const useChannelPreviewDisplayName = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  channel?: Channel<StreamChatGenerics>,
-  characterLength?: number,
-) => {
-  const { client } = useChatContext<StreamChatGenerics>();
+export const useChannelPreviewDisplayName = (channel?: Channel, characterLength?: number) => {
+  const { client } = useChatContext();
   const { vw } = useViewport();
 
-  const DEFAULT_MAX_CHARACTER_LENGTH = Math.floor((vw(100) - 16) / 6);
+  const DEFAULT_MAX_CHARACTER_LENGTH = (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 numOfMembers = Object.keys(members || {}).length;
+  const [displayName, setDisplayName] = useState(
+    getChannelPreviewDisplayName({
+      channelName,
+      characterLimit,
+      currentUserId,
+      members,
+    }),
+  );
 
-  const displayName = useMemo(
-    () =>
+  useEffect(() => {
+    setDisplayName(
       getChannelPreviewDisplayName({
         channelName,
         characterLimit,
         currentUserId,
         members,
       }),
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [channelName, characterLimit, currentUserId, members, numOfMembers],
-  );
+  }, [channelName, currentUserId, characterLimit, numOfMembers]);
 
   return displayName;
 };

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

@@ -1,8 +1,22 @@
-import type { Channel } from 'stream-chat';
+import { useEffect, useState } from 'react';
+
+import type { Channel, StreamChat } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+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
@@ -10,18 +24,20 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
  *
  * @returns {boolean} e.g., true
  */
-export const useChannelPreviewDisplayPresence = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  channel: Channel<StreamChatGenerics>,
-) => {
-  const { client } = useChatContext<StreamChatGenerics>();
-  const members = channel.state.members;
-  const membersCount = Object.keys(members).length;
+export const useChannelPreviewDisplayPresence = (channel: Channel) => {
+  const { client } = useChatContext();
+
+  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);
 
-  if (membersCount !== 2) return false;
+  const [displayPresence, setDisplayPresence] = useState(false);
 
-  const otherMember = Object.values(members).find((member) => member.user?.id !== client.userID);
+  useEffect(() => {
+    setDisplayPresence(getChannelPreviewDisplayPresence(channel, client));
+  }, [channel, channelMemberOnline, client]);
 
-  return otherMember?.user?.online ?? false;
+  return displayPresence;
 };

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

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