feat: add profile image to avatar

openedx · Oct 11, 2023 · 1874a20 · 1874a20
1 parent 68c1852
commit 1874a20
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/discussions/posts/post/Post.jsx b/src/discussions/posts/post/Post.jsx
@@ -31,7 +31,7 @@ const Post = ({ handleAddResponseButton }) => {
   const {
     topicId, abuseFlagged, closed, pinned, voted, hasEndorsed, following, closedBy, voteCount, groupId, groupName,
     closeReason, authorLabel, type: postType, author, title, createdAt, renderedBody, lastEdit, editByLabel,
-    closedByLabel,
+    closedByLabel, users: postUsers,
   } = useSelector(selectThread(postId));
   const intl = useIntl();
   const location = useLocation();
@@ -183,6 +183,7 @@ const Post = ({ handleAddResponseButton }) => {
         lastEdit={lastEdit}
         postType={postType}
         title={title}
+        postUsers={postUsers}
       />
       <div className="d-flex mt-14px text-break font-style text-primary-500">
         <HTMLLoader htmlNode={renderedBody} componentId="post" cssClassName="html-loader" testId={postId} />

diff --git a/src/discussions/posts/post/PostHeader.jsx b/src/discussions/posts/post/PostHeader.jsx
@@ -13,7 +13,7 @@ import { useAlertBannerVisible } from '../../data/hooks';
 import messages from './messages';
 
 export const PostAvatar = React.memo(({
-  author, postType, authorLabel, fromPostLink, read,
+  author, postType, authorLabel, fromPostLink, read, postUsers,
 }) => {
   const outlineColor = AvatarOutlineAndLabelColors[authorLabel];
 
@@ -37,6 +37,8 @@ export const PostAvatar = React.memo(({
     return spacing;
   }, [postType]);
 
+  const profileImage = Object.values(postUsers)[0].profile.image;
+
   return (
     <div className={avatarSpacing}>
       {postType === ThreadType.QUESTION && (
@@ -58,6 +60,7 @@ export const PostAvatar = React.memo(({
           height: avatarSize,
           width: avatarSize,
         }}
+        src={profileImage?.hasImage ? profileImage?.imageUrlSmall : undefined}
         alt={author}
       />
     </div>
@@ -70,6 +73,7 @@ PostAvatar.propTypes = {
   authorLabel: PropTypes.string,
   fromPostLink: PropTypes.bool,
   read: PropTypes.bool,
+  postUsers: PropTypes.shape({}).isRequired,
 };
 
 PostAvatar.defaultProps = {
@@ -89,6 +93,7 @@ const PostHeader = ({
   title,
   postType,
   preview,
+  postUsers,
 }) => {
   const intl = useIntl();
   const showAnsweredBadge = preview && hasEndorsed && postType === ThreadType.QUESTION;
@@ -100,7 +105,7 @@ const PostHeader = ({
   return (
     <div className={classNames('d-flex flex-fill mw-100', { 'mt-10px': hasAnyAlert && !preview })}>
       <div className="flex-shrink-0">
-        <PostAvatar postType={postType} author={author} authorLabel={authorLabel} />
+        <PostAvatar postType={postType} author={author} authorLabel={authorLabel} postUsers={postUsers} />
       </div>
       <div className="align-items-center d-flex flex-row">
         <div className="d-flex flex-column justify-content-start mw-100">
@@ -150,6 +155,7 @@ PostHeader.propTypes = {
     reason: PropTypes.string,
   }),
   closed: PropTypes.bool,
+  postUsers: PropTypes.shape({}).isRequired,
 };
 
 PostHeader.defaultProps = {

diff --git a/src/discussions/posts/post/PostLink.jsx b/src/discussions/posts/post/PostLink.jsx
@@ -37,6 +37,7 @@ const PostLink = ({
   const {
     topicId, hasEndorsed, type, author, authorLabel, abuseFlagged, abuseFlaggedCount, read, commentCount,
     unreadCommentCount, id, pinned, previewBody, title, voted, voteCount, following, groupId, groupName, createdAt,
+    users: postUsers,
   } = useSelector(selectThread(postId));
   const linkUrl = discussionsPath(Routes.COMMENTS.PAGES[page], {
     0: enableInContextSidebar ? 'in-context' : undefined,
@@ -84,6 +85,7 @@ const PostLink = ({
           authorLabel={authorLabel}
           fromPostLink
           read={isPostRead}
+          postUsers={postUsers}
         />
         <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
           <div className="d-flex flex-column justify-content-start mw-100 flex-fill" style={{ marginBottom: '-3px' }}>