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

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -1,28 +1,11 @@
 import { useMemo } from 'react';
 
-import type { MessageInputContextValue } from '../MessageInputContext';
-
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { ThreadContextValue } from '../../threadContext/ThreadContext';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { MessageInputContextValue } from '../MessageInputContext';
 
 export const useCreateMessageInputContext = <
-  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,
 >({
   additionalTextInputProps,
   appendText,
@@ -35,6 +18,8 @@ export const useCreateMessageInputContext = <
   closeAttachmentPicker,
   CommandsButton,
   compressImageQuality,
+  cooldownEndsAt,
+  CooldownTimer,
   doDocUploadRequest,
   doImageUploadRequest,
   editing,
@@ -78,6 +63,7 @@ export const useCreateMessageInputContext = <
   sending,
   sendMessage,
   sendMessageAsync,
+  SendMessageDisallowedIndicator,
   sendThreadMessageInChannel,
   setAsyncIds,
   setAsyncUploads,
@@ -104,9 +90,8 @@ export const useCreateMessageInputContext = <
   uploadNewFile,
   uploadNewImage,
   UploadProgressIndicator,
-  uploadsEnabled,
-}: MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us> &
-  Pick<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'thread'>) => {
+}: MessageInputContextValue<StreamChatGenerics> &
+  Pick<ThreadContextValue<StreamChatGenerics>, 'thread'>) => {
   const editingExists = !!editing;
   const fileUploadsValue = fileUploads.map(({ state }) => state).join();
   const imageUploadsValue = imageUploads.map(({ state }) => state).join();
@@ -118,7 +103,7 @@ export const useCreateMessageInputContext = <
     : '';
   const threadId = thread?.id;
 
-  const messageInputContext: MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us> = useMemo(
+  const messageInputContext: MessageInputContextValue<StreamChatGenerics> = useMemo(
     () => ({
       additionalTextInputProps,
       appendText,
@@ -131,6 +116,8 @@ export const useCreateMessageInputContext = <
       closeAttachmentPicker,
       CommandsButton,
       compressImageQuality,
+      cooldownEndsAt,
+      CooldownTimer,
       doDocUploadRequest,
       doImageUploadRequest,
       editing,
@@ -174,6 +161,7 @@ export const useCreateMessageInputContext = <
       sending,
       sendMessage,
       sendMessageAsync,
+      SendMessageDisallowedIndicator,
       sendThreadMessageInChannel,
       setAsyncIds,
       setAsyncUploads,
@@ -199,9 +187,9 @@ export const useCreateMessageInputContext = <
       uploadNewFile,
       uploadNewImage,
       UploadProgressIndicator,
-      uploadsEnabled,
     }),
     [
+      cooldownEndsAt,
       editingExists,
       fileUploadsValue,
       giphyActive,
@@ -214,7 +202,6 @@ export const useCreateMessageInputContext = <
       showMoreOptions,
       text,
       threadId,
-      uploadsEnabled,
     ],
   );
 

package/src/contexts/messageInputContext/hooks/useMessageDetailsForState.ts

@@ -1,52 +1,25 @@
 import { useEffect, useState } from 'react';
 
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { generateRandomId } from '../../../utils/utils';
 
 import type { FileUpload, ImageUpload, MessageInputContextValue } from '../MessageInputContext';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
-
 export const isEditingBoolean = <
-  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,
 >(
-  editing: MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>['editing'],
+  editing: MessageInputContextValue<StreamChatGenerics>['editing'],
 ): editing is boolean => typeof editing === 'boolean';
 
 export const useMessageDetailsForState = <
-  At extends DefaultAttachmentType = 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: MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>['editing'],
+  message: MessageInputContextValue<StreamChatGenerics>['editing'],
   initialValue?: string,
 ) => {
   const [fileUploads, setFileUploads] = useState<FileUpload[]>([]);
   const [imageUploads, setImageUploads] = useState<ImageUpload[]>([]);
-  const [mentionedUsers, setMentionedUsers] = useState(
-    (!isEditingBoolean<At, Ch, Co, Ev, Me, Re, Us>(message) &&
-      Array.isArray(message?.mentioned_users) &&
-      message.mentioned_users.map((user) => user.id)) ||
-      [],
-  );
+  const [mentionedUsers, setMentionedUsers] = useState<string[]>([]);
   const [numberOfUploads, setNumberOfUploads] = useState(0);
   const [showMoreOptions, setShowMoreOptions] = useState(true);
   const initialTextValue = initialValue || '';
@@ -60,8 +33,16 @@ export const useMessageDetailsForState = <
 
   const messageValue =
     typeof message === 'boolean' ? '' : `${message.id}${message.text}${message.updated_at}`;
+
+  useEffect(() => {
+    if (!isEditingBoolean<StreamChatGenerics>(message) && Array.isArray(message?.mentioned_users)) {
+      const mentionedUsers = message.mentioned_users.map((user) => user.id);
+      setMentionedUsers(mentionedUsers);
+    }
+  }, [messageValue]);
+
   useEffect(() => {
-    if (message && !isEditingBoolean<At, Ch, Co, Ev, Me, Re, Us>(message)) {
+    if (message && !isEditingBoolean<StreamChatGenerics>(message)) {
       setText(message?.text || '');
       const newFileUploads = [];
       const newImageUploads = [];

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -1,122 +1,86 @@
-import React, { PropsWithChildren, useContext, useState } from 'react';
+import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
-import type { StyleProp, TextStyle } from 'react-native';
 import type { Attachment } from 'stream-chat';
 
-import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
-import type { MessagesContextValue } from '../messagesContext/MessagesContext';
+import { useResettableState } from './hooks/useResettableState';
 
 import type { GroupType, MessageType } from '../../components/MessageList/hooks/useMessageList';
-import type { MessageActionsProps } from '../../components/MessageOverlay/MessageActions';
+import type { MessageActionListProps } from '../../components/MessageOverlay/MessageActionList';
+import type {
+  MessageActionListItemProps,
+  MessageActionType,
+} from '../../components/MessageOverlay/MessageActionListItem';
 import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
 import type { OverlayReactionsProps } from '../../components/MessageOverlay/OverlayReactions';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { OverlayReactionsAvatarProps } from '../../components/MessageOverlay/OverlayReactionsAvatar';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
-
-export type MessageAction = {
-  action: () => void;
-  title: string;
-  icon?: React.ReactElement;
-  titleStyle?: StyleProp<TextStyle>;
-};
+import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
+import type { MessagesContextValue } from '../messagesContext/MessagesContext';
+import type { OwnCapabilitiesContextValue } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type MessageOverlayData<
-  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,
 > = {
   alignment?: Alignment;
   clientId?: string;
-  files?: Attachment<At>[];
+  files?: Attachment<StreamChatGenerics>[];
   groupStyles?: GroupType[];
   handleReaction?: (reactionType: string) => Promise<void>;
-  images?: Attachment<At>[];
-  message?: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
-  messageActions?: MessageAction[];
-  messageContext?: MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>;
+  images?: Attachment<StreamChatGenerics>[];
+  message?: MessageType<StreamChatGenerics>;
+  messageActions?: MessageActionType[];
+  messageContext?: MessageContextValue<StreamChatGenerics>;
   messageReactionTitle?: string;
-  messagesContext?: MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>;
+  messagesContext?: MessagesContextValue<StreamChatGenerics>;
   onlyEmojis?: boolean;
-  otherAttachments?: Attachment<At>[];
-  OverlayReactionList?: React.ComponentType<OverlayReactionListProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  otherAttachments?: Attachment<StreamChatGenerics>[];
+  OverlayReactionList?: React.ComponentType<OverlayReactionListProps<StreamChatGenerics>>;
+  ownCapabilities?: OwnCapabilitiesContextValue;
   supportedReactions?: ReactionData[];
   threadList?: boolean;
 };
 
 export type MessageOverlayContextValue<
-  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,
 > = {
   /**
    * Custom UI component for rendering [message actions](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/2.png) in overlay.
    *
-   * **Default** [MessageActions](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageOverlay/MessageActions.tsx)
+   * **Default** [MessageActionList](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageOverlay/MessageActions.tsx)
    */
-  MessageActions: React.ComponentType<MessageActionsProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  MessageActionList: React.ComponentType<MessageActionListProps<StreamChatGenerics>>;
+  MessageActionListItem: React.ComponentType<MessageActionListItemProps<StreamChatGenerics>>;
   /**
    * Custom UI component for rendering [reaction selector](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/2.png) in overlay (which shows up on long press on message).
    *
    * **Default** [OverlayReactionList](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageOverlay/OverlayReactionList.tsx)
    */
-  OverlayReactionList: React.ComponentType<OverlayReactionListProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  OverlayReactionList: React.ComponentType<OverlayReactionListProps<StreamChatGenerics>>;
   /**
    * Custom UI component for rendering [reactions list](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/2.png), in overlay (which shows up on long press on message).
    *
    * **Default** [OverlayReactions](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageOverlay/OverlayReactions.tsx)
    */
-  OverlayReactions: React.ComponentType<OverlayReactionsProps>;
+  OverlayReactions: React.ComponentType<OverlayReactionsProps<StreamChatGenerics>>;
+  OverlayReactionsAvatar: React.ComponentType<OverlayReactionsAvatarProps>;
   reset: () => void;
-  setData: React.Dispatch<React.SetStateAction<MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>>>;
-  data?: MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>;
+  setData: React.Dispatch<React.SetStateAction<MessageOverlayData<StreamChatGenerics>>>;
+  data?: MessageOverlayData<StreamChatGenerics>;
 };
 
 export const MessageOverlayContext = React.createContext({} as MessageOverlayContextValue);
 
 export const MessageOverlayProvider = <
-  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,
 >({
   children,
   value,
 }: PropsWithChildren<{
-  value?: MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>;
+  value?: MessageOverlayContextValue<StreamChatGenerics>;
 }>) => {
-  const [data, setData] = useState(value?.data);
-
-  const reset = () => {
-    setData(value?.data);
-  };
-
-  const messageOverlayContext = {
-    data,
-    reset,
-    setData,
-  };
+  const messageOverlayContext = useResettableState(value);
   return (
     <MessageOverlayContext.Provider value={messageOverlayContext as MessageOverlayContextValue}>
       {children}
@@ -125,23 +89,9 @@ export const MessageOverlayProvider = <
 };
 
 export const useMessageOverlayContext = <
-  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,
 >() =>
-  useContext(MessageOverlayContext) as unknown as MessageOverlayContextValue<
-    At,
-    Ch,
-    Co,
-    Ev,
-    Me,
-    Re,
-    Us
-  >;
+  useContext(MessageOverlayContext) as unknown as MessageOverlayContextValue<StreamChatGenerics>;
 
 /**
  * Typescript currently does not support partial inference so if MessageOverlayContext
@@ -150,20 +100,14 @@ export const useMessageOverlayContext = <
  */
 export const withMessageOverlayContext = <
   P extends UnknownType,
-  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,
 >(
   Component: React.ComponentType<P>,
-): React.FC<Omit<P, keyof MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>>> => {
+): React.FC<Omit<P, keyof MessageOverlayContextValue<StreamChatGenerics>>> => {
   const WithMessageOverlayContextComponent = (
-    props: Omit<P, keyof MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>>,
+    props: Omit<P, keyof MessageOverlayContextValue<StreamChatGenerics>>,
   ) => {
-    const messageContext = useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();
+    const messageContext = useMessageOverlayContext<StreamChatGenerics>();
 
     return <Component {...(props as P)} {...messageContext} />;
   };

package/src/contexts/messageOverlayContext/hooks/useResettableState.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Button, Text } from 'react-native';
+
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+
+import { useResettableState } from './useResettableState';
+
+const TestComponent = () => {
+  const { data, reset, setData } = useResettableState(0);
+
+  return (
+    <>
+      <Text testID='value'>{`${data}`}</Text>
+      <Button
+        onPress={() => {
+          setData(data + 1);
+        }}
+        testID='increment'
+        title='Super useful incrementer'
+      />
+      <Button
+        onPress={() => {
+          reset();
+        }}
+        testID='reset'
+        title='Oh no, go back!'
+      />
+    </>
+  );
+};
+
+const waitForOptions = {
+  timeout: 1000,
+};
+
+test('useResettableState can be reset to its initial state', async () => {
+  const { getByTestId } = render(<TestComponent />);
+
+  await waitFor(() => expect(getByTestId('value').children[0]).toBe('0'), waitForOptions);
+
+  fireEvent.press(getByTestId('increment'));
+  await waitFor(() => expect(getByTestId('value').children[0]).toBe('1'), waitForOptions);
+
+  fireEvent.press(getByTestId('reset'));
+  await waitFor(() => expect(getByTestId('value').children[0]).toBe('0'), waitForOptions);
+});

package/src/contexts/messageOverlayContext/hooks/useResettableState.ts

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
+
+/**
+ * Wrapper around useState that provides a `reset`
+ * function to reset the state to its initial value.
+ *
+ * Will not set state after being unmounted.
+ * */
+export const useResettableState = <T>(values: T) => {
+  const [data, setData] = useState(values);
+  const isMounted = useIsMountedRef();
+
+  const reset = () => {
+    if (isMounted.current) {
+      setData(values);
+    }
+  };
+
+  return { data, reset, setData };
+};