Feat/user profile from chat (#99)

* feat: add option to access profile over friends list

* fix: dependencies

* wip: addiing user id into message to be acessible

* feat: add option to access user profile from user messages

.gitignore

@@ -113,3 +113,4 @@ postgres/
 
 # Local Uploads
 /backend/uploads/*
+data

backend/package.json

@@ -36,7 +36,7 @@
     "@nestjs/serve-static": "^4.0.0",
     "@nestjs/websockets": "^9.0.0",
     "@prisma/client": "^4.12.0",
-    "argon2": "^0.31.1",
+    "argon2": "^0.30.3",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
     "cookie-parser": "^1.4.6",

backend/src/chat/chat.service.ts

@@ -20,6 +20,12 @@ export class ChatService {
     chatId: number,
     content: string,
   ): Promise<Message> {
+    const userId = await this.prisma.user.findUnique({
+      where: {
+        login: userLogin,
+      },
+    });
+
     const createdMessage = await this.prisma.message.create({
       data: {
         content,
@@ -33,6 +39,7 @@ export class ChatService {
             login: userLogin,
           },
         },
+        userId: userId.id,
       },
     });
 

backend/src/database/schema.prisma

@@ -64,6 +64,7 @@ model Message {
   id        String   @id @default(uuid())
   user      User?    @relation(fields: [userLogin], references: [login])
   userLogin String?
+  userId    String?  
   createdAt DateTime @default(now())
   chat      Chat     @relation(fields: [chatId], references: [id])
   chatId    Int

frontend/src/components/Chat/FriendCard.tsx

@@ -2,6 +2,7 @@ import { api } from "@/services/apiClient";
 import { queryClient } from "@/services/queryClient";
 import { EnvelopeSimple, Sword, UserMinus } from "@phosphor-icons/react";
 import { useMutation } from "@tanstack/react-query";
+import Link from "next/link";
 import toast from "react-hot-toast";
 
 type FriendCardProps = {
@@ -31,7 +32,12 @@ export default function FriendCard({ displayName, id }: FriendCardProps) {
 
   return (
     <div className="bg-black42-200 flex justify-between rounded-lg items-center p-3 my-1">
-      <div className="flex space-x-2 items-center">{displayName}</div>
+      <Link
+        href={`/game/history/${id}`}
+        className="flex space-x-2 items-center"
+      >
+        {displayName}
+      </Link>
       <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/OpenChannel.tsx

@@ -1,29 +1,40 @@
-import { ChatContext, ChatList } from "@/contexts/ChatContext";
+import { ChatContext } from "@/contexts/ChatContext";
 import { PaperPlaneTilt, UsersThree, XCircle } from "@phosphor-icons/react";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useState } from "react";
 import ChatUsersChannelPopOver, { ChatMember } from "./ChatUsersChannelPopOver";
 import chatService from "@/services/chatClient";
 import { useForm } from "react-hook-form";
+import Link from "next/link";
 interface Message {
   id: number;
   content: string;
   userLogin: string;
+  userId: string;
 }
 
 export function OpenChannel() {
-  const { selectedChat, handleCloseChat, setShowElement, validationRequired, setValidationRequired, user } = useContext(ChatContext);
+  const {
+    selectedChat,
+    handleCloseChat,
+    setShowElement,
+    validationRequired,
+    setValidationRequired,
+    user,
+  } = useContext(ChatContext);
   // List messages from the websocket
-  const [message, setMessage] = useState('');
+  const [message, setMessage] = useState("");
   const [messages, setMessages] = useState<Message[]>([]);
   const [numberOfUsersInChat, setNumberOfUsersInChat] = useState<number>(0);
   const [users, setUsers] = useState<ChatMember[]>([]);
 
   chatService.socket?.on("listMessages", (messages: Message[]) => {
     setMessages(() => messages);
   });
+
   chatService.socket?.on("message", (message: Message) => {
     setMessages([...messages, message]);
   });
+
   chatService.socket?.on("listMembers", (members: ChatMember[]) => {
     setNumberOfUsersInChat(members.length);
     setUsers(members);
@@ -33,7 +44,7 @@ export function OpenChannel() {
     if (response.error) {
       setError("password", {
         type: "manual",
-        message: "Senha incorreta"
+        message: "Senha incorreta",
       });
       return;
     }
@@ -43,7 +54,7 @@ export function OpenChannel() {
   const handleSendMessage = () => {
     chatService.socket?.emit("message", {
       chatId: selectedChat.id,
-      content: message
+      content: message,
     });
 
     setMessage("");
@@ -58,7 +69,7 @@ export function OpenChannel() {
 
   type FormInputs = {
     password: string;
-  }
+  };
 
   const {
     register,
@@ -87,7 +98,10 @@ export function OpenChannel() {
             className="cursor-pointer"
             color="white"
             size={20}
-            onClick={() => { setShowElement("showChannels"); setValidationRequired(true); }}
+            onClick={() => {
+              setShowElement("showChannels");
+              setValidationRequired(true);
+            }}
           />
         </div>
         <div className="flex flex-col flex-1 justify-center bg-black42-300 my-4">
@@ -100,9 +114,7 @@ export function OpenChannel() {
                 {...register("password", { required: true })}
               />
               {errors.password && (
-                <span className="text-red-600 text-xs">
-                  Senha incorreta
-                </span>
+                <span className="text-red-600 text-xs">Senha incorreta</span>
               )}
             </div>
 
@@ -115,16 +127,14 @@ export function OpenChannel() {
           </form>
         </div>
       </div>
-    )
+    );
   }
 
   return (
     <div className="flex flex-col flex-1 justify-between">
       <div className="flex flex-row justify-between items-center h-8">
         <div className="flex items-center">
-          <ChatUsersChannelPopOver
-            users={users}
-          >
+          <ChatUsersChannelPopOver users={users}>
             <div className="flex space-x-1 items-center">
               <span className="text-xs">({numberOfUsersInChat})</span>
               <UsersThree className="text-white" size={20} />
@@ -149,12 +159,18 @@ export function OpenChannel() {
           <div
             key={message.id}
             // TODO: Implement user context to compare user login with message user
-            className={`${message.userLogin === user.login
-              ? "text-white bg-purple42-200 self-end"
-              : "text-white bg-black42-300 self-start"
-              } py-2 px-4 w-3/4 rounded-lg mx-2 my-2 break-words`}
+            className={`${
+              message.userLogin === user.login
+                ? "text-white bg-purple42-200 self-end"
+                : "text-white bg-black42-300 self-start"
+            } py-2 px-4 w-3/4 rounded-lg mx-2 my-2 break-words`}
           >
-            <span className="font-semibold">{message.userLogin}: </span>
+            <span className="font-semibold">
+              <Link href={`/game/history/${message.userId}`}>
+                {message.userLogin}
+              </Link>
+              :{" "}
+            </span>
             {message.content}
           </div>
         ))}