fix: Show group avatar icon for group chats in list view

Author: darrenvong

app/web/features/messages/groupchats/GroupChatListItem.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react";
+import GroupChatListItem from "features/messages/groupchats/GroupChatListItem";
+import { GroupChat } from "proto/conversations_pb";
+import { service } from "service";
+import groupChat from "test/fixtures/groupChat.json";
+import wrapper from "test/hookWrapper";
+import { getLiteUsers } from "test/serviceMockDefaults";
+import { addDefaultUser } from "test/utils";
+
+const getLiteUsersMock = service.user.getLiteUsers as jest.Mock;
+
+beforeEach(() => {
+  addDefaultUser(1);
+  getLiteUsersMock.mockImplementation(getLiteUsers);
+});
+
+afterEach(() => jest.restoreAllMocks());
+
+describe("GroupChatListItem avatar", () => {
+  it("shows a group icon for non-DM group chats", async () => {
+    render(<GroupChatListItem groupChat={groupChat} />, { wrapper });
+
+    expect(await screen.findByTestId("GroupsIcon")).toBeVisible();
+    expect(screen.queryByText("FD")).not.toBeInTheDocument();
+  });
+
+  it("shows the other member's avatar for DMs", async () => {
+    const dmGroupChat: GroupChat.AsObject = {
+      ...groupChat,
+      isDm: true,
+      latestMessage: {
+        ...groupChat.latestMessage!,
+        authorUserId: 2,
+        text: { text: "Reply" },
+      },
+    };
+
+    render(<GroupChatListItem groupChat={dmGroupChat} />, { wrapper });
+
+    expect(await screen.findByText("FD")).toBeVisible();
+    expect(screen.queryByTestId("GroupsIcon")).not.toBeInTheDocument();
+  });
+
+  it("shows the other member's avatar for DMs even when current user sent the latest message", async () => {
+    const dmGroupChat: GroupChat.AsObject = {
+      ...groupChat,
+      isDm: true,
+      latestMessage: {
+        ...groupChat.latestMessage!,
+        authorUserId: 1,
+        text: { text: "Hello there" },
+      },
+    };
+
+    render(<GroupChatListItem groupChat={dmGroupChat} />, { wrapper });
+
+    expect(await screen.findByText("FD")).toBeVisible();
+    expect(screen.queryByTestId("GroupsIcon")).not.toBeInTheDocument();
+  });
+});

app/web/features/messages/groupchats/GroupChatListItem.tsx

@@ -1,4 +1,4 @@
-import { ArchiveOutlined, UnarchiveOutlined } from "@mui/icons-material";
+import { ArchiveOutlined, Groups, UnarchiveOutlined } from "@mui/icons-material";
 import {
   ListItemAvatar,
   ListItemButton,
@@ -80,13 +80,9 @@ export default function GroupChatListItem({
     latestMessageAuthorId,
   ]);
 
-  //the avatar is of the latest message author (if it's not the logged in user),
-  //otherwise any user that's not the logged in user, otherwise logged in user
-  const avatarUserId =
-    latestMessageAuthorId !== null && latestMessageAuthorId !== currentUserId
-      ? latestMessageAuthorId
-      : (groupChat.memberUserIdsList.find((id) => id !== currentUserId) ??
-        currentUserId);
+  const dmOtherMemberUserId = groupChat.memberUserIdsList.find(
+    (id) => id !== currentUserId,
+  );
   //title is the chat title, or all the member's names except current user joined together
   const title = groupChatTitleText(
     groupChat,
@@ -168,11 +164,15 @@ export default function GroupChatListItem({
         <ListItemAvatar>
           {groupChatMembersQuery.isLoading ? (
             <Skeleton />
-          ) : (
+          ) : groupChat.isDm ? (
             <Avatar
-              user={groupChatMembersQuery.data?.get(avatarUserId)}
+              user={groupChatMembersQuery.data?.get(dmOtherMemberUserId)}
               isProfileLink={false}
             />
+          ) : (
+            <Avatar isProfileLink={false}>
+              <Groups />
+            </Avatar>
           )}
         </ListItemAvatar>
         <ListItemText