add: added message sending

back/libs/mysql.js

@@ -96,7 +96,7 @@ function addChannel(connection, name, description) {
 function getMessages(connection, channel_id) {
     return new Promise((resolve, reject) => {
         connection.query(
-        `SELECT messages.id, user_id, username, content, date FROM messages JOIN users ON messages.user_id = users.id WHERE channel_id = ${channel_id}`,
+        `SELECT messages.id, user_id, username, content, date FROM messages JOIN users ON messages.user_id = users.id WHERE channel_id = ${channel_id} ORDER BY date DESC`,
         (error, result) => {
             if (error) {
             reject(new Error(error));

front/src/main.tsx

@@ -6,14 +6,16 @@ import Home from './pages/Home'
 import Channel from './pages/Channel'
 import Login from './pages/Login'
 import Register from './pages/Register'
+import CreateChannel from './pages/CreateChannel'
 
 createRoot(document.getElementById('root')!).render(
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<Home />} />
-      <Route path="/channels/:name" element={<Channel />} />
+      <Route path="/:name" element={<Channel />} />
       <Route path="/login" element={<Login />} />
       <Route path="/register" element={<Register />} />
+      <Route path="/create-channel" element={<CreateChannel />} />
     </Routes>
   </BrowserRouter>
 )

front/src/pages/Channel.tsx

@@ -1,5 +1,5 @@
-import { useParams } from "react-router-dom";
-import { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import React, { useEffect, useState } from "react";
 import { Channel_type, Messages } from "../types";
 import axios from "axios";
 
@@ -7,8 +7,31 @@ export default function Channel() {
     const { name } = useParams();
     const [channel, setChannel] = useState<Channel_type>();
     const [messages, setMessages] = useState<Messages>();
+    const [token, setToken] = useState<string>("");
+    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);
+            });
+    }
 
     useEffect(() => {
+        const localToken = localStorage.getItem("token");
+        if (localToken) setToken(localToken);
         axios.get(`/api/channels/${name}`).then((res) => {
             setChannel(res.data);
         });
@@ -24,12 +47,39 @@ export default function Channel() {
 
     return (
         <div>
+            <Link to="/">Home</Link>
             <h1>Channel {channel.name}</h1>
+            <p>{channel.description}</p>
+            {
+                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.map((message) => (
-                    <li key={message.id}>{`${message.username}: ${message.content}`}</li>
+                {messages.slice(0, maxMessageToShown).map((message) => (
+                    <li key={message.id}>
+                        <p>{message.username}: {message.content}</p>
+                    </li>
                 ))}
             </ul>
+            {
+                messages.length > maxMessageToShown && (
+                    <button onClick={() => setMaxMessageToShown(maxMessageToShown + 10)}>Show more</button>
+                )
+            }
         </div>
     );
 }

front/src/pages/CreateChannel.tsx

@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import axios from "axios";
+
+
+export default function CreateChannel() {
+    const navigate = useNavigate();
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [token, setToken] = useState<string>("");
+
+    useEffect(() => {
+        const localToken = localStorage.getItem("token");
+        if (localToken) setToken(localToken);
+    }, []);
+
+    function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        axios
+            .post("/api/channels/add", { name, description, token })
+            .then(() => {
+                navigate("/");
+            })
+            .catch((err) => {
+                console.error(err.response.data.message);
+            });
+    }
+
+    return (
+        <div>
+            <Link to="/">Home</Link>
+            <h1>Create Channel</h1>
+            <form onSubmit={handleSubmit}>
+                <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">Create</button>
+            </form>
+        </div>
+    );
+}

front/src/pages/Home.tsx

@@ -43,11 +43,12 @@ export default function Home() {
                     <Link to="/register">Register</Link>
                 </div>
             )}
+            <Link to="/create-channel">Create Channel</Link>
             <h2>Channels</h2>
             <ul>
                 {channels?.map((channel) => (
                     <li key={channel.id}>
-                        <Link to={`/channels/${channel.name}`}>{channel.name}</Link>
+                        <Link to={`/${channel.name}`}>{channel.name}</Link>
                     </li>
                 ))}
             </ul>