add: improved UI by adding CSS files

front/src/pages/ChannelPage.tsx

@@ -1,9 +1,12 @@
 import { useParams, Link } from "react-router-dom";
 import React, { useEffect, useState } from "react";
 import { Channel, Messages, User } from "../types";
+import TopBar from "../components/TopBar";
 import MessageComponent from "../components/MessageComponent";
 import axios from "axios";
 
+import "../styles/ChannelPage.css";
+
 export default function ChannelPage() {
     const { name } = useParams();
     const [channel, setChannel] = useState<Channel>();
@@ -102,17 +105,24 @@ export default function ChannelPage() {
     }
 
     return (
-        <div>
-            <Link to="/">Home</Link>
-            <h1>Channel {channel.name}</h1>
-            <p>{channel.description}</p>
-            <p>Owner: <Link to={`/u/${channel.owner_username}`}>{channel.owner_username}</Link></p>
-            {channel.name.toLowerCase().includes("cat") && (
-                <img src="/cat.jpg" alt="cat" className="cat" />
-            )}
-            {
-                token ? (
-                    <form onSubmit={handleSubmit}>
+        <div className="channel-page">
+            <TopBar user={user} />
+            <div className="channel">
+                <h2>Channel {channel.name}</h2>
+                <p>{channel.description}</p>
+                <p>Owner: <Link to={`/u/${channel.owner_username}`}>{channel.owner_username}</Link></p>
+                {channel.name.toLowerCase().includes("cat") && (
+                    <img src="/cat.jpg" alt="cat" className="cat" />
+                )}
+                {token ? (
+                    <form onSubmit={handleSubmit} className="message-form">
+                        <input 
+                            type="text"
+                            placeholder="Message"
+                            value={message}
+                            onChange={(e) => setMessage(e.target.value)}
+                        />
+                        <button type="submit">Send</button>
                         {searchedUsers.length > 0 && (
                             <div>
                                 <p>Mentions:</p>
@@ -134,37 +144,28 @@ export default function ChannelPage() {
                                 ))}
                             </div>
                         )}
-                        <input 
-                            type="text"
-                            placeholder="Message"
-                            value={message}
-                            onChange={(e) => setMessage(e.target.value)}
-                        />
-                        <button type="submit">Send</button>
                     </form>
                 ) : (
-                    <div>
+                    <div className="login-prompt">
                         <Link to="/login">Login</Link>
                         <Link to="/register">Register</Link>
                     </div>
-                )
-            }
-            <ul>
-                {messages.slice(0, maxMessageToShown).map((message) => (
-                    <MessageComponent
-                        key={message.id}
-                        message={message}
-                        user={user}
-                        channel={channel}
-                        deleteMessage={deleteMessage}
-                    />
-                ))}
-            </ul>
-            {
-                messages.length > maxMessageToShown && (
-                    <button onClick={() => setMaxMessageToShown(maxMessageToShown + 10)}>Show more</button>
-                )
-            }
+                )}
+                <div className="messages-list">
+                    {messages.slice(0, maxMessageToShown).map((message) => (
+                        <MessageComponent
+                            key={message.id}
+                            message={message}
+                            user={user}
+                            channel={channel}
+                            deleteMessage={deleteMessage}
+                        />
+                    ))}
+                    {messages.length > maxMessageToShown && (
+                        <button onClick={() => setMaxMessageToShown(maxMessageToShown + 10)}>Show more</button>
+                    )}
+                </div>
+            </div>
         </div>
     );
 }

front/src/pages/ChannelsPage.tsx

@@ -1,13 +1,28 @@
 import { useState, useEffect } from "react"
 import { Link } from "react-router-dom"
-import { Channels } from "../types"
+import { Channels, User } from "../types"
 import axios from "axios"
+import TopBar from "../components/TopBar"
+
+import "../styles/ChannelsPage.css"
 
 export default function ChannelsPage() {
     const [channels, setChannels] = useState<Channels>();
     const [search, setSearch] = useState<string>("");
+    const [user, setUser] = useState<User>();
 
     useEffect(() => {
+        const token = localStorage.getItem("token")
+
+        if (token) {
+            axios
+                .post("/api/auth/me", {
+                    token: token
+                })
+                .then((res) => {
+                    setUser(res.data)
+                })
+        }
         axios
             .get("/api/channels")
             .then((res) => {
@@ -31,22 +46,24 @@ export default function ChannelsPage() {
     }, [])
 
     return (
-        <div>
-            <Link to="/">Home</Link>
-            <h1>Channels</h1>
-            <input
-                type="text"
-                placeholder="Search channels"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-            />
-            <ul>
-                {channels?.filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase())).map((channel) => (
-                    <li key={channel.id}>
-                        <Link to={`/c/${channel.name}`}>{channel.name}</Link>
-                    </li>
-                ))}
-            </ul>
+        <div className="channels-page">
+            <TopBar user={user} />
+            <div className="channels-page-channels">
+                <h2>Channels</h2>
+                <input
+                    type="text"
+                    placeholder="Search channels"
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                />
+                <ul>
+                    {channels?.filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase())).map((channel) => (
+                        <li key={channel.id}>
+                            <Link to={`/c/${channel.name}`}>{channel.name}</Link>
+                        </li>
+                    ))}
+                </ul>
+            </div>
         </div>
     )
 }

