From 947633161f3154005745d4452153e7b2c26aabd3 Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Sat, 21 Dec 2024 21:51:03 +0530 Subject: [PATCH 1/3] Implemented search member and display member info feature --- .../react/src/views/RoomMembers/RoomMember.js | 44 +++++++++++++++++-- .../src/views/RoomMembers/RoomMemberItem.js | 23 ++++++++-- .../views/RoomMembers/RoomMembers.styles.js | 40 +++++++++++++++-- 3 files changed, 97 insertions(+), 10 deletions(-) diff --git a/packages/react/src/views/RoomMembers/RoomMember.js b/packages/react/src/views/RoomMembers/RoomMember.js index c52f48c9d..08e26467a 100644 --- a/packages/react/src/views/RoomMembers/RoomMember.js +++ b/packages/react/src/views/RoomMembers/RoomMember.js @@ -5,6 +5,7 @@ import { Button, Icon, Sidebar, + Input, Popup, useComponentOverrides, useTheme, @@ -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 { @@ -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 ( { ) : ( <> - {members.map((member) => ( - - ))} - {isAdmin && ( )} + + setSearchTerm(e.target.value)} + placeholder="Search members" + /> + + + + {filteredMembers.length > 0 ? ( + filteredMembers.map((member) => ( + <> + + + )) + ) : ( + No members found + )} + )} @@ -90,6 +125,7 @@ const RoomMembers = ({ members }) => { ); }; + export default RoomMembers; RoomMembers.propTypes = { diff --git a/packages/react/src/views/RoomMembers/RoomMemberItem.js b/packages/react/src/views/RoomMembers/RoomMemberItem.js index 336dc7ae9..0c38355eb 100644 --- a/packages/react/src/views/RoomMembers/RoomMemberItem.js +++ b/packages/react/src/views/RoomMembers/RoomMemberItem.js @@ -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); @@ -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 ( - + { {userStatus && ( )} - {user.username} + + {user.name} ({user.username}) + ); diff --git a/packages/react/src/views/RoomMembers/RoomMembers.styles.js b/packages/react/src/views/RoomMembers/RoomMembers.styles.js index 68d3307f5..ac9df00bf 100644 --- a/packages/react/src/views/RoomMembers/RoomMembers.styles.js +++ b/packages/react/src/views/RoomMembers/RoomMembers.styles.js @@ -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; `, }; From 0908e75e5d284f770bc612cdf3dab81956ec5e3f Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Sun, 22 Dec 2024 14:42:24 +0530 Subject: [PATCH 2/3] Fix UserInfo panel width --- packages/react/src/views/UserInformation/UserInformation.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react/src/views/UserInformation/UserInformation.js b/packages/react/src/views/UserInformation/UserInformation.js index d745ee9b7..3cdabf8cd 100644 --- a/packages/react/src/views/UserInformation/UserInformation.js +++ b/packages/react/src/views/UserInformation/UserInformation.js @@ -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, From 8a728f3708193b5924bd9a31da625649efb803bb Mon Sep 17 00:00:00 2001 From: abirc8010 Date: Sun, 22 Dec 2024 15:02:11 +0530 Subject: [PATCH 3/3] Added padding to sidebar contents --- .../src/views/MessageAggregators/common/MessageAggregator.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js index 6e1786a33..c70f3d73a 100644 --- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js +++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js @@ -130,8 +130,8 @@ export const MessageAggregator = ({ isInSidebar style={{ flex: 1, - paddingLeft: 3, - paddingRight: 2, + padding: 0, + marginLeft: '15px', minWidth: 0, }} /> @@ -143,6 +143,7 @@ export const MessageAggregator = ({ css={{ position: 'relative', zIndex: 10, + marginRight: '5px', }} >