diff --git a/client/src/components/chat/ParticipantsBar.tsx b/client/src/components/chat/ParticipantsBar.tsx index 9c42633..1feca67 100644 --- a/client/src/components/chat/ParticipantsBar.tsx +++ b/client/src/components/chat/ParticipantsBar.tsx @@ -24,12 +24,20 @@ type ParticipantsBarProps = { currentContact: ContactsProps | null; }; +type MeProps = { + isGroupAdmin: boolean; + iGroupOwner: boolean; +}; + function ParticipantsBar({ initializeContact, currentContact, }: ParticipantsBarProps) { const [participants, setParticipants] = useState([]); - const [isGroupAdmin, setIsGroupAdmin] = useState(false); + const [me, setMe] = useState({ + isGroupAdmin: false, + iGroupOwner: false, + }); const user: UsernameType = useOutletContext(); const getParticipants = async () => { @@ -109,7 +117,12 @@ function ParticipantsBar({ (participant) => participant.user_id === user.user_id && participant.isadmin, ); - setIsGroupAdmin(userIsAdmin); + const userIsOwner = participants.some( + (participant) => + participant.user_id === user.user_id && participant.isowner, + ); + + setMe({ isGroupAdmin: userIsAdmin, iGroupOwner: userIsOwner }); } }, [participants, user?.user_id]); @@ -119,6 +132,22 @@ function ParticipantsBar({ } }, [currentContact]); + useEffect(() => { + setParticipants((prevParticipants) => { + return [...prevParticipants].sort((a, b) => { + if (a.isowner !== b.isowner) { + return b.isowner ? 1 : -1; + } + + if (a.isadmin !== b.isadmin) { + return b.isadmin ? 1 : -1; + } + + return a.username.localeCompare(b.username); + }); + }); + }, [participants]); + useEffect(() => { if (!socket || !currentContact) return; @@ -233,7 +262,9 @@ function ParticipantsBar({ - {user.user_id !== participant.user_id && isGroupAdmin ? ( + {user.user_id !== participant.user_id && + me.isGroupAdmin && + (!participant.isadmin || me.iGroupOwner) ? (