Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/develop' into bug/editing-of-a…
Browse files Browse the repository at this point in the history
…udio-video-file-message
  • Loading branch information
dhairyashiil committed Dec 22, 2024
2 parents 354265a + 94e0faf commit d09cfdc
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,8 @@ export const MessageAggregator = ({
isInSidebar
style={{
flex: 1,
paddingLeft: 3,
paddingRight: 2,
padding: 0,
marginLeft: '15px',
minWidth: 0,
}}
/>
Expand All @@ -143,6 +143,7 @@ export const MessageAggregator = ({
css={{
position: 'relative',
zIndex: 10,
marginRight: '5px',
}}
>
<Icon name="arrow-back" size="1.25rem" />
Expand Down
44 changes: 40 additions & 4 deletions packages/react/src/views/RoomMembers/RoomMember.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Button,
Icon,
Sidebar,
Input,
Popup,
useComponentOverrides,
useTheme,
Expand Down Expand Up @@ -33,6 +34,9 @@ const RoomMembers = ({ members }) => {
const [userInfo, setUserInfo] = useState(null);
const setExclusiveState = useSetExclusiveState();

const [searchTerm, setSearchTerm] = useState('');
const [filteredMembers, setFilteredMembers] = useState(members);

useEffect(() => {
const getUserInfo = async () => {
try {
Expand All @@ -47,9 +51,20 @@ const RoomMembers = ({ members }) => {
getUserInfo();
}, [RCInstance]);

useEffect(() => {
setFilteredMembers(
members.filter(
(member) =>
member.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
member.username?.toLowerCase().includes(searchTerm.toLowerCase())
)
);
}, [searchTerm, members]);

const roles = userInfo && userInfo.roles ? userInfo.roles : [];
const isAdmin = roles.includes('admin');
const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;

return (
<ViewComponent
title="Members"
Expand All @@ -70,10 +85,6 @@ const RoomMembers = ({ members }) => {
<InviteMembers />
) : (
<>
{members.map((member) => (
<RoomMemberItem user={member} host={host} key={member._id} />
))}

{isAdmin && (
<Button
style={{ marginTop: '10px', width: '100%' }}
Expand All @@ -84,13 +95,38 @@ const RoomMembers = ({ members }) => {
<Icon size="1em" name="link" /> Invite Link
</Button>
)}
<Box css={styles.searchContainer}>
<Input
css={styles.textInput}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Search members"
/>
<Icon name="magnifier" size="1.5rem" css={styles.searchIcon} />
</Box>
<Box css={styles.memberList}>
{filteredMembers.length > 0 ? (
filteredMembers.map((member) => (
<>
<RoomMemberItem
user={member}
host={host}
key={member._id}
/>
</>
))
) : (
<Box css={styles.noMembers}>No members found</Box>
)}
</Box>
</>
)}
</Box>
)}
</ViewComponent>
);
};

export default RoomMembers;

RoomMembers.propTypes = {
Expand Down
23 changes: 20 additions & 3 deletions packages/react/src/views/RoomMembers/RoomMemberItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { css } from '@emotion/react';
import { Box, Icon, Avatar } from '@embeddedchat/ui-elements';
import RCContext from '../../context/RCInstance';
import { RoomMemberItemStyles as styles } from './RoomMembers.styles';
import useSetExclusiveState from '../../hooks/useSetExclusiveState';
import { useUserStore } from '../../store';

const RoomMemberItem = ({ user, host }) => {
const { RCInstance } = useContext(RCContext);
Expand All @@ -18,15 +20,28 @@ const RoomMemberItem = ({ user, host }) => {
setUserStatus(res.status);
}
} catch (err) {
console.error('Error fetching user status', err);
console.error('Error fetching user status:', err);
}
};

getStatus();
}, [RCInstance]);
const setExclusiveState = useSetExclusiveState();
const { setShowCurrentUserInfo, setCurrentUser } = useUserStore((state) => ({
setShowCurrentUserInfo: state.setShowCurrentUserInfo,
setCurrentUser: state.setCurrentUser,
}));

const handleShowUserInfo = () => {
setExclusiveState(setShowCurrentUserInfo);
setCurrentUser(user);
};
return (
<Box css={styles.container}>
<Box
css={styles.container}
style={{ cursor: 'pointer' }}
onClick={handleShowUserInfo}
>
<Avatar
url={avatarUrl}
alt="avatar"
Expand All @@ -46,7 +61,9 @@ const RoomMemberItem = ({ user, host }) => {
{userStatus && (
<Icon name={userStatus} size="1.25rem" css={styles.icon} />
)}
<Box is="span">{user.username}</Box>
<Box is="span">
{user.name} ({user.username})
</Box>
</Box>
</Box>
);
Expand Down
40 changes: 37 additions & 3 deletions packages/react/src/views/RoomMembers/RoomMembers.styles.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,48 @@
import { css } from '@emotion/react';

export const getRoomMemberStyles = () => {
export const getRoomMemberStyles = (theme) => {
const styles = {
container: css`
display: flex;
flex-direction: column;
overflow: auto;
height: 100%;
width: 100%;
justify-content: center;
padding: 0 1rem 1rem;
box-sizing: border-box;
`,
searchContainer: css`
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid ${theme.colors.border};
padding: 0 0.5rem;
border-radius: ${theme.radius};
position: relative;
margin-top: 1rem;
`,
textInput: css`
flex: 1;
border: none;
padding: none;
font-size: 1rem;
&:focus {
outline: none;
}
`,
searchIcon: css`
padding-left: 0.5rem;
font-size: 1.25rem;
color: ${theme.colors.icon};
`,
memberList: css`
flex: 1;
overflow-y: auto;
margin-top: 1rem;
`,
noMembers: css`
text-align: center;
color: ${theme.colors.textSecondary};
margin-top: 1rem;
`,
};

Expand Down
4 changes: 4 additions & 0 deletions packages/react/src/views/UserInformation/UserInformation.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@ const UserInformation = () => {
title="User Info"
iconName="user"
onClose={() => setExclusiveState(null)}
style={{
width: '400px',
zIndex: window.innerWidth <= 780 ? 1 : null,
}}
{...(viewType === 'Popup'
? {
isPopupHeader: true,
Expand Down

0 comments on commit d09cfdc

Please sign in to comment.