user avatar not visible after pinning a message (#484)

* fix/User avatar not visible after pinning a message. #466 * prettier code formatting done * fixed linting issue
RocketChat · Mar 3, 2024 · 79ee4cb · 79ee4cb
1 parent d35fed0
commit 79ee4cb
Showing 1 changed file with 40 additions and 12 deletions.
diff --git a/packages/react/src/components/Attachments/PinnedAttachment.js b/packages/react/src/components/Attachments/PinnedAttachment.js
@@ -1,18 +1,46 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
+import { Avatar } from '../Avatar';
+import RCContext from '../../context/RCInstance';
 
-const PinnedAttachment = ({ attachment }) => (
-  <Box
-    style={{
-      borderInlineStart: '1px solid currentColor',
-      paddingLeft: '0.8rem',
-    }}
-  >
-    <Box>{attachment?.author_name}</Box>
-    <Box>{attachment?.text}</Box>
-  </Box>
-);
+const PinnedAttachment = ({ attachment }) => {
+  const { RCInstance } = useContext(RCContext);
+  const getUserAvatarUrl = (authorIcon) => {
+    const host = RCInstance.getHost();
+    const URL = `${host}${authorIcon}`;
+    return URL;
+  };
+  return (
+    <Box
+      style={{
+        borderInlineStart: '1px solid currentColor',
+        paddingLeft: '0.8rem',
+      }}
+    >
+      <Box
+        style={{
+          display: 'flex',
+          gap: '0.3rem',
+        }}
+      >
+        <Avatar
+          url={getUserAvatarUrl(attachment?.author_icon)}
+          alt="avatar"
+          size="1.2em"
+        />
+        <Box>{attachment?.author_name}</Box>
+      </Box>
+      <Box
+        style={{
+          marginTop: '0.7rem',
+        }}
+      >
+        {attachment?.text}
+      </Box>
+    </Box>
+  );
+};
 
 export default PinnedAttachment;