From e7e109636fa309e7d6c88c210474d9420ef87048 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Mon, 4 Jul 2022 14:53:02 -0500
Subject: [PATCH] sorting avatars for uniformity across

---
 .../desktop/src/tree/ConversationList.tsx     | 17 ++++++++++++++++-
 packages/desktop/src/tree/FooterControls.tsx  | 19 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/desktop/src/tree/ConversationList.tsx b/packages/desktop/src/tree/ConversationList.tsx
index ffb1092..fdf2ecc 100644
--- a/packages/desktop/src/tree/ConversationList.tsx
+++ b/packages/desktop/src/tree/ConversationList.tsx
@@ -122,6 +122,21 @@ export function ConversationRow({
 
   useKeyPressEvent(`${keyboardShortcut?.toString()}`, handleSelectConversation);
 
+  const sortedMembers = useMemo(() => {
+    const sortedUserMembers = [...conversation.members];
+    sortedUserMembers.sort((convoUserA, convoUserB) => {
+      if (convoUserA._id.toString() === user?._id.toString()) return 2;
+
+      if (conversation.tunedInUsers?.includes(convoUserA._id.toString())) return 1;
+
+      if (conversation.tunedInUsers?.includes(convoUserB._id.toString())) return -1;
+
+      return -2;
+    });
+
+    return sortedUserMembers;
+  }, [conversation.members, user, conversation.tunedInUsers]);
+
   return (
     <ListItem>
       <ListItemButton
@@ -154,7 +169,7 @@ export function ConversationRow({
 
         <ListItemAvatar>
           <AvatarGroup variant={'rounded'}>
-            {conversation.members?.map((conversationUser, index) => {
+            {sortedMembers?.map((conversationUser, index) => {
               return (
                 <Avatar
                   key={`${conversation._id.toString()}-${conversationUser._id.toString()}-convoIcon`}
diff --git a/packages/desktop/src/tree/FooterControls.tsx b/packages/desktop/src/tree/FooterControls.tsx
index b0951a4..4f6fd72 100644
--- a/packages/desktop/src/tree/FooterControls.tsx
+++ b/packages/desktop/src/tree/FooterControls.tsx
@@ -319,6 +319,23 @@ function OverlayConversationAvatars({
   tunedInUserIds: string[];
   conversationUserMembers: ConversationUserMember[];
 }) {
+  const { user } = useAuth();
+
+  const sortedMembers = useMemo(() => {
+    const sortedUserMembers = [...conversationUserMembers];
+    sortedUserMembers.sort((convoUserA, convoUserB) => {
+      if (convoUserA._id.toString() === user?._id.toString()) return 2;
+
+      if (tunedInUserIds?.includes(convoUserA._id.toString())) return 1;
+
+      if (tunedInUserIds?.includes(convoUserB._id.toString())) return -1;
+
+      return -2;
+    });
+
+    return sortedUserMembers;
+  }, [conversationUserMembers, user, tunedInUserIds]);
+
   return (
     <AvatarGroup
       variant={'rounded'}
@@ -335,7 +352,7 @@ function OverlayConversationAvatars({
       }}
       max={3}
     >
-      {conversationUserMembers?.map((conversationUserMember, index) => (
+      {sortedMembers?.map((conversationUserMember, index) => (
         <OverlayConversationAvatar
           key={`${conversationUserMember._id.toString()}-overlayConvoAvatar`}
           isTunedIn={tunedInUserIds?.includes(conversationUserMember._id.toString())}