[frontend/backend] Fixed display name of the DM room (#288)

[backend]
* Add test for getRooms with query of joined
* Changed getRooms to also return members when joined is true

[frontend]
* Fixed DM room name to display DM partner's name

backend/src/room/room.service.ts

@@ -73,8 +73,10 @@ export class RoomService {
 
   findAllRoom(userId: number, joined?: boolean): Promise<Room[]> {
     let users;
+    let includeUsers = false;
     if (joined) {
       users = { some: { userId: userId } };
+      includeUsers = true;
     } else if (joined === false) {
       users = { none: { userId: userId } };
     }
@@ -96,6 +98,21 @@ export class RoomService {
         // Should not include room for banned users
         BannedUsers: { none: { userId: userId } },
       },
+      include: includeUsers
+        ? {
+            users: {
+              include: {
+                user: {
+                  select: {
+                    id: true,
+                    name: true,
+                    avatarURL: true,
+                  },
+                },
+              },
+            },
+          }
+        : undefined,
     });
   }
 

backend/test/room.e2e-spec.ts

@@ -6,7 +6,11 @@ import supertest from 'supertest';
 import { constants } from './constants';
 import { TestApp, UserEntityWithAccessToken } from './utils/app';
 import { initializeApp } from './utils/initialize';
-import { expectPublicUser, expectRoom } from './utils/matcher';
+import {
+  expectPublicUser,
+  expectRoom,
+  expectRoomWithUsers,
+} from './utils/matcher';
 
 describe('RoomController (e2e)', () => {
   let app: TestApp;
@@ -715,6 +719,16 @@ describe('RoomController (e2e)', () => {
         );
       });
     });
+    describe('whit joined query', () => {
+      it('should return only joined rooms with joined users info', async () => {
+        const res = await app
+          .getRoomsWithQueryOfJoined(owner.accessToken)
+          .expect(200);
+        const rooms = res.body;
+        expect(rooms).toBeInstanceOf(Array);
+        rooms.forEach(expectRoomWithUsers);
+      });
+    });
   });
 
   describe('PATCH /room/:id (Update Room)', () => {

backend/test/utils/app.ts

@@ -62,6 +62,11 @@ export class TestApp {
       .get(`/room`)
       .set('Authorization', `Bearer ${accessToken}`);
 
+  getRoomsWithQueryOfJoined = (accessToken: string) =>
+    request(this.app.getHttpServer())
+      .get(`/room?joined=true`)
+      .set('Authorization', `Bearer ${accessToken}`);
+
   /* Room API (Private) */
   createRoom = (createRoomDto: CreateRoomDto, accessToken: string) =>
     request(this.app.getHttpServer())

frontend/app/lib/dtos.ts

@@ -86,4 +86,9 @@ export type ApprovedMatchRequestEvent = {
 
 export type DenyEvent = {};
 
-export type RoomEntity = { id: number; name: string; accessLevel: AccessLevel };
+export type RoomEntity = {
+  id: number;
+  name: string;
+  accessLevel: AccessLevel;
+  users?: UserOnRoomEntity[];
+};

frontend/app/room/rooms-sidebar.tsx

@@ -10,16 +10,25 @@ import CreateRoomDialog from "./create-room-dialog";
 
 function RoomButton({
   room,
+  meId,
   selected,
 }: {
   room: RoomEntity;
+  meId: number | undefined;
   selected: boolean;
 }) {
   const router = useRouter();
   const onClick = () => {
     router.push(`${room.id}`);
     router.refresh();
   };
+  let roomName = room.name;
+  if (room.accessLevel === "DIRECT") {
+    const otherUser = room.users?.find((user) => user.userId !== meId);
+    if (otherUser) {
+      roomName = otherUser.user.name;
+    }
+  }
   return (
     <button
       key={room.id}
@@ -28,7 +37,7 @@ function RoomButton({
         selected ? "bg-secondary" : ""
       }`}
     >
-      {room.name}
+      {roomName}
     </button>
   );
 }
@@ -77,6 +86,7 @@ export default function RoomsSidebar({ rooms }: { rooms: RoomEntity[] }) {
         {rooms.map((room) => (
           <RoomButton
             room={room}
+            meId={currentUser?.id}
             selected={room.id === selectedRoomId}
             key={room.id}
           />