Merge branch 'master' into channel-context-notifications

DanC5 · DanC5 · commit 52bee5a83b4f · 2021-03-29T08:27:56.000-06:00
diff --git a/examples/messaging/yarn.lock b/examples/messaging/yarn.lock
@@ -9078,10 +9078,10 @@ react-file-icon@^0.2.0:
     react-dom "^16.2.0"
     tinycolor2 "^1.4.1"
 
-react-file-utils@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/react-file-utils/-/react-file-utils-1.0.1.tgz#59645dc48d94417b87767327ff8627e3943bfbfc"
-  integrity sha512-gk0zvYAprvdQnFDy2zI3IDy8/q6vDPrJ8bFzsYQKonPccov549t5zt96827cLov4mwySvAMaHnlpCifTymu0Gg==
+react-file-utils@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-file-utils/-/react-file-utils-1.0.2.tgz#c2719584b79f551e12b2b56457ce8bdd3155aeb1"
+  integrity sha512-nMLe+Lrebq+Nr9Fk8LmgQ8ofl5uwKFx2vwwoT0Gbe1B+EP95PBivC6kxt8IB5KyD7hYSWt4IHYm12RiXQ60uiw==
   dependencies:
     "@fortawesome/fontawesome-svg-core" "^1.2.13"
     "@fortawesome/free-regular-svg-icons" "^5.7.0"
