feat: add profile image to comment header

openedx · Nov 8, 2024 · 2fc5c21 · 2fc5c21
1 parent 3ace4fd
commit 2fc5c21
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/discussions/post-comments/comments/comment/Comment.jsx b/src/discussions/post-comments/comments/comment/Comment.jsx
@@ -43,7 +43,7 @@ const Comment = ({
   const {
     id, parentId, childCount, abuseFlagged, endorsed, threadId, endorsedAt, endorsedBy, endorsedByLabel, renderedBody,
     voted, following, voteCount, authorLabel, author, createdAt, lastEdit, rawBody, closed, closedBy, closeReason,
-    editByLabel, closedByLabel,
+    editByLabel, closedByLabel, users: postUsers,
   } = comment;
   const intl = useIntl();
   const hasChildren = childCount > 0;
@@ -203,6 +203,7 @@ const Comment = ({
             closed={closed}
             createdAt={createdAt}
             lastEdit={lastEdit}
+            postUsers={postUsers}
           />
           {isEditing ? (
             <CommentEditor

diff --git a/src/discussions/post-comments/comments/comment/CommentHeader.jsx b/src/discussions/post-comments/comments/comment/CommentHeader.jsx
@@ -15,6 +15,7 @@ const CommentHeader = ({
   closed,
   createdAt,
   lastEdit,
+  postUsers,
 }) => {
   const colorClass = AvatarOutlineAndLabelColors[authorLabel];
   const hasAnyAlert = useAlertBannerVisible({
@@ -24,6 +25,8 @@ const CommentHeader = ({
     closed,
   });
 
+  const profileImage = postUsers && Object.values(postUsers)[0].profile.image;
+
   return (
     <div className={classNames('d-flex flex-row justify-content-between', {
       'mt-2': hasAnyAlert,
@@ -33,6 +36,7 @@ const CommentHeader = ({
         <Avatar
           className={`border-0 ml-0.5 mr-2.5 ${colorClass ? `outline-${colorClass}` : 'outline-anonymous'}`}
           alt={author}
+          src={profileImage?.hasImage ? profileImage?.imageUrlSmall : undefined}
           style={{
             width: '32px',
             height: '32px',
@@ -61,6 +65,7 @@ CommentHeader.propTypes = {
     editorUsername: PropTypes.string,
     reason: PropTypes.string,
   }),
+  postUsers: PropTypes.shape({}).isRequired,
 };
 
 CommentHeader.defaultProps = {

diff --git a/src/discussions/posts/post/PostHeader.jsx b/src/discussions/posts/post/PostHeader.jsx
@@ -37,7 +37,7 @@ export const PostAvatar = React.memo(({
     return spacing;
   }, [postType]);
 
-  const profileImage = Object.values(postUsers)[0].profile.image;
+  const profileImage = postUsers && Object.values(postUsers)[0].profile.image;
 
   return (
     <div className={avatarSpacing}>