add: changed homepage to display most active channels

back/api/activechannels.js

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

back/api/channels.js

@@ -1,5 +1,4 @@
 const express = require('express');
-const jwt = require('jsonwebtoken');
 const { getConnection, getChannels, getChannel, addChannel, getMessages, getMessage, addMessage, deleteMessage, getLastMessages } = require('../libs/mysql');
 const { checkAuth } = require('../libs/middlewares');
 

back/api/searchchannels.js

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

back/libs/mysql.js

@@ -88,6 +88,46 @@ function getChannels(connection) {
   });
 }
 
+function getActiveChannels(connection) {
+  return new Promise((resolve, reject) => {
+    connection.query(
+      `SELECT channels.id, name, description, owner_id, username AS owner_username, count(*) AS message_count
+       FROM messages
+       JOIN channels ON messages.channel_id = channels.id
+       JOIN users ON messages.user_id = users.id
+       WHERE date > (SELECT max(date) FROM messages) - 7 * 24 * 60 * 60
+       GROUP BY channel_id
+       ORDER BY count(*) DESC
+       LIMIT 5;`,
+      (error, result) => {
+        if (error) {
+          reject(new Error(error));
+        }
+        resolve(result);
+      }
+    );
+  });
+}
+
+function searchChannels(connection, search) {
+  return new Promise((resolve, reject) => {
+    connection.query(
+      `SELECT channels.id, name, description, owner_id, username AS owner_username 
+       FROM channels 
+       JOIN users ON channels.owner_id = users.id 
+       WHERE name LIKE ?
+       LIMIT 5`,
+      [`%${search}%`], // Use parameterized query
+      (error, result) => {
+        if (error) {
+          reject(new Error(error));
+        }
+        resolve(result);
+      }
+    );
+  });
+}
+
 function getChannel(connection, name) {
   return new Promise((resolve, reject) => {
     connection.query(
@@ -215,6 +255,8 @@ module.exports = {
   addUser,
   getUserLastMessages,
   getChannels,
+  getActiveChannels,
+  searchChannels,
   getChannel,
   addChannel,
   getMessages,

front/src/main.tsx

@@ -8,6 +8,7 @@ import UserPage from './pages/UserPage'
 import Login from './pages/Login'
 import Register from './pages/Register'
 import CreateChannel from './pages/CreateChannel'
+import ChannelsPage from './pages/ChannelsPage'
 
 createRoot(document.getElementById('root')!).render(
   <BrowserRouter>
@@ -18,6 +19,7 @@ createRoot(document.getElementById('root')!).render(
       <Route path="/login" element={<Login />} />
       <Route path="/register" element={<Register />} />
       <Route path="/create-channel" element={<CreateChannel />} />
+      <Route path="/channels" element={<ChannelsPage />} />
     </Routes>
   </BrowserRouter>
 )

front/src/pages/ChannelPage.tsx

@@ -70,7 +70,7 @@ export default function ChannelPage() {
                 .get(`/api/channels/${name}/messages`).then((res) => {
                     setMessages(res.data)
                 })
-        }, 5000)
+        }, 2000)
 
         return () => { clearInterval(id) }
     }, [])

front/src/pages/ChannelsPage.tsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from "react"
+import { Link } from "react-router-dom"
+import { Channels } from "../types"
+import axios from "axios"
+
+export default function ChannelsPage() {
+    const [channels, setChannels] = useState<Channels>();
+    const [search, setSearch] = useState<string>("");
+
+    useEffect(() => {
+        axios
+            .get("/api/channels")
+            .then((res) => {
+                setChannels(res.data)
+            })
+            .catch((err) => {
+                console.error(err.response)
+            })
+    }, [])
+
+    useEffect(() => {
+        const id = setInterval(() => {
+            axios
+                .get("/api/channels").then((res) => {
+                    setChannels(res.data)
+                }
+            )
+        }, 2000)
+
+        return () => { clearInterval(id) }
+    }, [])
+
+    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>
+    )
+}

front/src/pages/Home.tsx

@@ -1,12 +1,14 @@
 import { useState, useEffect } from "react"
 import { Link } from "react-router-dom"
-import { Channels, User, Messages } from "../types"
+import { Channels, RecentChannels, User, Messages } from "../types"
 import axios from "axios"
 
 export default function Home() {
     const [user, setUser] = useState<User>();
-    const [channels, setChannels] = useState<Channels>();
+    const [channels, setChannels] = useState<RecentChannels>();
     const [messages , setMessages] = useState<Messages>();
+    const [searchedChannels, setSearchedChannels] = useState<Channels>([]);
+    const [search, setSearch] = useState<string>("");
 
     useEffect(() => {
         const token = localStorage.getItem("token")
@@ -24,7 +26,7 @@ export default function Home() {
         } 
 
         axios
-            .get("/api/channels")
+            .get("/api/activechannels")
             .then((res) => {
                 setChannels(res.data)
             })
@@ -45,22 +47,37 @@ export default function Home() {
 
     useEffect(() => {
         const id = setInterval(() => {
+            axios
+                .get("/api/activechannels").then((res) => {
+                    setChannels(res.data)
+                }
+            )
+
             axios
                 .get("/api/lastmessages").then((res) => {
                     setMessages(res.data)
                 }
             )
 
-            axios
+        }, 2000)
-                .get("/api/channels").then((res) => {
-                    setChannels(res.data)
-                }
-            )
-        }, 5000)
 
         return () => { clearInterval(id) }
     }, [])
 
+    useEffect(() => {
+        if (!search) {
+            setSearchedChannels([])
+            return
+        }
+        axios
+            .get(`/api/searchchannels?search=${search}`).then((res) => {
+                setSearchedChannels(res.data)
+            }
+            ).catch((err) => {
+                console.error(err.response)
+            })
+    }, [search])
+
     return (
         <div>
             <h1>Home</h1>
@@ -79,7 +96,7 @@ export default function Home() {
                     <Link to="/register">Register</Link>
                 </div>
             )}
-            <h2>Channels</h2>
+            <h2>Recent active channels</h2>
             <ul>
                 {channels?.map((channel) => (
                     <li key={channel.id}>
@@ -87,6 +104,21 @@ export default function Home() {
                     </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) => (

front/src/pages/UserPage.tsx

@@ -24,7 +24,7 @@ export default function UserPage() {
                 .get(`/api/users/${username}/lastmessages`).then((res) => {
                     setMessages(res.data)
                 })
-        }, 5000)
+        }, 2000)
 
         return () => { clearInterval(id) }
     }, [])

front/src/types.tsx

@@ -1,4 +1,4 @@
-export type Channel ={
+export type Channel = {
     id: number,
     name: string
     description: string
@@ -8,6 +8,17 @@ export type Channel ={
 
 export type Channels = Channel[]
 
+export type RecentChannel = {
+    id: number,
+    name: string
+    description: string
+    owner_id: number
+    owner_username: string
+    message_count: number
+}
+
+export type RecentChannels = RecentChannel[]
+
 export type Message = {
     id: number,
     user_id: number,