stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/components/MessageList/__tests__/TypingIndicator.test.js

@@ -1,17 +1,15 @@
 import React from 'react';
-import { View } from 'react-native';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
-
-import { TypingIndicator } from '../TypingIndicator';
 
-import { Chat } from '../../Chat/Chat';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { ChannelProvider } from '../../../contexts/channelContext/ChannelContext';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
-import { Streami18n } from '../../../utils/Streami18n';
+import { TypingProvider } from '../../../contexts/typingContext/TypingContext';
 
 import { generateStaticUser, generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Streami18n } from '../../../utils/Streami18n';
+import { Chat } from '../../Chat/Chat';
+import { TypingIndicator } from '../TypingIndicator';
 
 afterEach(cleanup);
 
@@ -31,15 +29,15 @@ describe('TypingIndicator', () => {
     const { getByTestId } = render(
       <Chat client={chatClient}>
         <TranslationProvider value={{ t }}>
-          <ChannelProvider value={{ typing }}>
+          <TypingProvider value={{ typing }}>
             <TypingIndicator />
-          </ChannelProvider>
+          </TypingProvider>
         </TranslationProvider>
       </Chat>,
     );
-    expect(t).toHaveBeenCalledWith('{{ firstUser }} and {{ secondUser }} are typing...', {
+    expect(t).toHaveBeenCalledWith('{{ firstUser }} and {{ nonSelfUserLength }} more are typing', {
       firstUser: user1.name,
-      secondUser: user2.name,
+      nonSelfUserLength: 1,
     });
     await waitFor(() => {
       expect(getByTestId('typing-indicator')).toBeTruthy();
@@ -58,98 +56,17 @@ describe('TypingIndicator', () => {
     const { getByTestId } = render(
       <Chat client={chatClient}>
         <TranslationProvider value={{ t }}>
-          <ChannelProvider value={{ typing }}>
+          <TypingProvider value={{ typing }}>
             <TypingIndicator />
-          </ChannelProvider>
-        </TranslationProvider>
-      </Chat>,
-    );
-    expect(t).toHaveBeenCalledWith('{{ user }} is typing...', {
-      user: user1.name,
-    });
-    await waitFor(() => {
-      expect(getByTestId('typing-indicator')).toBeTruthy();
-    });
-  });
-
-  it('should render typing Avatar for one user', async () => {
-    const t = jest.fn((key) => key);
-    const user0 = generateUser();
-    const user1 = generateUser();
-
-    chatClient = await getTestClientWithUser({ id: user0.id });
-    await chatClient.setUser(user0, 'testToken');
-    const typing = { user1: { user: user1 } };
-
-    const { getByTestId, queryByTestId } = render(
-      <Chat client={chatClient}>
-        <TranslationProvider value={{ t }}>
-          <ChannelProvider value={{ typing }}>
-            <TypingIndicator Avatar={View} />
-          </ChannelProvider>
+          </TypingProvider>
         </TranslationProvider>
       </Chat>,
     );
-    expect(t).toHaveBeenCalledWith('{{ user }} is typing...', {
+    expect(t).toHaveBeenCalledWith('{{ user }} is typing', {
       user: user1.name,
     });
-
-    await waitFor(() => {
-      expect(getByTestId('typing-indicator')).toBeTruthy();
-      expect(getByTestId('typing-avatar-0')).toBeTruthy();
-      expect(queryByTestId('typing-avatar-1')).toBeFalsy();
-    });
-  });
-
-  it('should render typing Avatar for two users', async () => {
-    const t = jest.fn((key) => key);
-    const user0 = generateUser();
-    const user1 = generateUser();
-    const user2 = generateUser();
-
-    chatClient = await getTestClientWithUser({ id: user0.id });
-    await chatClient.setUser(user0, 'testToken');
-    const typing = { user1: { user: user1 }, user2: { user: user2 } };
-
-    const { getByTestId } = render(
-      <Chat client={chatClient}>
-        <TranslationProvider value={{ t }}>
-          <ChannelProvider value={{ typing }}>
-            <TypingIndicator Avatar={View} />
-          </ChannelProvider>
-        </TranslationProvider>
-      </Chat>,
-    );
-
-    await waitFor(() => {
-      expect(getByTestId('typing-indicator')).toBeTruthy();
-      expect(getByTestId('typing-avatar-0')).toBeTruthy();
-      expect(getByTestId('typing-avatar-1')).toBeTruthy();
-    });
-  });
-
-  it('should render no typing Avatars', async () => {
-    const t = jest.fn((key) => key);
-    const user0 = generateUser();
-
-    chatClient = await getTestClientWithUser({ id: user0.id });
-    await chatClient.setUser(user0, 'testToken');
-    const typing = {};
-
-    const { getByTestId, queryByTestId } = render(
-      <Chat client={chatClient}>
-        <TranslationProvider value={{ t }}>
-          <ChannelProvider value={{ typing }}>
-            <TypingIndicator Avatar={View} />
-          </ChannelProvider>
-        </TranslationProvider>
-      </Chat>,
-    );
-
     await waitFor(() => {
       expect(getByTestId('typing-indicator')).toBeTruthy();
-      expect(queryByTestId('typing-avatar-0')).toBeFalsy();
-      expect(queryByTestId('typing-avatar-1')).toBeFalsy();
     });
   });
 
@@ -167,9 +84,9 @@ describe('TypingIndicator', () => {
     const { toJSON } = render(
       <Chat client={chatClient}>
         <TranslationProvider value={{ t }}>
-          <ChannelProvider value={{ typing }}>
+          <TypingProvider value={{ typing }}>
             <TypingIndicator />
-          </ChannelProvider>
+          </TypingProvider>
         </TranslationProvider>
       </Chat>,
     );

package/src/components/MessageList/__tests__/__snapshots__/MessageSystem.test.js.snap

@@ -10,6 +10,7 @@ exports[`MessageSystem should match the snapshot for message system 1`] = `
         "justifyContent": "center",
         "marginBottom": 10,
       },
+      undefined,
       Object {},
     ]
   }
@@ -23,7 +24,7 @@ exports[`MessageSystem should match the snapshot for message system 1`] = `
           "height": 0.5,
         },
         Object {
-          "backgroundColor": "#EBEBEB",
+          "backgroundColor": "#ECEBEB",
         },
         Object {},
       ]
@@ -44,11 +45,13 @@ exports[`MessageSystem should match the snapshot for message system 1`] = `
       style={
         Array [
           Object {
-            "color": "#00000080",
             "fontSize": 10,
             "fontWeight": "bold",
             "textAlign": "center",
           },
+          Object {
+            "color": "#7A7A7A",
+          },
           Object {},
         ]
       }
@@ -59,11 +62,13 @@ exports[`MessageSystem should match the snapshot for message system 1`] = `
       style={
         Array [
           Object {
-            "color": "#00000080",
             "fontSize": 10,
             "fontWeight": "bold",
             "textAlign": "center",
           },
+          Object {
+            "color": "#7A7A7A",
+          },
           Object {},
         ]
       }
@@ -79,7 +84,7 @@ exports[`MessageSystem should match the snapshot for message system 1`] = `
           "height": 0.5,
         },
         Object {
-          "backgroundColor": "#EBEBEB",
+          "backgroundColor": "#ECEBEB",
         },
         Object {},
       ]

package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.js.snap

@@ -2,58 +2,104 @@
 
 exports[`ScrollToBottomButton should render the message notification and match snapshot 1`] = `
 <View
+  accessible={true}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "bottom": 0,
+      "bottom": 20,
       "opacity": 1,
       "position": "absolute",
+      "right": 20,
     }
   }
   testID="message-notification"
 >
   <View
-    accessible={true}
-    focusable={true}
-    isTVSelectable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#006CFF",
-        "borderRadius": 13,
-        "height": 27,
-        "justifyContent": "center",
-        "opacity": 1,
-        "transform": Array [
-          Object {
-            "translateY": 9,
-          },
-        ],
-        "width": 112,
-        "zIndex": 10,
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "height": 50,
+          "justifyContent": "flex-end",
+        },
+        Object {},
+      ]
     }
   >
-    <Text
+    <View
       style={
         Array [
           Object {
-            "color": "#FFFFFF",
-            "fontSize": 12,
-            "fontWeight": "600",
+            "alignItems": "center",
+            "borderRadius": 20,
+            "elevation": 5,
+            "height": 40,
+            "justifyContent": "center",
+            "shadowOffset": Object {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.25,
+            "shadowRadius": 4,
+            "width": 40,
+          },
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "shadowColor": "#000000",
           },
           Object {},
         ]
       }
     >
-      New Messages
-    </Text>
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={24}
+        bbWidth={24}
+        focusable={false}
+        height={24}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 24,
+              "width": 24,
+            },
+          ]
+        }
+        vbHeight={24}
+        vbWidth={24}
+        width={24}
+      >
+        <RNSVGGroup>
+          <RNSVGPath
+            clipRule={0}
+            d="M5.305 8.306a1.046 1.046 0 000 1.478l5.904 5.91c.228.228.536.33.834.302.27 0 .539-.101.744-.306l5.907-5.907a1.044 1.044 0 10-1.477-1.477l-5.22 5.22-5.216-5.22a1.043 1.043 0 00-1.476 0z"
+            fill={4278190080}
+            fillRule={0}
+            propList={
+              Array [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
   </View>
 </View>
 `;

package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap

@@ -7,8 +7,12 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
       Object {
         "alignItems": "center",
         "flexDirection": "row",
+        "height": 24,
         "justifyContent": "flex-start",
       },
+      Object {
+        "backgroundColor": "#FCFCFCE6",
+      },
       Object {},
     ]
   }
@@ -18,93 +22,92 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "justifyContent": "center",
+          "flexDirection": "row",
         },
         Object {},
-        undefined,
+        Object {
+          "marginLeft": 8,
+        },
       ]
     }
   >
-    <Image
-      accessibilityLabel="initials"
-      onError={[Function]}
-      resizeMethod="resize"
-      source={
+    <View
+      animatedStyle={
         Object {
-          "uri": "https://i.imgur.com/SLx06PP.png",
+          "value": Object {
+            "opacity": -0.3333333333333333,
+          },
         }
       }
+      collapsable={false}
       style={
-        Array [
-          Object {
-            "borderRadius": 16,
-            "height": 32,
-            "width": 32,
-          },
-          Object {
-            "borderRadius": 12,
-            "height": 24,
-            "width": 24,
-          },
-        ]
+        Object {
+          "backgroundColor": "#000000",
+          "borderRadius": 2,
+          "height": 4,
+          "marginRight": 2,
+          "opacity": -0.3333333333333333,
+          "width": 4,
+        }
       }
-      testID="typing-avatar-0"
     />
-  </View>
-  <View
-    style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "justifyContent": "center",
-        },
-        Object {},
-        undefined,
-      ]
-    }
-  >
-    <Image
-      accessibilityLabel="initials"
-      onError={[Function]}
-      resizeMethod="resize"
-      source={
+    <View
+      animatedStyle={
         Object {
-          "uri": "https://i.imgur.com/T68W8nR_d.webp?maxwidth=728&fidelity=grand",
+          "value": Object {
+            "opacity": 0.3333333333333333,
+          },
         }
       }
+      collapsable={false}
       style={
-        Array [
-          Object {
-            "borderRadius": 16,
-            "height": 32,
-            "width": 32,
-          },
-          Object {
-            "borderRadius": 12,
-            "height": 24,
-            "width": 24,
+        Object {
+          "backgroundColor": "#000000",
+          "borderRadius": 2,
+          "height": 4,
+          "marginHorizontal": 2,
+          "opacity": 0.3333333333333333,
+          "width": 4,
+        }
+      }
+    />
+    <View
+      animatedStyle={
+        Object {
+          "value": Object {
+            "opacity": 1,
           },
-        ]
+        }
+      }
+      collapsable={false}
+      style={
+        Object {
+          "backgroundColor": "#000000",
+          "borderRadius": 2,
+          "height": 4,
+          "marginLeft": 2,
+          "opacity": 1,
+          "width": 4,
+        }
       }
-      testID="typing-avatar-1"
     />
   </View>
   <Text
     style={
       Array [
         Object {
-          "marginLeft": 10,
+          "marginLeft": 8,
+        },
+        Object {
+          "color": "#7A7A7A",
         },
         Object {
-          "color": "#00000080",
           "fontSize": 14,
         },
-        Object {},
       ]
     }
   >
-    Grant and Neil are typing...
+    Arthur and 1 more are typing
   </Text>
 </View>
 `;

package/src/components/MessageList/hooks/useMessageList.ts

@@ -1,29 +1,19 @@
-import { getDateSeparators } from '../utils/getDateSeparators';
-import { getGroupStyles } from '../utils/getGroupStyles';
-import { getReadStates } from '../utils/getReadStates';
+import type { ChannelState, MessageResponse } from 'stream-chat';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import {
   ChannelContextValue,
   useChannelContext,
 } from '../../../contexts/channelContext/ChannelContext';
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { usePaginatedMessageListContext } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
-
-import type { ChannelState, MessageResponse } from 'stream-chat';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { getDateSeparators } from '../utils/getDateSeparators';
+import { getGroupStyles } from '../utils/getGroupStyles';
+import { getReadStates } from '../utils/getReadStates';
 
 export type UseMessageListParams = {
+  deletedMessagesVisibilityType?: 'always' | 'never' | 'receiver' | 'sender';
   inverted?: boolean;
   noGroupByUser?: boolean;
   threadList?: boolean;
@@ -32,75 +22,51 @@ export type UseMessageListParams = {
 export type GroupType = 'bottom' | 'middle' | 'single' | 'top';
 
 export type MessagesWithStylesReadByAndDateSeparator<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = MessageResponse<At, Ch, Co, Me, Re, Us> & {
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = MessageResponse<StreamChatGenerics> & {
   groupStyles: GroupType[];
   readBy: boolean | number;
   dateSeparator?: Date;
 };
 
 export type MessageType<
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > =
-  | ReturnType<ChannelState<At, Ch, Co, Ev, Me, Re, Us>['formatMessage']>
-  | MessagesWithStylesReadByAndDateSeparator<At, Ch, Co, Me, Re, Us>;
+  | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
+  | MessagesWithStylesReadByAndDateSeparator<StreamChatGenerics>;
 
 // Type guards to check MessageType
 export const isMessageWithStylesReadByAndDateSeparator = <
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  message: MessageType<At, Ch, Co, Ev, Me, Re, Us>,
-): message is MessagesWithStylesReadByAndDateSeparator<At, Ch, Co, Me, Re, Us> =>
-  (message as MessagesWithStylesReadByAndDateSeparator<At, Ch, Co, Me, Re, Us>).readBy !==
-  undefined;
+  message: MessageType<StreamChatGenerics>,
+): message is MessagesWithStylesReadByAndDateSeparator<StreamChatGenerics> =>
+  (message as MessagesWithStylesReadByAndDateSeparator<StreamChatGenerics>).readBy !== undefined;
 
 export const useMessageList = <
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   params: UseMessageListParams,
 ) => {
-  const { inverted, noGroupByUser, threadList } = params;
-  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { deletedMessagesVisibilityType, inverted, noGroupByUser, threadList } = params;
+  const { client } = useChatContext<StreamChatGenerics>();
   const { hideDateSeparators, maxTimeBetweenGroupedMessages, read } =
-    useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { messages } = usePaginatedMessageListContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { threadMessages } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
+    useChannelContext<StreamChatGenerics>();
+  const { messages } = usePaginatedMessageListContext<StreamChatGenerics>();
+  const { threadMessages } = useThreadContext<StreamChatGenerics>();
 
   const messageList = threadList ? threadMessages : messages;
-  const readList: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['read'] | undefined = threadList
+  const readList: ChannelContextValue<StreamChatGenerics>['read'] | undefined = threadList
     ? undefined
     : read;
 
-  const dateSeparators = getDateSeparators<At, Ch, Co, Ev, Me, Re, Us>({
+  const dateSeparators = getDateSeparators<StreamChatGenerics>({
     hideDateSeparators,
     messages: messageList,
     userId: client.userID,
   });
 
-  const messageGroupStyles = getGroupStyles<At, Ch, Co, Ev, Me, Re, Us>({
+  const messageGroupStyles = getGroupStyles<StreamChatGenerics>({
     dateSeparators,
     hideDateSeparators,
     maxTimeBetweenGroupedMessages,
@@ -112,11 +78,22 @@ export const useMessageList = <
   const readData = getReadStates(client.userID, messageList, readList);
 
   const messagesWithStylesReadByAndDateSeparator = messageList
-    .filter((msg) => !msg.deleted_at || msg.user?.id === client.userID)
+    .filter((msg) => {
+      const isMessageTypeDeleted = msg.type === 'deleted';
+      if (deletedMessagesVisibilityType === 'sender') {
+        return !isMessageTypeDeleted || msg.user?.id === client.userID;
+      } else if (deletedMessagesVisibilityType === 'receiver') {
+        return !isMessageTypeDeleted || msg.user?.id !== client.userID;
+      } else if (deletedMessagesVisibilityType === 'never') {
+        return !isMessageTypeDeleted;
+      } else {
+        return msg;
+      }
+    })
     .map((msg) => ({
       ...msg,
       dateSeparator: dateSeparators[msg.id] || undefined,
-      groupStyles: messageGroupStyles[msg.id] || [],
+      groupStyles: messageGroupStyles[msg.id] || ['single'],
       readBy: msg.id ? readData[msg.id] || false : false,
     }));
 
@@ -124,5 +101,5 @@ export const useMessageList = <
     inverted
       ? messagesWithStylesReadByAndDateSeparator.reverse()
       : messagesWithStylesReadByAndDateSeparator
-  ) as MessageType<At, Ch, Co, Ev, Me, Re, Us>[];
+  ) as MessageType<StreamChatGenerics>[];
 };