diff --git a/src/components/ChannelPreview/ChannelPreview.tsx b/src/components/ChannelPreview/ChannelPreview.tsx
@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import {
-  ChannelPreviewCountOnly,
-  ChannelPreviewCountOnlyProps,
-} from './ChannelPreviewCountOnly';
+import { ChannelPreviewCountOnly } from './ChannelPreviewCountOnly';
 import {
   getDisplayImage,
   getDisplayTitle,
@@ -13,13 +10,12 @@ import {
 import { ChatContextValue, useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 
-import type { Channel, Event, MessageResponse } from 'stream-chat';
-
-import type { ChannelPreviewCompactProps } from './ChannelPreviewCompact';
-import type { ChannelPreviewMessengerProps } from './ChannelPreviewMessenger';
+import type { Channel, Event } from 'stream-chat';
 
 import type { AvatarProps } from '../Avatar/Avatar';
 
+import type { StreamMessage } from '../../context/ChannelContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -38,14 +34,22 @@ export type ChannelPreviewUIComponentProps<
   Me extends DefaultMessageType = DefaultMessageType,
   Re extends DefaultReactionType = DefaultReactionType,
   Us extends DefaultUserType<Us> = DefaultUserType
-> =
-  | ChannelPreviewCompactProps<At, Ch, Co, Ev, Me, Re, Us>
-  | ChannelPreviewCountOnlyProps<At, Ch, Co, Ev, Me, Re, Us>
-  | ChannelPreviewMessengerProps<At, Ch, Co, Ev, Me, Re, Us>
-  | {
-      channel: Channel<At, Ch, Co, Ev, Me, Re, Us>;
-      lastMessage?: MessageResponse<At, Ch, Co, Me, Re, Us>;
-    };
+> = ChannelPreviewProps<At, Ch, Co, Ev, Me, Re, Us> & {
+  /** If the component's channel is the active (selected) Channel */
+  active?: boolean;
+  /** Image of Channel to display */
+  displayImage?: string;
+  /** Title of Channel to display */
+  displayTitle?: string;
+  /** The last message received in a channel */
+  lastMessage?: StreamMessage<At, Ch, Co, Ev, Me, Re, Us>;
+  /** Latest message preview text to display */
+  latestMessage?: string;
+  /** Text truncation limit for latest message */
+  latestMessageLength?: number;
+  /** Number of unread Messages */
+  unread?: number;
+};
 
 export type ChannelPreviewProps<
   At extends DefaultAttachmentType = DefaultAttachmentType,
@@ -60,10 +64,13 @@ export type ChannelPreviewProps<
   channel: Channel<At, Ch, Co, Ev, Me, Re, Us>;
   /** Current selected channel object */
   activeChannel?: Channel<At, Ch, Co, Ev, Me, Re, Us>;
+  /**
+   * Custom UI component to display user avatar
+   * Defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx)
+   */
   Avatar?: React.ComponentType<AvatarProps>;
+  /** Forces the update of preview component on channel update */
   channelUpdateCount?: number;
-  // Prop to trigger a re-render of the preview component after connection is recovered.
-  connectionRecoveredCount?: number;
   key?: string;
   /**
    * Available built-in options (also accepts the same props as):
@@ -77,6 +84,7 @@ export type ChannelPreviewProps<
   Preview?: React.ComponentType<
     ChannelPreviewUIComponentProps<At, Ch, Co, Ev, Me, Re, Us>
   >;
+  /** Setter for selected Channel */
   setActiveChannel?: ChatContextValue<
     At,
     Ch,
@@ -86,6 +94,11 @@ export type ChannelPreviewProps<
     Re,
     Us
   >['setActiveChannel'];
+  /**
+   * Object containing watcher parameters
+   * @see See [Pagination documentation](https://getstream.io/chat/docs/react/channel_pagination/?language=js) for a list of available fields for sort.
+   */
+  watchers?: { limit?: number; offset?: number };
 };
 
 export const ChannelPreview = <
@@ -110,11 +123,11 @@ export const ChannelPreview = <
     Re,
     Us
   >();
-  const { t } = useTranslationContext();
+  const { t, userLanguage } = useTranslationContext();
 
   const [lastMessage, setLastMessage] = useState<
-    MessageResponse<At, Ch, Co, Me, Re, Us>
-  >();
+    StreamMessage<At, Ch, Co, Ev, Me, Re, Us>
+  >(channel.state.messages[channel.state.messages.length - 1]);
   const [unread, setUnread] = useState(0);
 
   const isActive = activeChannel?.cid === channel.cid;
@@ -130,7 +143,7 @@ export const ChannelPreview = <
 
   useEffect(() => {
     const handleEvent = (event: Event<At, Ch, Co, Ev, Me, Re, Us>) => {
-      setLastMessage(event.message);
+      if (event.message) setLastMessage(event.message);
 
       if (!isActive && !muted) {
         setUnread(channel.countUnread());
@@ -159,7 +172,7 @@ export const ChannelPreview = <
       displayImage={getDisplayImage(channel, client.user)}
       displayTitle={getDisplayTitle(channel, client.user)}
       lastMessage={lastMessage}
-      latestMessage={getLatestMessagePreview(channel, t)}
+      latestMessage={getLatestMessagePreview(channel, t, userLanguage)}
       setActiveChannel={setActiveChannel}
       unread={unread}
     />
diff --git a/src/components/ChannelPreview/ChannelPreviewCompact.tsx b/src/components/ChannelPreview/ChannelPreviewCompact.tsx
@@ -1,10 +1,8 @@
 import React, { useRef } from 'react';
 
-import { AvatarProps, Avatar as DefaultAvatar } from '../Avatar/Avatar';
+import { Avatar as DefaultAvatar } from '../Avatar/Avatar';
 
-import type { Channel } from 'stream-chat';
-
-import type { ChatContextValue } from '../../context/ChatContext';
+import type { ChannelPreviewUIComponentProps } from './ChannelPreview';
 
 import type {
   DefaultAttachmentType,
@@ -16,52 +14,6 @@ import type {
   DefaultUserType,
 } from '../../../types/types';
 
-export type ChannelPreviewCompactProps<
-  At extends DefaultAttachmentType = DefaultAttachmentType,
-  Ch extends DefaultChannelType = DefaultChannelType,
-  Co extends DefaultCommandType = DefaultCommandType,
-  Ev extends DefaultEventType = DefaultEventType,
-  Me extends DefaultMessageType = DefaultMessageType,
-  Re extends DefaultReactionType = DefaultReactionType,
-  Us extends DefaultUserType<Us> = DefaultUserType
-> = {
-  /** Comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from [ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) */
-  channel: Channel<At, Ch, Co, Ev, Me, Re, Us>;
-  /** If channel of component is active (selected) Channel */
-  active?: boolean;
-  /** Current selected Channel object */
-  activeChannel?: Channel<At, Ch, Co, Ev, Me, Re, Us>;
-  /**
-   * Custom UI component to display user avatar
-   *
-   * Defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx)
-   */
-  Avatar?: React.ComponentType<AvatarProps>;
-  /** Image of Channel to display */
-  displayImage?: string;
-  /** Title of Channel to display */
-  displayTitle?: string;
-  /** Latest Message's text */
-  latestMessage?: string;
-  /** Setter for selected Channel */
-  setActiveChannel?: ChatContextValue<
-    At,
-    Ch,
-    Co,
-    Ev,
-    Me,
-    Re,
-    Us
-  >['setActiveChannel'];
-  /** Number of unread Messages */
-  unread?: number;
-  /**
-   * Object containing watcher parameters
-   * @see See [Pagination documentation](https://getstream.io/chat/docs/react/channel_pagination/?language=js) for a list of available fields for sort.
-   */
-  watchers?: { limit?: number; offset?: number };
-};
-
 const UnMemoizedChannelPreviewCompact = <
   At extends DefaultAttachmentType = DefaultAttachmentType,
   Ch extends DefaultChannelType = DefaultChannelType,
@@ -71,7 +23,7 @@ const UnMemoizedChannelPreviewCompact = <
   Re extends DefaultReactionType = DefaultReactionType,
   Us extends DefaultUserType<Us> = DefaultUserType
 >(
-  props: ChannelPreviewCompactProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelPreviewUIComponentProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
   const {
     active,
diff --git a/src/components/ChannelPreview/ChannelPreviewCountOnly.tsx b/src/components/ChannelPreview/ChannelPreviewCountOnly.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 
-import type { Channel } from 'stream-chat';
-
-import type { ChatContextValue } from '../../context/ChatContext';
+import type { ChannelPreviewUIComponentProps } from './ChannelPreview';
 
 import type {
   DefaultAttachmentType,
@@ -14,38 +12,6 @@ import type {
   DefaultUserType,
 } from '../../../types/types';
 
-export type ChannelPreviewCountOnlyProps<
-  At extends DefaultAttachmentType = DefaultAttachmentType,
-  Ch extends DefaultChannelType = DefaultChannelType,
-  Co extends DefaultCommandType = DefaultCommandType,
-  Ev extends DefaultEventType = DefaultEventType,
-  Me extends DefaultMessageType = DefaultMessageType,
-  Re extends DefaultReactionType = DefaultReactionType,
-  Us extends DefaultUserType<Us> = DefaultUserType
-> = {
-  /** Comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from [ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) */
-  channel: Channel<At, Ch, Co, Ev, Me, Re, Us>;
-  /** Title of channel to display */
-  displayTitle?: string;
-  /** @see See [ChatContext](https://getstream.github.io/stream-chat-react/#chat) for doc */
-  setActiveChannel?: ChatContextValue<
-    At,
-    Ch,
-    Co,
-    Ev,
-    Me,
-    Re,
-    Us
-  >['setActiveChannel'];
-  /** Number of unread messages */
-  unread?: number;
-  /**
-   * Object containing watcher parameters
-   * @see See [Pagination documentation](https://getstream.io/chat/docs/#channel_pagination) for a list of available fields for sort.
-   */
-  watchers?: { limit?: number; offset?: number };
-};
-
 const UnMemoizedChannelPreviewCountOnly = <
   At extends DefaultAttachmentType = DefaultAttachmentType,
   Ch extends DefaultChannelType = DefaultChannelType,
@@ -55,7 +21,7 @@ const UnMemoizedChannelPreviewCountOnly = <
   Re extends DefaultReactionType = DefaultReactionType,
   Us extends DefaultUserType<Us> = DefaultUserType
 >(
-  props: ChannelPreviewCountOnlyProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelPreviewUIComponentProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
   const { channel, displayTitle, setActiveChannel, unread, watchers } = props;
 
diff --git a/src/components/ChannelPreview/ChannelPreviewLastMessage.tsx b/src/components/ChannelPreview/ChannelPreviewLastMessage.tsx
@@ -1,12 +1,10 @@
 import React, { useRef } from 'react';
 
-import { AvatarProps, Avatar as DefaultAvatar } from '../Avatar';
+import { Avatar as DefaultAvatar } from '../Avatar';
 
 import { truncate } from '../../utils';
 
-import type { Channel } from 'stream-chat';
-
-import type { ChatContextValue } from '../../context/ChatContext';
+import type { ChannelPreviewUIComponentProps } from './ChannelPreview';
 
 import type {
   DefaultAttachmentType,
@@ -18,54 +16,6 @@ import type {
   DefaultUserType,
 } from '../../../types/types';
 
-export type ChannelPreviewLastMessageProps<
-  At extends DefaultAttachmentType = DefaultAttachmentType,
-  Ch extends DefaultChannelType = DefaultChannelType,
-  Co extends DefaultCommandType = DefaultCommandType,
-  Ev extends DefaultEventType = DefaultEventType,
-  Me extends DefaultMessageType = DefaultMessageType,
-  Re extends DefaultReactionType = DefaultReactionType,
-  Us extends DefaultUserType<Us> = DefaultUserType
-> = {
-  /** Comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from [ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) */
-  channel: Channel<At, Ch, Co, Ev, Me, Re, Us>;
-  /** If channel of component is active (selected) Channel */
-  active?: boolean;
-  /** Current selected channel object */
-  activeChannel?: Channel<At, Ch, Co, Ev, Me, Re, Us>;
-  /**
-   * Custom UI component to display user avatar
-   *
-   * Defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx)
-   */
-  Avatar?: React.ComponentType<AvatarProps>;
-  /** Image of Channel to display */
-  displayImage?: string;
-  /** Title of Channel to display */
-  displayTitle?: string;
-  /** Latest Message's text */
-  latestMessage?: string;
-  /** Length of latest Message to truncate at */
-  latestMessageLength?: number;
-  /** Setter for selected Channel */
-  setActiveChannel?: ChatContextValue<
-    At,
-    Ch,
-    Co,
-    Ev,
-    Me,
-    Re,
-    Us
-  >['setActiveChannel'];
-  /** Number of unread Messages */
-  unread?: number;
-  /**
-   * Object containing watcher parameters
-   * @see See [Pagination documentation](https://getstream.io/chat/docs/react/channel_pagination/?language=js) for a list of available fields for sort.
-   */
-  watchers?: { limit?: number; offset?: number };
-};
-
 const UnMemoizedChannelPreviewLastMessage = <
   At extends DefaultAttachmentType = DefaultAttachmentType,
   Ch extends DefaultChannelType = DefaultChannelType,
@@ -75,7 +25,7 @@ const UnMemoizedChannelPreviewLastMessage = <
   Re extends DefaultReactionType = DefaultReactionType,
   Us extends DefaultUserType<Us> = DefaultUserType
 >(
-  props: ChannelPreviewLastMessageProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelPreviewUIComponentProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
   const {
     active,
diff --git a/src/components/ChannelPreview/ChannelPreviewMessenger.tsx b/src/components/ChannelPreview/ChannelPreviewMessenger.tsx
diff --git a/src/components/ChannelPreview/utils.ts b/src/components/ChannelPreview/utils.ts
