add: improved UI by adding CSS files

front/src/pages/UserPage.tsx

@@ -1,17 +1,32 @@
 import { useParams, Link } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { User, Messages } from "../types";
+import TopBar from "../components/TopBar";
 import MessageComponent from "../components/MessageComponent";
 import axios from "axios";
 
+import "../styles/UserPage.css";
+
 export default function UserPage() {
     const { username } = useParams();
-    const [user, setUser] = useState<User>();
+    const [pageUser, setPageUser] = useState<User>();
     const [messages, setMessages] = useState<Messages>();
+    const [user, setUser] = useState<User>();
+
+    useEffect(() => {
+        const localToken = localStorage.getItem("token");
+
+        if (localToken) {
+            axios
+                .post("/api/auth/me", { token: localToken }).then((res) => {
+                    setUser(res.data);
+                });
+        }
+    }, []);
 
     useEffect(() => {
         axios.get(`/api/users/${username}`).then((res) => {
-            setUser(res.data);
+            setPageUser(res.data);
         });
 
         axios.get(`/api/users/${username}/lastmessages`).then((res) => {
@@ -30,27 +45,31 @@ export default function UserPage() {
         return () => { clearInterval(id) }
     }, [username])
 
-    if (!user) {
+    if (!pageUser) {
         return <div>Loading...</div>;
     }
 
     return (
-        <div>
-            <Link to="/">Home</Link>
-            <h1>{user.username}</h1>
-            {user.admin ? <p>Admin</p> : <p>User</p>}
-            <h1>Last messages</h1>
-            <ul>
-                {messages?.map((message) => (
-                    <MessageComponent
-                        key={message.id}
-                        message={message}
-                        user={user}
-                        channel={undefined}
-                        deleteMessage={undefined}
-                    />
-                ))}
-            </ul>
+        <div className="user-page">
+            <TopBar user={user} />
+            <div className="user">
+            <h2>{pageUser.username}</h2>
+                {pageUser.admin ? <p>Admin</p> : <p>User</p>}
+                <div className="user-messages">
+                    <h2>Last messages</h2>
+                    <div className="messages-list">
+                        {messages?.map((message) => (
+                            <MessageComponent
+                                key={message.id}
+                                message={message}
+                                user={pageUser}
+                                channel={undefined}
+                                deleteMessage={undefined}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
         </div>
     );
 }