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

back/api/auth.js

@@ -31,6 +31,11 @@ router.post('/register', async (req, res) => {
         return res.status(401).send({ error: 'Username already exists' });
     }
 
+    if (!/^[a-zA-Z0-9-_]+$/.test(username)) {
+        connection.end();
+        return res.status(400).send({ error: 'Invalid username' });
+    }
+
     const hash = sha256(password);
     await addUser(connection, username, hash);
     connection.end();

back/api/channels.js

@@ -1,6 +1,6 @@
 const express = require('express');
 const jwt = require('jsonwebtoken');
-const { getConnection, getUser, getChannels, getChannel, addChannel, getMessages, addMessage, deleteMessage } = require('../libs/mysql');
+const { getConnection, getUser, getChannels, getChannel, addChannel, getMessages, addMessage, deleteMessage, getLastMessages } = require('../libs/mysql');
 
 const router = express.Router();
 

back/api/lastmessages.js

@@ -0,0 +1,14 @@
+const express = require('express');
+const jwt = require('jsonwebtoken');
+const { getConnection, getLastMessages } = require('../libs/mysql');
+
+const router = express.Router();
+
+router.get('/', async (req, res) => {
+    const connection = await getConnection();
+    const messages = await getLastMessages(connection);
+    connection.end();
+    res.send(messages);
+});
+
+module.exports = router;

back/api/users.js

@@ -1,19 +1,26 @@
 const express = require('express');
-const sha256 = require("sha256");
+const { getConnection, getUserByUsername, getUserLastMessages } = require('../libs/mysql');
-const { getConnection, getUser, addUser } = require('../libs/mysql');
 
 const router = express.Router();
 
-router.get('/:id', async (req, res) => {
+router.get('/:username', async (req, res) => {
-    const id = req.params.id;
+    const username = req.params.username;
     const connection = await getConnection();
-    const users = await getUser(connection, id);
+    const user = await getUserByUsername(connection, username);
     connection.end();
-    if (users[0]) {
+    if (user[0]) {
-        res.send({id: users[0].id, username: users[0].username, admin: users[0].admin});
+        res.send({id: user[0].id, username: user[0].username, admin: user[0].admin});
     } else {
         res.send('No user found');
     }
 });
 
+router.get('/:username/lastmessages', async (req, res) => {
+    const username = req.params.username;
+    const connection = await getConnection();
+    const messages = await getUserLastMessages(connection, username);
+    connection.end();
+    res.send(messages);
+});
+
 module.exports = router;

back/libs/mysql.js

@@ -51,6 +51,20 @@ function addUser(connection, username, password) {
   });
 }
 
+function getUserLastMessages(connection, username) {
+    return new Promise((resolve, reject) => {
+        connection.query(
+        `SELECT messages.id, user_id, username, content, date, channels.name AS channel_name FROM messages JOIN users ON messages.user_id = users.id JOIN channels ON messages.channel_id = channels.id WHERE username = "${username}" ORDER BY date DESC LIMIT 5`,
+        (error, result) => {
+            if (error) {
+            reject(new Error(error));
+            }
+            resolve(result);
+        }
+        );
+    });
+}
+
 function getChannels(connection) {
   return new Promise((resolve, reject) => {
     connection.query(
@@ -96,7 +110,21 @@ function addChannel(connection, name, description, owner_id) {
 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} ORDER BY date DESC`,
+        `SELECT messages.id, user_id, username, content, date, channels.name AS channel_name FROM messages JOIN users ON messages.user_id = users.id JOIN channels ON messages.channel_id = channels.id WHERE channel_id = ${channel_id} ORDER BY date DESC`,
+        (error, result) => {
+            if (error) {
+            reject(new Error(error));
+            }
+            resolve(result);
+        }
+        );
+    });
+}
+
+function getLastMessages(connection) {
+    return new Promise((resolve, reject) => {
+        connection.query(
+        `SELECT messages.id, user_id, username, content, date, channels.name AS channel_name FROM messages JOIN users ON messages.user_id = users.id JOIN channels ON messages.channel_id = channels.id ORDER BY date DESC LIMIT 5`,
         (error, result) => {
             if (error) {
             reject(new Error(error));
@@ -140,10 +168,12 @@ module.exports = {
   getUser,
   getUserByUsername,
   addUser,
+  getUserLastMessages,
   getChannels,
   getChannel,
   addChannel,
   getMessages,
+  getLastMessages,
   addMessage,
   deleteMessage
 };

front/src/main.tsx

@@ -3,7 +3,8 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import './index.css'
 
 import Home from './pages/Home'
-import Channel from './pages/Channel'
+import ChannelPage from './pages/ChannelPage'
+import UserPage from './pages/UserPage'
 import Login from './pages/Login'
 import Register from './pages/Register'
 import CreateChannel from './pages/CreateChannel'
@@ -12,7 +13,8 @@ createRoot(document.getElementById('root')!).render(
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<Home />} />
-      <Route path="/c/:name" element={<Channel />} />
+      <Route path="/c/:name" element={<ChannelPage />} />
+      <Route path="/u/:username" element={<UserPage />} />
       <Route path="/login" element={<Login />} />
       <Route path="/register" element={<Register />} />
       <Route path="/create-channel" element={<CreateChannel />} />

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", {
+            axios
-                token: token
+                .post("/api/auth/me", {
-            }).then((res) => {
+                    token: token
-                setUser(res.data)
+                })
-            }).catch((err) => {
+                .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) => {
+        axios
-            setChannels(res.data)
+            .get("/api/lastmessages").then((res) => {
-        }).catch((err) => {
+                setMessages(res.data)
-            console.error(err)
+            }
-        })
+        )
     }, [])
 
     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>
+    );
+}

front/src/types.tsx

@@ -1,4 +1,4 @@
-export type Channel_type ={
+export type Channel ={
     id: number,
     name: string
     description: string
@@ -6,14 +6,16 @@ export type Channel_type ={
     owner_username: string
 }
 
-export type Channels = Channel_type[]
+export type Channels = Channel[]
 
 export type Message = {
     id: number,
     user_id: number,
     username: string,
     content: string,
-    date: number
+    date: number,
+    channel_id: number,
+    channel_name: string
 }
 
 export type Messages = Message[]