[frontend] online status の出力に名前も出力する (#270)

* [backend] login logoff 時にuser のname も送信するようにした

* [frontend] 受け取ったuser 名を出力するようにした

backend/src/chat/chat.service.ts

@@ -18,6 +18,12 @@ export enum UserStatus {
   Online = 0b1,
 }
 
+type OnlineStatus = {
+  name: string;
+  userId: number;
+  status: UserStatus;
+};
+
 @Injectable()
 @WebSocketGateway()
 export class ChatService {
@@ -181,7 +187,7 @@ export class ChatService {
       this.statuses.set(user.id, UserStatus.Online);
       client.emit('online-status', this.getUserStatuses());
       client.broadcast.emit('online-status', [
-        { userId: user.id, status: UserStatus.Online },
+        { userId: user.id, status: UserStatus.Online, name: user.name },
       ]);
     } catch (error) {
       console.log(error);
@@ -209,21 +215,23 @@ export class ChatService {
     const emitData = {
       userId: this.getUserId(client),
       status: UserStatus.Offline,
+      name: this.getUser(client).name,
     };
     if (emitData.userId) {
       client.broadcast.emit('online-status', [emitData]);
     }
     this.removeClient(client);
   }
 
-  getUserStatuses(): {
-    userId: number;
-    status: UserStatus;
-  }[] {
-    return Array.from(this.statuses).map(([userId, status]) => ({
-      userId,
-      status,
-    }));
+  getUserStatuses(): OnlineStatus[] {
+    return Array.from(this.users).map(([id, user]) => {
+      id; // TODO : remove this
+      return {
+        userId: user.id,
+        name: user.name,
+        status: this.statuses.get(user.id) || UserStatus.Offline,
+      };
+    });
   }
 
   private async expectNotBlockedBy(blockerId: number, userId: number) {

backend/test/utils/matcher.ts

@@ -129,12 +129,13 @@ export function expectPostGenerateTwoFactorAuthenticationSecretResponse(
 }
 
 export function expectOnlineStatusResponse(
-  users: { userId: number; status: UserStatus }[],
+  users: { userId: number; status: UserStatus; name: string }[],
 ) {
-  type User = { userId: number; status: UserStatus };
+  type User = { userId: number; status: UserStatus; name: string };
   const expected: User[] = users.map(() => ({
     userId: expect.any(Number),
     status: expect.any(Number),
+    name: expect.any(String),
   }));
   expect(users).toEqual(expected);
 }

frontend/app/lib/client-socket-provider.tsx

@@ -62,10 +62,15 @@ export default function SocketProvider() {
     });
   };
 
-  const handleOnlineStatus = (users: { userId: number; status: number }[]) => {
+  const handleOnlineStatus = (
+    users: { userId: number; status: number; name: string }[],
+  ) => {
+    const description = users.map((u) => {
+      return `[${u.name} has logged ${u.status === 1 ? "in" : "out"}] `;
+    });
     toast({
       title: "online-status",
-      description: JSON.stringify(users),
+      description,
     });
   };