whoops

client/src/components/chat/ParticipantsBar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { axiosClient } from '@/App.tsx';
 import { ContactsProps } from '@/pages/Chat.tsx';
 import { socket } from '@/socket/socket.tsx';
@@ -132,19 +132,17 @@ function ParticipantsBar({
     }
   }, [currentContact]);
 
-  useEffect(() => {
+  const sortedParticipants = useMemo(() => {
-    setParticipants((prevParticipants) => {
+    return [...participants].sort((a, b) => {
-      return [...prevParticipants].sort((a, b) => {
+      if (a.isowner !== b.isowner) {
-        if (a.isowner !== b.isowner) {
+        return b.isowner ? 1 : -1;
-          return b.isowner ? 1 : -1;
+      }
-        }
 
-        if (a.isadmin !== b.isadmin) {
+      if (a.isadmin !== b.isadmin) {
-          return b.isadmin ? 1 : -1;
+        return b.isadmin ? 1 : -1;
-        }
+      }
 
-        return a.username.localeCompare(b.username);
+      return a.username.localeCompare(b.username);
-      });
     });
   }, [participants]);
 
@@ -239,7 +237,7 @@ function ParticipantsBar({
     };
   }, [socket, currentContact, currentContact, user?.user_id]);
 
-  const ParticipantsList = participants?.map(
+  const ParticipantsList = sortedParticipants?.map(
     (participant: ParticipantsProps) => (
       <ContextMenu key={participant.user_id}>
         <ContextMenuTrigger>