From 94e0faff4aa060ad126e74a7cdc58debe903a6f5 Mon Sep 17 00:00:00 2001 From: Abir Chakraborty <142606190+abirc8010@users.noreply.github.com> Date: Sun, 22 Dec 2024 16:14:16 +0530 Subject: [PATCH] feat: Implemented search member and display member info feature (#708) * Implemented search member and display member info feature * Fix UserInfo panel width * Added padding to sidebar contents --------- Co-authored-by: Zishan Ahmad --- .../common/MessageAggregator.js | 5 ++- .../react/src/views/RoomMembers/RoomMember.js | 44 +++++++++++++++++-- .../src/views/RoomMembers/RoomMemberItem.js | 23 ++++++++-- .../views/RoomMembers/RoomMembers.styles.js | 40 +++++++++++++++-- .../views/UserInformation/UserInformation.js | 4 ++ 5 files changed, 104 insertions(+), 12 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', }} > diff --git a/packages/react/src/views/RoomMembers/RoomMember.js b/packages/react/src/views/RoomMembers/RoomMember.js index 85b268b07..f60c3476f 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 + )} + )} @@ -91,6 +126,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; `, }; diff --git a/packages/react/src/views/UserInformation/UserInformation.js b/packages/react/src/views/UserInformation/UserInformation.js index 8d9202677..78c93ee02 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,