From 2fc5c21f72956da71a95393c59918152aad8f669 Mon Sep 17 00:00:00 2001
From: vladislavkeblysh <vladislav.keblysh@raccoongang.com>
Date: Wed, 11 Oct 2023 20:49:43 +0300
Subject: [PATCH] feat: add profile image to comment header

---
 src/discussions/post-comments/comments/comment/Comment.jsx   | 3 ++-
 .../post-comments/comments/comment/CommentHeader.jsx         | 5 +++++
 src/discussions/posts/post/PostHeader.jsx                    | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/discussions/post-comments/comments/comment/Comment.jsx b/src/discussions/post-comments/comments/comment/Comment.jsx
index 290bb95ab..330582fbe 100644
--- 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
index 4da4483ef..fd9bc4da3 100644
--- 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
index 33b6ec144..f8b5cfc28 100644
--- 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}>