add: added user pages, and last messages to the home page

front/src/pages/ChannelPage.tsx

@@ -1,11 +1,11 @@
 import { useParams, Link } from "react-router-dom";
 import React, { useEffect, useState } from "react";
-import { Channel_type, Messages, User } from "../types";
+import { Channel, Messages, User } from "../types";
 import axios from "axios";
 
-export default function Channel() {
+export default function ChannelPage() {
     const { name } = useParams();
-    const [channel, setChannel] = useState<Channel_type>();
+    const [channel, setChannel] = useState<Channel>();
     const [messages, setMessages] = useState<Messages>();
     const [token, setToken] = useState<string>("");
     const [user, setUser] = useState<User>();
@@ -98,7 +98,7 @@ export default function Channel() {
             <ul>
                 {messages.slice(0, maxMessageToShown).map((message) => (
                     <li key={message.id}>
-                        <p>{message.username}: {message.content}</p>
+                        <p><Link to={`/u/${message.username}`}>{message.username}</Link>: {message.content}</p>
                         <p>{new Date(message.date * 1000).toLocaleString()}</p>
                         {(user?.id === message.user_id || user?.id === channel.owner_id || user?.admin === 1) && (
                             <button onClick={() => {deleteMessage(message.id)}}>Delete</button>

front/src/pages/Home.tsx

@@ -1,29 +1,41 @@
 import { useState, useEffect } from "react"
 import { Link } from "react-router-dom"
-import { Channels, User } from "../types"
+import { Channels, User, Messages } from "../types"
 import axios from "axios"
 
 export default function Home() {
     const [user, setUser] = useState<User>();
     const [channels, setChannels] = useState<Channels>();
+    const [messages , setMessages] = useState<Messages>();
 
     useEffect(() => {
         const token = localStorage.getItem("token")
         if (token) {
-            axios.post("/api/auth/me", {
-                token: token
-            }).then((res) => {
-                setUser(res.data)
-            }).catch((err) => {
+            axios
+                .post("/api/auth/me", {
+                    token: token
+                })
+                .then((res) => {
+                    setUser(res.data)
+                })
+                .catch((err) => {
+                    console.error(err)
+                })
+            } 
+
+        axios
+            .get("/api/channels").then((res) => {
+                setChannels(res.data)
+            })
+            .catch((err) => {
                 console.error(err)
             })
-        } 
-
-        axios.get("/api/channels").then((res) => {
-            setChannels(res.data)
-        }).catch((err) => {
-            console.error(err)
-        })
+        
+        axios
+            .get("/api/lastmessages").then((res) => {
+                setMessages(res.data)
+            }
+        )
     }, [])
 
     return (
@@ -52,6 +64,16 @@ export default function Home() {
                     </li>
                 ))}
             </ul>
+            <h2>Last messages</h2>
+            <ul>
+                {messages?.map((message) => (
+                    <li key={message.id}>
+                        <p><Link to={`/u/${message.username}`}>{message.username}</Link>: {message.content}</p>
+                        <p>In <Link to={`/c/${message.channel_name}`}>{message.channel_name}</Link></p>
+                        <p>{new Date(message.date * 1000).toLocaleString()}</p>
+                    </li>
+                ))}
+            </ul>
             <img src="cat.jpg" alt="cat" className="cat"/>
         </div>
     )

front/src/pages/UserPage.tsx

@@ -0,0 +1,42 @@
+import { useParams, Link } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { User, Messages } from "../types";
+import axios from "axios";
+
+export default function UserPage() {
+    const { username } = useParams();
+    const [user, setUser] = useState<User>();
+    const [messages, setMessages] = useState<Messages>();
+
+    useEffect(() => {
+        axios.get(`/api/users/${username}`).then((res) => {
+            setUser(res.data);
+        });
+
+        axios.get(`/api/users/${username}/lastmessages`).then((res) => {
+            setMessages(res.data);
+        });
+    }, [username]);
+
+    if (!user) {
+        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) => (
+                    <li key={message.id}>
+                        <p><Link to={`/u/${message.username}`}>{message.username}</Link>: {message.content}</p>
+                        <p>In <Link to={`/c/${message.channel_name}`}>{message.channel_name}</Link></p>
+                        <p>{new Date(message.date * 1000).toLocaleString()}</p>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}