add: added homepage

front/src/main.tsx

@@ -4,12 +4,16 @@ import './index.css'
 
 import Home from './pages/Home'
 import Channel from './pages/Channel'
+import Login from './pages/Login'
+import Register from './pages/Register'
 
 createRoot(document.getElementById('root')!).render(
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<Home />} />
-      <Route path="/channels/:id" element={<Channel />} />
+      <Route path="/channels/:name" element={<Channel />} />
+      <Route path="/login" element={<Login />} />
+      <Route path="/register" element={<Register />} />
     </Routes>
   </BrowserRouter>
 )

front/src/pages/Channel.tsx

@@ -1,37 +1,22 @@
 import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
+import { Channel_type, Messages } from "../types";
 import axios from "axios";
 
-type Channel ={
-    id: number,
-    name: string
-    description: string
-}
-
-type Message = {
-    id: number,
-    user_id: number,
-    username: string,
-    content: string,
-    date: number
-}
-
-type Messages = Message[]
-
 export default function Channel() {
-    const { id } = useParams();
-    const [channel, setChannel] = useState<Channel>();
+    const { name } = useParams();
+    const [channel, setChannel] = useState<Channel_type>();
     const [messages, setMessages] = useState<Messages>();
 
     useEffect(() => {
-        axios.get(`/api/channels/${id}`).then((res) => {
+        axios.get(`/api/channels/${name}`).then((res) => {
             setChannel(res.data);
         });
 
-        axios.get(`/api/channels/${id}/messages`).then((res) => {
+        axios.get(`/api/channels/${name}/messages`).then((res) => {
             setMessages(res.data);
         });
-    }, [id]);
+    }, [name]);
 
     if (!channel || !messages) {
         return <div>Loading...</div>;

front/src/pages/Home.tsx

@@ -1,7 +1,56 @@
+import { useState, useEffect } from "react"
+import { Link } from "react-router-dom"
+import { Channels, User } from "../types"
+import axios from "axios"
+
 export default function Home() {
+    const [user, setUser] = useState<User>();
+    const [channels, setChannels] = useState<Channels>();
+
+    useEffect(() => {
+        const token = localStorage.getItem("token")
+        if (token) {
+            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)
+        })
+    }, [])
+
     return (
         <div>
             <h1>Home</h1>
+            {user ? (
+                <div>
+                    <p>Welcome {user.username}</p>
+                    <button onClick={() => {
+                        localStorage.removeItem("token")
+                        window.location.reload()
+                    }}>Logout</button>
+                </div>
+            ) : (
+                <div>
+                    <Link to="/login">Login</Link>
+                    <Link to="/register">Register</Link>
+                </div>
+            )}
+            <h2>Channels</h2>
+            <ul>
+                {channels?.map((channel) => (
+                    <li key={channel.id}>
+                        <Link to={`/channels/${channel.name}`}>{channel.name}</Link>
+                    </li>
+                ))}
+            </ul>
         </div>
     )
 }

front/src/pages/Login.tsx

@@ -0,0 +1,45 @@
+import axios from "axios";
+import { useState } from "react";
+import { useNavigate, Link } from "react-router-dom";
+
+export default function Login() {
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const navigate = useNavigate();
+
+    function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        axios
+            .post("/api/auth/login", { username, password })
+            .then((res) => {
+                localStorage.setItem("token", res.data.token);
+                navigate("/");
+            })
+            .catch((err) => {
+                alert(err.response.data.message);
+            });
+    }
+
+    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>
+    );
+}

front/src/pages/Register.tsx

@@ -0,0 +1,47 @@
+import axios from "axios";
+import { useState } from "react";
+import { useNavigate, Link } from "react-router-dom";
+
+export default function Register () {
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const navigate = useNavigate();
+
+    function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        axios.post("/api/auth/register", { username, password });
+        axios
+            .post("/api/auth/login", { username, password })
+            .then((res) => {
+                localStorage.setItem("token", res.data.token);
+                navigate("/");
+            })
+            .catch((err) => {
+                alert(err.response.data.message);
+            }
+        );
+    }
+
+    return (
+        <div>
+            <Link to="/">Home</Link>
+            <h1>Register</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">Register</button>
+            </form>
+            <Link to="/login">Login</Link>
+        </div>
+    );
+}

front/src/types.tsx

@@ -0,0 +1,22 @@
+export type Channel_type ={
+    id: number,
+    name: string
+    description: string
+}
+
+export type Channels = Channel_type[]
+
+export type Message = {
+    id: number,
+    user_id: number,
+    username: string,
+    content: string,
+    date: number
+}
+
+export type Messages = Message[]
+
+export type User = {
+    id: number,
+    username: string
+}