sorting participants list and fixed context menu

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<ParticipantsProps[]>([]);
-  const [isGroupAdmin, setIsGroupAdmin] = useState<boolean>(false);
+  const [me, setMe] = useState<MeProps>({
+    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({
             </span>
           </li>
         </ContextMenuTrigger>
-        {user.user_id !== participant.user_id && isGroupAdmin ? (
+        {user.user_id !== participant.user_id &&
+        me.isGroupAdmin &&
+        (!participant.isadmin || me.iGroupOwner) ? (
           <ContextMenuContent className="p-0">
             <ContextMenuItem
               className="bg-zinc-900 text-white outline-1 hover:bg-zinc-800 hover:cursor-pointer"