Adding direct messaging support for channel preview

GetStream · Apr 24, 2020 · b394079 · b394079
1 parent 4055fa7
commit b394079
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 15 deletions.
diff --git a/src/components/ChannelPreview.js b/src/components/ChannelPreview.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import { ChannelPreviewCountOnly } from './ChannelPreviewCountOnly';
-import { withTranslationContext } from '../context';
+import { withTranslationContext, withChatContext } from '../context';
 
 class ChannelPreview extends PureComponent {
   constructor(props) {
@@ -111,6 +111,32 @@ class ChannelPreview extends PureComponent {
     }
   };
 
+  getDisplayTitle = () => {
+    const { channel, client } = this.props;
+    let title = channel.data.name;
+    const members = Object.values(channel.state.members);
+
+    if (!title && members.length === 2) {
+      const otherMember = members.find((m) => m.user.id !== client.user.id);
+      title = otherMember.user.name;
+    }
+
+    return title;
+  };
+
+  getDisplayImage = () => {
+    const { channel, client } = this.props;
+    let image = channel.data.image;
+    const members = Object.values(channel.state.members);
+
+    if (!image && members.length === 2) {
+      const otherMember = members.find((m) => m.user.id !== client.user.id);
+      image = otherMember.user.image;
+    }
+
+    return image;
+  };
+
   render() {
     const props = { ...this.state, ...this.props };
 
@@ -119,6 +145,8 @@ class ChannelPreview extends PureComponent {
       <Preview
         {...props}
         latestMessage={this.getLatestMessage()}
+        displayTitle={this.getDisplayTitle()}
+        displayImage={this.getDisplayImage()}
         active={
           this.props.activeChannel &&
           this.props.activeChannel.cid === this.props.channel.cid
@@ -128,6 +156,6 @@ class ChannelPreview extends PureComponent {
   }
 }
 
-ChannelPreview = withTranslationContext(ChannelPreview);
+ChannelPreview = withTranslationContext(withChatContext(ChannelPreview));
 
 export { ChannelPreview };
diff --git a/src/components/ChannelPreviewCompact.js b/src/components/ChannelPreviewCompact.js
@@ -27,6 +27,10 @@ export class ChannelPreviewCompact extends React.PureComponent {
     active: PropTypes.bool,
     /** Latest message's text. */
     latestMessage: PropTypes.string,
+    /** Title of channel to display */
+    displayTitle: PropTypes.string,
+    /** Image of channel to display */
+    displayImage: PropTypes.string,
   };
 
   channelPreviewButton = React.createRef();
@@ -36,24 +40,27 @@ export class ChannelPreviewCompact extends React.PureComponent {
     this.channelPreviewButton.current.blur();
   };
   render() {
+    const { displayTitle, displayImage } = this.props;
     const unreadClass =
       this.props.unread_count >= 1
         ? 'str-chat__channel-preview-compact--unread'
         : '';
     const activeClass = this.props.active
       ? 'str-chat__channel-preview-compact--active'
       : '';
-    const name = this.props.channel.data.name || this.props.channel.cid;
+
     return (
       <button
         onClick={this.onSelectChannel}
         ref={this.channelPreviewButton}
         className={`str-chat__channel-preview-compact ${unreadClass} ${activeClass}`}
       >
         <div className="str-chat__channel-preview-compact--left">
-          <Avatar image={this.props.channel.data.image} size={20} />
+          <Avatar image={displayImage} size={20} />
+        </div>
+        <div className="str-chat__channel-preview-compact--right">
+          {displayTitle}
         </div>
-        <div className="str-chat__channel-preview-compact--right">{name}</div>
       </button>
     );
   }

diff --git a/src/components/ChannelPreviewCountOnly.js b/src/components/ChannelPreviewCountOnly.js
@@ -16,19 +16,23 @@ export class ChannelPreviewCountOnly extends PureComponent {
     watchers: PropTypes.object,
     /** Number of unread messages */
     unread: PropTypes.number,
+    /** Title of channel to display */
+    displayTitle: PropTypes.string,
+    /** Image of channel to display */
+    displayImage: PropTypes.string,
   };
 
   render() {
+    const { displayTitle } = this.props;
     const unreadClass = this.props.unread >= 1 ? 'unread' : '';
-    const name = this.props.channel.data.name || this.props.channel.cid;
 
     return (
       <div className={unreadClass}>
         <button
           onClick={this.props.setActiveChannel.bind(this, this.props.channel)}
         >
           {' '}
-          {name} <span>{this.props.unread}</span>
+          {displayTitle} <span>{this.props.unread}</span>
         </button>
       </div>
     );

diff --git a/src/components/ChannelPreviewLastMessage.js b/src/components/ChannelPreviewLastMessage.js
@@ -32,6 +32,10 @@ class ChannelPreviewLastMessage extends PureComponent {
     latestMessage: PropTypes.string,
     /** Length of latest message to truncate at */
     latestMessageLength: PropTypes.number,
+    /** Title of channel to display */
+    displayTitle: PropTypes.string,
+    /** Image of channel to display */
+    displayImage: PropTypes.string,
   };
 
   static defaultProps = {
@@ -46,14 +50,14 @@ class ChannelPreviewLastMessage extends PureComponent {
   };
 
   render() {
-    const { t } = this.props;
+    const { t, displayTitle, displayImage } = this.props;
 
     const unreadClass =
       this.props.unread >= 1 ? 'str-chat__channel-preview--unread' : '';
     const activeClass = this.props.active
       ? 'str-chat__channel-preview--active'
       : '';
-    const name = this.props.channel.data.name || this.props.channel.cid;
+
     return (
       <div
         className={`str-chat__channel-preview ${unreadClass} ${activeClass}`}
@@ -62,9 +66,11 @@ class ChannelPreviewLastMessage extends PureComponent {
           {this.props.unread >= 1 && (
             <div className="str-chat__channel-preview--dot" />
           )}
-          <Avatar image={this.props.channel.data.image} />
+          <Avatar image={displayImage} />
           <div className="str-chat__channel-preview-info">
-            <span className="str-chat__channel-preview-title">{name}</span>
+            <span className="str-chat__channel-preview-title">
+              {displayTitle}
+            </span>
             <span className="str-chat__channel-preview-last-message">
               {!this.props.channel.state.messages[0]
                 ? t('Nothing yet...')

diff --git a/src/components/ChannelPreviewMessenger.js b/src/components/ChannelPreviewMessenger.js
@@ -34,6 +34,10 @@ class ChannelPreviewMessenger extends PureComponent {
     latestMessage: PropTypes.string,
     /** Length of latest message to truncate at */
     latestMessageLength: PropTypes.number,
+    /** Title of channel to display */
+    displayTitle: PropTypes.string,
+    /** Image of channel to display */
+    displayImage: PropTypes.string,
   };
 
   static defaultProps = {
@@ -56,7 +60,7 @@ class ChannelPreviewMessenger extends PureComponent {
       ? 'str-chat__channel-preview-messenger--active'
       : '';
 
-    const { channel, t } = this.props;
+    const { channel, displayTitle, displayImage, t } = this.props;
 
     return (
       <button
@@ -65,11 +69,11 @@ class ChannelPreviewMessenger extends PureComponent {
         className={`str-chat__channel-preview-messenger ${unreadClass} ${activeClass}`}
       >
         <div className="str-chat__channel-preview-messenger--left">
-          {<Avatar image={channel.data.image} size={40} />}
+          {<Avatar image={displayImage} size={40} />}
         </div>
         <div className="str-chat__channel-preview-messenger--right">
           <div className="str-chat__channel-preview-messenger--name">
-            <span>{channel.data.name}</span>
+            <span>{displayTitle}</span>
           </div>
           <div className="str-chat__channel-preview-messenger--last-message">
             {!channel.state.messages[0]

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -199,7 +199,9 @@ export interface ChannelListUIComponentProps extends ChatContextValue {
   LoadingErrorIndicator?: React.ElementType<ChatDownProps>;
 }
 
-export interface ChannelPreviewProps extends TranslationContextValue {
+export interface ChannelPreviewProps
+  extends TranslationContextValue,
+    ChatContextValue {
   /** **Available from [chat context](https://getstream.github.io/stream-chat-react/#chat)** */
   channel: Client.Channel;
   /** Current selected channel object */
@@ -228,6 +230,10 @@ export interface ChannelPreviewProps extends TranslationContextValue {
 }
 
 export interface ChannelPreviewUIComponentProps extends ChannelPreviewProps {
+  /** Title of channel to display */
+  displayTitle?: string;
+  /** Image of channel to display */
+  displayImage?: string;
   /** Latest message's text. */
   latestMessage?: string;
   /** Length of latest message to truncate at */