From 5db3354f9b30ee7e9a5cd11192d0cd1656948ca5 Mon Sep 17 00:00:00 2001
From: slawk0 <justgetahouse4@pm.me>
Date: Sat, 21 Dec 2024 18:12:05 +0100
Subject: [PATCH] whoops

---
 .../src/components/chat/ParticipantsBar.tsx   | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/client/src/components/chat/ParticipantsBar.tsx b/client/src/components/chat/ParticipantsBar.tsx
index 1feca67..accaa9c 100644
--- a/client/src/components/chat/ParticipantsBar.tsx
+++ b/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(() => {
-    setParticipants((prevParticipants) => {
-      return [...prevParticipants].sort((a, b) => {
-        if (a.isowner !== b.isowner) {
-          return b.isowner ? 1 : -1;
-        }
+  const sortedParticipants = useMemo(() => {
+    return [...participants].sort((a, b) => {
+      if (a.isowner !== b.isowner) {
+        return b.isowner ? 1 : -1;
+      }
 
-        if (a.isadmin !== b.isadmin) {
-          return b.isadmin ? 1 : -1;
-        }
+      if (a.isadmin !== b.isadmin) {
+        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>