Merge pull request #545 from GetStream/fix/CRS-288-fallback-initials-preview

CRS-288: add first letter of display name to avatar

Author: jaapbakker88

src/components/ChannelPreview/ChannelPreviewCompact.js

@@ -37,7 +37,11 @@ const ChannelPreviewCompact = (props) => {
       className={`str-chat__channel-preview-compact ${unreadClass} ${activeClass}`}
     >
       <div className="str-chat__channel-preview-compact--left">
-        <Avatar image={props.displayImage} size={20} />
+        <Avatar
+          image={props.displayImage}
+          name={props.displayTitle}
+          size={20}
+        />
       </div>
       <div className="str-chat__channel-preview-compact--right">
         {props.displayTitle}

src/components/ChannelPreview/ChannelPreviewLastMessage.js

@@ -36,7 +36,7 @@ const ChannelPreviewLastMessage = (props) => {
         {props.unread >= 1 && (
           <div className="str-chat__channel-preview--dot" />
         )}
-        <Avatar image={props.displayImage} />
+        <Avatar image={props.displayImage} name={props.displayTitle} />
         <div className="str-chat__channel-preview-info">
           <span className="str-chat__channel-preview-title">
             {props.displayTitle}

src/components/ChannelPreview/ChannelPreviewMessenger.js

@@ -36,7 +36,13 @@ const ChannelPreviewMessenger = (props) => {
       data-testid="channel-preview-button"
     >
       <div className="str-chat__channel-preview-messenger--left">
-        {<Avatar image={props.displayImage} size={40} />}
+        {
+          <Avatar
+            image={props.displayImage}
+            name={props.displayTitle}
+            size={40}
+          />
+        }
       </div>
       <div className="str-chat__channel-preview-messenger--right">
         <div className="str-chat__channel-preview-messenger--name">

src/components/ChannelPreview/__tests__/__snapshots__/ChannelPreviewCompact.test.js.snap

@@ -23,9 +23,10 @@ exports[`ChannelPreviewCompact should render correctly 1`] = `
           "width": "20px",
         }
       }
+      title="Channel name"
     >
       <img
-        alt=""
+        alt="C"
         className="str-chat__avatar-image"
         data-testid="avatar-img"
         onError={[Function]}

src/components/ChannelPreview/__tests__/__snapshots__/ChannelPreviewLastMessage.test.js.snap

@@ -25,9 +25,10 @@ exports[`ChannelPreviewLastMessage should render correctly 1`] = `
           "width": "32px",
         }
       }
+      title="Channel name"
     >
       <img
-        alt=""
+        alt="C"
         className="str-chat__avatar-image"
         data-testid="avatar-img"
         onError={[Function]}

src/components/ChannelPreview/__tests__/__snapshots__/ChannelPreviewMessenger.test.js.snap

@@ -23,9 +23,10 @@ exports[`ChannelPreviewMessenger should render correctly 1`] = `
           "width": "40px",
         }
       }
+      title="Channel name"
     >
       <img
-        alt=""
+        alt="C"
         className="str-chat__avatar-image"
         data-testid="avatar-img"
         onError={[Function]}