Feat/users status

.gitignore

@@ -114,4 +114,4 @@ postgres/
 =======
 # Local Uploads
 /backend/uploads/*
-data
+data

backend/src/chat/chat.gateway.ts

@@ -32,6 +32,8 @@ interface ConnectedUsers {
 export class ChatGateway
   implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect
 {
+  @WebSocketServer() server: Server;
+
   constructor(
     private chatService: ChatService,
     private jwtService: JwtService,
@@ -40,8 +42,81 @@ export class ChatGateway
   private connectedUsers: ConnectedUsers = {};
   private readonly logger = new Logger(ChatGateway.name);
 
-  @WebSocketServer()
-  server: Server;
+  afterInit() {
+    this.logger.debug('Initialized chat gateway');
+    this.server.use((socket, next) => {
+      this.validateConnection(socket)
+        .then((user) => {
+          socket.handshake.auth['user'] = user;
+          socket.emit('userLogin', user);
+          next();
+        })
+        .catch((err) => {
+          this.logger.error(
+            `Failed to authenticate user: ${socket.handshake.auth?.user?.login}`,
+            err,
+          );
+          return next(new Error(err));
+        });
+    });
+  }
+
+  async handleDisconnect(client: Socket) {
+    const { id } = client.handshake.auth?.user;
+
+    for (const userId in this.connectedUsers) {
+      if (this.connectedUsers[userId] === client) {
+        delete this.connectedUsers[userId];
+        this.logger.log(`User ${userId} disconnected`);
+        break;
+      }
+    }
+
+    // change user status to offline
+    await this.usersService.updateUserStatus(id, 'OFFLINE');
+  }
+
+  // TODO:
+  async handleConnection(@ConnectedSocket() client: Socket) {
+    const { login, id } = client.handshake.auth?.user;
+
+    // TODO: remove this hardcoded user id
+    if (!login) {
+      client.emit('connected', { error: 'User not found' });
+      client.disconnect();
+      return;
+    }
+
+    // change user status to online
+    await this.usersService.updateUserStatus(id, 'ONLINE');
+
+    this.connectedUsers[login] = client;
+    client.emit('connected', { message: `You are connected as ${login}` });
+
+    // const allChats = await this.chatService.listChats();
+    const chats = await this.chatService.listChatsByUserLogin(login);
+
+    // TODO: Remove this after implementing chat rooms
+    for (const chat of chats) {
+      client.join(`chat:${chat.id.toString()}`);
+    }
+
+    this.logger.log(`User ${login} connected`);
+  }
+
+  private validateConnection(client: Socket) {
+    const token = client.handshake.auth.token;
+
+    try {
+      const payload = this.jwtService.verify<TokenPayload>(token, {
+        secret: process.env.JWT_SECRET,
+      });
+      return this.usersService.findOne(payload.sub);
+    } catch {
+      this.logger.error('Token invalid or expired');
+      throw new WsException('Token invalid or expired');
+    }
+  }
 
   async addConnectedUsersToChat(chatId: number) {
     const users = await this.chatService.getUsersByChatId(chatId);
@@ -62,10 +137,12 @@ export class ChatGateway
     const login = client.handshake.auth?.user?.login;
     client.emit('userLogin', client.handshake.auth?.user);
     const member = await this.chatService.getMemberFromChat(chatId, login);
+
     if (!member) {
       client.emit('error', { error: 'You are not a member of this chat' });
       return;
     }
+
     if (member.status !== 'ACTIVE') {
       client.emit('error', { error: 'You are not allowed to send messages' });
       return;
@@ -522,65 +599,4 @@ export class ChatGateway
     );
     return numberOfUsers;
   }
-
-  handleDisconnect(client: Socket) {
-    for (const userId in this.connectedUsers) {
-      if (this.connectedUsers[userId] === client) {
-        delete this.connectedUsers[userId];
-        console.log(`User ${userId} disconnected`);
-        break;
-      }
-    }
-  }
-  // TODO:
-  async handleConnection(@ConnectedSocket() client: Socket) {
-    const login = client.handshake.auth?.user?.login;
-    // TODO: remove this hardcoded user id
-    if (!login) {
-      client.emit('connected', { error: 'User not found' });
-      client.disconnect();
-      return;
-    }
-    this.connectedUsers[login] = client;
-    client.emit('connected', { message: `You are connected as ${login}` });
-    const allChats = await this.chatService.listChats();
-    const chats = await this.chatService.listChatsByUserLogin(login);
-    console.log(
-      `User ${login} joined ${chats.length}/${allChats.length} chats`,
-    );
-    // TODO: Remove this after implementing chat rooms
-    for (const chat of chats) {
-      client.join(`chat:${chat.id.toString()}`);
-    }
-  }
-
-  afterInit(_: Server) {
-    this.server.use((socket, next) => {
-      this.validateConnection(socket)
-        .then((user) => {
-          socket.handshake.auth['user'] = user;
-          console.log(`User ${socket.handshake.auth['user'].login} connected`);
-          socket.emit('userLogin', user);
-          next();
-        })
-        .catch((err) => {
-          this.logger.error(err);
-          return next(new Error(err));
-        });
-    });
-  }
-
-  private validateConnection(client: Socket) {
-    const token = client.handshake.auth.token;
-
-    try {
-      const payload = this.jwtService.verify<TokenPayload>(token, {
-        secret: process.env.JWT_SECRET,
-      });
-      return this.usersService.findOne(payload.sub);
-    } catch {
-      this.logger.error('Token invalid or expired');
-      throw new WsException('Token invalid or expired');
-    }
-  }
 }

backend/src/database/schema.prisma

@@ -28,7 +28,7 @@ model User {
   displayName  String
   email        String
   avatar       String?
-  status       UserStatus     @default(ONLINE)
+  status       UserStatus     @default(OFFLINE)
   victory      Int            @default(0)
   refreshToken String?
   mfaEnabled   Boolean        @default(false)

backend/src/leaderboard/leaderboard.service.ts

@@ -13,9 +13,11 @@ export class LeaderboardService {
       },
       select: {
         displayName: true,
+        login: true,
         victory: true,
         avatar: true,
         id: true,
+        status: true,
       },
     });
   }

backend/src/main.ts

@@ -10,11 +10,13 @@ async function bootstrap() {
 
   // Set up cookie parser
   app.use(cookieParser());
+
   app.useGlobalPipes(
     new ValidationPipe({
       whitelist: true,
     }),
   );
+
   app.enableCors({
     origin: process.env.FRONTEND_URL,
     credentials: true,

backend/src/users/users.controller.ts

@@ -30,6 +30,11 @@ export class UsersController {
     return this.service.findOne(login);
   }
 
+  @Get('status/:id')
+  findStatus(@Param('id') id: string) {
+    return this.service.getUserStatus(id);
+  }
+
   @Get()
   findAll() {
     return this.service.findAll();

backend/src/users/users.service.ts

@@ -1,8 +1,8 @@
-import { BadRequestException, Injectable } from '@nestjs/common';
+import { Injectable, NotFoundException, BadRequestException } from '@nestjs/common';
 import { PrismaService } from 'src/prisma/prisma.service';
 import { CreateUserDto } from './dto/createUser.dto';
 import { UpdateUserDto } from './dto/updateUser.dto';
-import { User } from '@prisma/client';
+import { User, UserStatus } from '@prisma/client';
 
 @Injectable()
 export class UsersService {
@@ -63,4 +63,30 @@ export class UsersService {
       },
     });
   }
+
+  async getUserStatus(userId: string) {
+    const user = await this.prisma.user.findUnique({
+      where: { id: userId },
+      select: {
+        status: true,
+      },
+    });
+
+    if (!user) {
+      throw new NotFoundException('User not found');
+    }
+
+    return {
+      status: user.status,
+    };
+  }
+
+  async updateUserStatus(userId: string, status: UserStatus) {
+    return await this.prisma.user.update({
+      where: { id: userId },
+      data: {
+        status: status,
+      },
+    });
+  }
 }

frontend/src/components/Chat/FriendCard.tsx

@@ -1,5 +1,6 @@
 import { api } from "@/services/apiClient";
 import { queryClient } from "@/services/queryClient";
+import { UserStatus } from "@/types/user";
 import { EnvelopeSimple, Sword, UserMinus } from "@phosphor-icons/react";
 import { useMutation } from "@tanstack/react-query";
 import Link from "next/link";
@@ -8,9 +9,14 @@ import toast from "react-hot-toast";
 type FriendCardProps = {
   displayName: string;
   id: string;
+  status: UserStatus;
 };
 
-export default function FriendCard({ displayName, id }: FriendCardProps) {
+export default function FriendCard({
+  displayName,
+  id,
+  status,
+}: FriendCardProps) {
   const deleteFriendMutation = useMutation({
     mutationFn: (friendData: any) => {
       return api.delete("/friends", {
@@ -32,12 +38,19 @@ export default function FriendCard({ displayName, id }: FriendCardProps) {
 
   return (
     <div className="bg-black42-200 flex justify-between rounded-lg items-center p-3 my-1">
-      <Link
-        href={`/game/history/${id}`}
-        className="flex space-x-2 items-center"
-      >
-        {displayName}
-      </Link>
+      <div className="flex justify-between items-center cursor-pointer gap-2">
+        <Link
+          href={`/game/history/${id}`}
+          className="flex space-x-2 items-center"
+        >
+          <div className="flex space-x-2 items-center">{displayName}</div>
+        </Link>
+        <div
+          className={`${
+            status === "ONLINE" ? "bg-green-500" : "bg-gray-500"
+          } w-2 h-2 rounded-full`}
+        ></div>
+      </div>
       <div className="flex space-x-5 items-center">
         <EnvelopeSimple className="text-purple42-200" size={18} />
         <Sword className="text-purple42-200" size={18} />

frontend/src/components/Chat/ListFriends.tsx

@@ -28,7 +28,13 @@ export function ListFriends() {
           </div>
         ) : (
           data?.friends.map((user: User) => (
-            <FriendCard key={user.id} displayName={user.displayName} id={user.id} />
+            <FriendCard
+              key={user.id}
+              displayName={user.displayName}
+              id={user.id}
+              status={user.status}
+            />
+
           ))
         )}
       </div>

frontend/src/components/LeaderBoard/index.tsx

@@ -27,12 +27,9 @@ export function LeaderBoard() {
           {data?.map((user: User) => (
             <LeaderBoardCard
               key={user.id}
-              id={user.id}
-              name={user.displayName}
-              avatar={user.avatar || ""}
               score={user.victory}
-              //TODO: create functional logic
-              isFriend={false}
+              isFriend={user.login.includes("m")}
+              user={user}
             />
           ))}
         </>

frontend/src/components/LeaderBoardCard/index.tsx

@@ -3,29 +3,26 @@ import { Trophy, UserPlus } from "@phosphor-icons/react";
 import { StatusTag } from "../StatusTag";
 import ProfilePopOver from "../ProfilePopOver";
 import UserAvatar from "../UserAvatar";
+import { User } from "@/types/user";
 
 type LeaderBoardCardProps = {
-  id: string;
-  name: string;
-  avatar: string;
   score: number;
   isFriend: boolean;
+  user: User;
 };
 
 export function LeaderBoardCard({
-  id,
-  name,
-  avatar,
   score,
   isFriend,
+  user,
 }: LeaderBoardCardProps) {
   return (
     <div className="flex flex-row justify-between items-center py-3 bg-black42-200 p-4 rounded-lg w-full">
-      <ProfilePopOver name={name} score={score} id={id}>
+      <ProfilePopOver name={user.login} score={score} id={user.id}>
         <div className="flex flex-row justify-between items-center">
-          <UserAvatar imageUrl={avatar} login={name} />
-          <div className="text-white text-lg mx-3">{name}</div>
-          <StatusTag status="offline" />
+          <UserAvatar imageUrl={user.avatar || ""} login={user.login} />
+          <div className="text-white text-lg mx-3">{user.displayName}</div>
+          <StatusTag user={user} />
         </div>
       </ProfilePopOver>
       <div className="flex flex-row justify-between items-center space-x-4">

frontend/src/components/Sidebar/index.tsx

@@ -43,7 +43,7 @@ export default function Sidebar() {
         </div>
         <ul className="flex flex-col space-y-5 items-center justify-center pb-4">
           <li>
-            <UserAvatar imageUrl={user.avatar} login={user.displayName} />
+            <UserAvatar imageUrl={user.avatar || ""} login={user.displayName} />
           </li>
           <li>
             <Link