front/src/pages/CreateChannel.tsx

@@ -1,17 +1,29 @@
 import { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import { User } from "../types";
 import axios from "axios";
+import TopBar from "../components/TopBar";
 
+import "../styles/CreateChannel.css";
 
 export default function CreateChannel() {
     const navigate = useNavigate();
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
     const [token, setToken] = useState<string>("");
+    const [user , setUser] = useState<User>();
 
     useEffect(() => {
         const localToken = localStorage.getItem("token");
-        if (localToken) setToken(localToken);
+        if (localToken) {
+            setToken(localToken)
+
+            axios
+                .post("/api/auth/me", { token: localToken })
+                .then((res) => {
+                    setUser(res.data);
+                });
+        }
     }, []);
 
     function handleSubmit(e: React.FormEvent) {
@@ -27,31 +39,33 @@ export default function CreateChannel() {
     }
 
     return (
-        <div>
-            <Link to="/">Home</Link>
-            <h1>Create Channel</h1>
-            <form onSubmit={handleSubmit}>
-                <p>
-                    {!/^[a-zA-Z0-9-_]+$/.test(name) && name.length != 0 && (
-                        <span>Channel name can only contain letters, numbers, - and _</span>
-                    )}
-                </p>
-                <input
-                    type="text"
-                    placeholder="Name"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                />
-                <input
-                    type="text"
-                    placeholder="Description"
-                    value={description}
-                    onChange={(e) => setDescription(e.target.value)}
-                />
-                <button type="submit" disabled={!/^[a-zA-Z0-9-_]+$/.test(name)}>
-                    Create
-                </button>
-            </form>
+        <div className="create-channel-page">
+            <TopBar user={user}/>
+            <div className="create-channel">
+                <h1>Create Channel</h1>
+                <form onSubmit={handleSubmit}>
+                    <p>
+                        {!/^[a-zA-Z0-9-_]+$/.test(name) && name.length != 0 && (
+                            <span>Channel name can only contain letters, numbers, - and _</span>
+                        )}
+                    </p>
+                    <input
+                        type="text"
+                        placeholder="Name"
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                    />
+                    <input
+                        type="text"
+                        placeholder="Description"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                    />
+                    <button type="submit" disabled={!/^[a-zA-Z0-9-_]+$/.test(name)}>
+                        Create
+                    </button>
+                </form>
+            </div>
         </div>
     );
 }

front/src/pages/Home.tsx

@@ -1,9 +1,12 @@
 import { useState, useEffect } from "react"
 import { Link } from "react-router-dom"
 import { Channels, RecentChannels, User, Messages } from "../types"
+import TopBar from "../components/TopBar"
 import MessageComponent from "../components/MessageComponent"
 import axios from "axios"
 
+import "../styles/Home.css"
+
 export default function Home() {
     const [user, setUser] = useState<User>();
     const [channels, setChannels] = useState<RecentChannels>();
@@ -80,59 +83,66 @@ export default function Home() {
     }, [search])
 
     return (
-        <div>
-            <h1>Home</h1>
-            {user ? (
-                <div>
-                    <p>Welcome {user.username}</p>
-                    <button onClick={() => {
-                        localStorage.removeItem("token")
-                        window.location.reload()
-                    }}>Logout</button>
-                    <Link to="/create-channel">Create Channel</Link>
+        <div className="home">
+            <TopBar user={user} />
+            <div className="home-header">
+                <div className="home-header-text">
+                    <h2>Welcome to Tanuki's forum !</h2>
+                    <p>
+                        I don't know what to say, but I hope you will enjoy your stay here.
+                    </p>
                 </div>
-            ) : (
-                <div>
-                    <Link to="/login">Login</Link>
-                    <Link to="/register">Register</Link>
+                <img src="osaka_arch.png" alt="osaka" className="osaka"/>
+            </div>
+            <div className="main-content">
+                <div className="home-messages">
+                    <h2>Last messages</h2>
+                    <div className="messages-list">
+                        {messages?.map((message) => (
+                            <MessageComponent
+                                key={message.id}
+                                message={message}
+                                user={user}
+                                channel={undefined}
+                                deleteMessage={undefined}
+                            />
+                        ))}
+                    </div>
                 </div>
-            )}
-            <h2>Recent active channels</h2>
-            <ul>
-                {channels?.map((channel) => (
-                    <li key={channel.id}>
-                        <Link to={`/c/${channel.name}`}>{channel.name}</Link>
-                    </li>
-                ))}
-            </ul>
-            <h2>Search channels</h2>
-            <input
-                type="text"
-                placeholder="Search channels"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-            />
-            <ul>
-                {searchedChannels?.map((channel) => (
-                    <li key={channel.id}>
-                        <Link to={`/c/${channel.name}`}>{channel.name}</Link>
-                    </li>
-                ))}
-            </ul>
-            <Link to={'/channels'}>All channels</Link>
-            <h2>Last messages</h2>
-            <ul>
-                {messages?.map((message) => (
-                    <MessageComponent
-                        key={message.id}
-                        message={message}
-                        user={user}
-                        channel={undefined}
-                        deleteMessage={undefined}
-                    />
-                ))}
-            </ul>
-            <img src="osaka_arch.png" alt="osaka" className="osaka"/>
+                <div className="channels">
+                    <h2>Channels</h2>
+                    <Link to={'/channels'}>All channels</Link>
+                    {user && (
+                        <Link to={'/create-channel'}>Create channel</Link>
+                    )}
+                    <div className="channels-recent">
+                        <h3>Recent active channels</h3>
+                        <ul>
+                            {channels?.map((channel) => (
+                                <li key={channel.id}>
+                                    <Link to={`/c/${channel.name}`}>{channel.name}</Link>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                    <div className="channels-search">   
+                        <h3>Search channels</h3>
+                        <input
+                            type="text"
+                            placeholder="Search channels"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                        />
+                        <ul>
+                            {searchedChannels?.map((channel) => (
+                                <li key={channel.id}>
+                                    <Link to={`/c/${channel.name}`}>{channel.name}</Link>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            </div>
         </div>
     )
 }

front/src/pages/Login.tsx

@@ -1,6 +1,9 @@
 import axios from "axios";
 import { useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
+import TopBar from "../components/TopBar";
+
+import "../styles/Login.css";
 
 export default function Login() {
     const [username, setUsername] = useState("");
@@ -21,25 +24,27 @@ export default function Login() {
     }
 
     return (
-        <div>
-            <Link to="/">Home</Link>
-            <h1>Login</h1>
-            <form onSubmit={handleSubmit}>
-                <input
-                    type="text"
-                    placeholder="Username"
-                    value={username}
-                    onChange={(e) => setUsername(e.target.value)}
-                />
-                <input
-                    type="password"
-                    placeholder="Password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                />
-                <button type="submit">Login</button>
-            </form>
-            <Link to="/register">Register</Link>
+        <div className="login-page">
+            <TopBar user={undefined}/>
+            <div className="login">
+                <h2>Login</h2>
+                <form onSubmit={handleSubmit}>
+                    <input
+                        type="text"
+                        placeholder="Username"
+                        value={username}
+                        onChange={(e) => setUsername(e.target.value)}
+                    />
+                    <input
+                        type="password"
+                        placeholder="Password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                    />
+                    <button type="submit">Login</button>
+                </form>
+                <Link to="/register">Register</Link>
+            </div>
         </div>
     );
 }

front/src/pages/Register.tsx

@@ -1,6 +1,9 @@
 import axios from "axios";
 import { useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
+import TopBar from "../components/TopBar";
+
+import "../styles/Register.css";
 
 export default function Register () {
     const [username, setUsername] = useState("");
@@ -28,32 +31,34 @@ export default function Register () {
     }
 
     return (
-        <div>
-            <Link to="/">Home</Link>
-            <h1>Register</h1>
-            <form onSubmit={handleSubmit}>
-                <p>
-                    {!/^[a-zA-Z0-9-_]+$/.test(username) && username.length != 0 && (
-                        <span>Username can only contain letters, numbers, - and _</span>
-                    )}
-                </p>
-                <input
-                    type="text"
-                    placeholder="Username"
-                    value={username}
-                    onChange={(e) => setUsername(e.target.value)}
-                />
-                <input
-                    type="password"
-                    placeholder="Password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                />
-                <button type="submit" disabled={!/^[a-zA-Z0-9-_]+$/.test(username)}>
-                    Register
-                </button>
-            </form>
-            <Link to="/login">Login</Link>
+        <div className="register-page">
+            <TopBar user={undefined}/>
+            <div className="register">
+                <h2>Register</h2>
+                <form onSubmit={handleSubmit}>
+                    <p>
+                        {!/^[a-zA-Z0-9-_]+$/.test(username) && username.length != 0 && (
+                            <span>Username can only contain letters, numbers, - and _</span>
+                        )}
+                    </p>
+                    <input
+                        type="text"
+                        placeholder="Username"
+                        value={username}
+                        onChange={(e) => setUsername(e.target.value)}
+                    />
+                    <input
+                        type="password"
+                        placeholder="Password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                    />
+                    <button type="submit" disabled={!/^[a-zA-Z0-9-_]+$/.test(username)}>
+                        Register
+                    </button>
+                </form>
+                <Link to="/login">Login</Link>
+            </div>
         </div>
     );
 }

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>
     );
 }