add: changed homepage to display most active channels

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>
+    )
+}