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

front/src/pages/ChannelPage.tsx

@@ -0,0 +1,116 @@
+import { useParams, Link } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { Channel, Messages, User } from "../types";
+import axios from "axios";
+
+export default function ChannelPage() {
+    const { name } = useParams();
+    const [channel, setChannel] = useState<Channel>();
+    const [messages, setMessages] = useState<Messages>();
+    const [token, setToken] = useState<string>("");
+    const [user, setUser] = useState<User>();
+    const [message, setMessage] = useState<string>("");
+    const [maxMessageToShown, setMaxMessageToShown] = useState<number>(10);
+
+    function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        axios
+            .post(`/api/channels/${name}/messages/send`, { token, message})
+            .then(() => {
+                axios
+                    .get(`/api/channels/${name}/messages`)
+                    .then((res) => {
+                        setMessages(res.data);
+                        setMessage("");
+                    }
+                );
+            })
+            .catch((err) => {
+                console.error(err.response.data.message);
+            });
+    }
+
+    function deleteMessage(message_id: number) {
+        axios
+            .post(`/api/channels/${name}/messages/delete`, { token, message_id })
+            .then(() => {
+                axios
+                    .get(`/api/channels/${name}/messages`)
+                    .then((res) => {
+                        setMessages(res.data);
+                    }
+                );
+            })
+            .catch((err) => {
+                console.error(err.response.data.message);
+            });
+    }
+
+    useEffect(() => {
+        const localToken = localStorage.getItem("token");
+        if (localToken) {
+            setToken(localToken);
+            axios.post("/api/auth/me", { token: localToken }).then((res) => {
+                    setUser(res.data);
+                }
+            );
+        }
+        axios.get(`/api/channels/${name}`).then((res) => {
+            setChannel(res.data);
+        });
+
+        axios.get(`/api/channels/${name}/messages`).then((res) => {
+            setMessages(res.data);
+        });
+    }, [name]);
+
+    if (!channel || !messages) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <div>
+            <Link to="/">Home</Link>
+            <h1>Channel {channel.name}</h1>
+            <p>{channel.description}</p>
+            <p>Owner: {channel.owner_username}</p>
+            {channel.name.toLowerCase().includes("cat") && (
+                <img src="cat.jpg" alt="cat" className="cat" />
+            )}
+            {
+                token ? (
+                    <form onSubmit={handleSubmit}>
+                        <input 
+                            type="text"
+                            placeholder="Message"
+                            value={message}
+                            onChange={(e) => setMessage(e.target.value)}
+                        />
+                        <button type="submit">Send</button>
+                    </form>
+                ) : (
+                    <div>
+                        <Link to="/login">Login</Link>
+                        <Link to="/register">Register</Link>
+                    </div>
+                )
+            }
+            <ul>
+                {messages.slice(0, maxMessageToShown).map((message) => (
+                    <li key={message.id}>
+                        <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>
+                        )}
+                    </li>
+                ))}
+            </ul>
+            {
+                messages.length > maxMessageToShown && (
+                    <button onClick={() => setMaxMessageToShown(maxMessageToShown + 10)}>Show more</button>
+                )
+            }
+        </div>
+    );
+}