Fix/#334 source image fix (#335)

* added-babel-config * mods * changed-host-to-dynamic * construct-source-using-host * used URL object to create url using host as base Signed-off-by: Abhinav Kumar <[email protected]> * added changesets Signed-off-by: Abhinav Kumar <[email protected]> --------- Signed-off-by: Abhinav Kumar <[email protected]> Co-authored-by: Abhinav Kumar <[email protected]>
RocketChat · Dec 13, 2023 · c8c9dee · c8c9dee
1 parent 100c5f7
commit c8c9dee
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 19 deletions.
diff --git a/.changeset/thick-moose-reply.md b/.changeset/thick-moose-reply.md
@@ -0,0 +1,5 @@
+---
+"@embeddedchat/react": patch
+---
+
+Fix: Room members avatar invalid avatar url creation
diff --git a/packages/react/src/components/RoomMembers/RoomMember.js b/packages/react/src/components/RoomMembers/RoomMember.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import RoomMemberItem from './RoomMemberItem';
 import classes from './RoomMember.module.css';
 import { useMemberStore } from '../../store';
-import RCContext from '../../context/RCInstance';
+import RCContext, { useRCContext } from '../../context/RCInstance';
 import useInviteStore from '../../store/inviteStore';
 import InviteMembers from './inviteMembers/InviteMembers';
 import { Button } from '../Button';
@@ -13,6 +13,8 @@ import { ActionButton } from '../ActionButton';
 
 const RoomMembers = ({ members }) => {
   const { RCInstance } = useContext(RCContext);
+  const { ECOptions } = useRCContext();
+  const { host } = ECOptions;
 
   const toggleShowMembers = useMemberStore((state) => state.toggleShowMembers);
   const toggleInviteView = useInviteStore((state) => state.toggleInviteView);
@@ -39,7 +41,7 @@ const RoomMembers = ({ members }) => {
       </Box>
       <Box className={classes.container}>
         {members.map((member) => (
-          <RoomMemberItem user={member} key={member._id} />
+          <RoomMemberItem user={member} host={host} key={member._id} />
         ))}
       </Box>
       <Button

diff --git a/packages/react/src/components/RoomMembers/RoomMemberItem.js b/packages/react/src/components/RoomMembers/RoomMemberItem.js
@@ -1,23 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const RoomMemberItem = ({ user }) => (
-  <div
-    style={{
-      width: '100%',
-      paddingBottom: '8px',
-      paddingTop: '8px',
-      display: 'flex',
-    }}
-  >
-    <img
-      src={`http://localhost:3000/avatar/${user.username}`}
-      alt="avatar"
-      style={{ height: '1.5rem', marginLeft: '0.5rem' }}
-    />
-    <span style={{ marginLeft: '1.2rem' }}>{user.username}</span>
-  </div>
-);
+const RoomMemberItem = ({ user, host }) => {
+  const avatarUrl = new URL(`avatar/${user.username}`, host).toString();
+  return (
+    <div
+      style={{
+        width: '100%',
+        paddingBottom: '8px',
+        paddingTop: '8px',
+        display: 'flex',
+      }}
+    >
+      <img
+        src={avatarUrl}
+        alt="avatar"
+        style={{ height: '1.5rem', marginLeft: '0.5rem' }}
+      />
+      <span style={{ marginLeft: '1.2rem' }}>{user.username}</span>
+    </div>
+  );
+};
 
 export default RoomMemberItem;