add: changed homepage to display most active channels

This commit is contained in:
Lukian 2025-04-04 21:31:29 +02:00
parent 411aa149ac
commit dfb6639ecf
10 changed files with 179 additions and 14 deletions

View file

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

View file

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

View file

@ -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
.get("/api/channels").then((res) => {
setChannels(res.data)
}
)
}, 5000)
}, 2000)
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) => (

View file

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