add: added limit param to message get url to send fewer messages

back/api/channels.js

@@ -4,17 +4,13 @@ const {
     getChannels,
     getChannel,
     addChannel,
-    getMessage,
     getMessages,
     addMessage,
-    deleteMessage,
     addMention,
     getMentions,
     getUserByUsername,
     deleteChannelMessages,
     deleteChannel,
-    setHasReplies,
-    addReply,
     getMessageReplies
 } = require('../libs/mysql');
 const rateLimit = require("express-rate-limit");
@@ -130,13 +126,14 @@ async function getReplies(message, connection) {
 
 router.get('/:name/messages', async (req, res) => {
     const name = req.params.name;
+    const limit = Number(req.query.limit) || 10;
     const connection = await getConnection();
     const channel = await getChannel(connection, name);
     if (!channel[0]) {
         connection.end();
         return res.send('No channel found');
     }
-    const messages = await getMessages(connection, channel[0].id);
+    const messages = await getMessages(connection, channel[0].id, limit);
 
     for (const message of messages) {
         if (message.content.includes('@')) {

back/libs/mysql.js

@@ -335,7 +335,7 @@ function deleteChannelMessages(connection, channel_id) {
   });
 }
 
-function getMessages(connection, channel_id) {
+function getMessages(connection, channel_id, limit) {
   return new Promise((resolve, reject) => {
     connection.query(
       `SELECT messages.id, user_id, username, content, date, channels.name AS channel_name, has_replies
@@ -343,8 +343,9 @@ function getMessages(connection, channel_id) {
        JOIN users ON messages.user_id = users.id 
        JOIN channels ON messages.channel_id = channels.id 
        WHERE channel_id = ? AND reply_to_id IS NULL 
-       ORDER BY date DESC`,
+       ORDER BY date DESC
-      [channel_id],
+       LIMIT ?`,
+      [channel_id, limit],
       (error, result) => {
         if (error) {
           reject(new Error(error));

front/src/pages/ChannelPage.tsx

@@ -140,6 +140,17 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
         }
     }, [message]);
 
+    useEffect(() => {
+        axios
+            .get(`/api/channels/${name}/messages?limit=${maxMessageToShown}`)
+            .then((res) => {
+                setMessages(res.data);
+            })
+            .catch((err) => {
+                console.error(err.response.data);
+            });
+    }, [maxMessageToShown]);
+    
     if (noChannel) {
         return (
             <div className="forum-page">
@@ -247,7 +258,7 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
                 {messages ? (
                     <div className="messages-list">
                         {messages?.length === 0 && <p>No messages yet.</p>}
-                        {messages.slice(0, maxMessageToShown).map((message) => (
+                        {messages.map((message) => (
                             <MessageComponent
                                 key={message.id}
                                 message={message}
@@ -255,7 +266,7 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
                                 channel={channel}
                             />
                         ))}
-                        {messages.length > maxMessageToShown && (
+                        {messages.length == maxMessageToShown && (
                             <button onClick={() => setMaxMessageToShown(maxMessageToShown + 10)}>Show more</button>
                         )}
                     </div>