code refactor, fixed undefined username from response on /auth/validate api, displays user actual username on UserProfile.tsx

client/src/components/chat/UserProfile.tsx

@@ -1,6 +1,9 @@
 import zdjecie from "../../../assets/walter.png";
 import Cookies from "js-cookie";
+import { useOutletContext } from "react-router-dom";
+import { UsernameType } from "../../utils/ProtectedRoutes.tsx";
 function UserProfile() {
+  const { username }: UsernameType = useOutletContext();
   return (
     <>
       <div className="flex items-center">
@@ -8,12 +11,12 @@ function UserProfile() {
           <img
             className="w-full h-full object-cover"
             src={zdjecie}
-            alt="walter"
+            alt="user profile"
             draggable={false}
           />
         </div>
         <div className="text-center text-gray-200">
-          <p>Walter White</p>
+          <p>{username}</p>
         </div>
       </div>
       <div>

client/src/pages/Chat.tsx

@@ -4,6 +4,7 @@ import UserProfile from "../components/chat/UserProfile.tsx";
 import ContactForm from "../components/chat/ContactForm.tsx";
 import MessagesArea from "../components/chat/MessagesArea.tsx";
 import { useState } from "react";
+
 type ChatMessages = {
   sender: string;
   message: string;

client/src/socket/socket.tsx

@@ -1,10 +1,10 @@
 import io from "socket.io-client";
 import Cookie from "js-cookie";
 const token = Cookie.get("token");
-//TODO socket is trying to connect on login page
+//TODO socket is trying to connect on login page fix it
 const socket = io({
   auth: {
-    token: Cookie.get("token"),
+    token: token,
   },
 });
 

server/server.js

@@ -122,9 +122,7 @@ app.get("/api/auth/validate", (req, res) => {
   }
   const { username } = verifyJwtToken(token);
   if (username) {
-    return res
-      .status(200)
-      .json({ message: "Authorized", username: username.username });
+    return res.status(200).json({ message: "Authorized", username: username });
   }
   return res.status(401).json({ message: "Unauthorized" });
 });