lucien/tanuki-s-forum
1
0
Fork 0
generated from lucien/api-template
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: improved the frontend and the backend by adding websockets

Browse source
This commit is contained in:
Lukian 2025-04-07 22:46:04 +02:00
parent ecf7b61aca
commit fbf7821320
18 changed files with 255 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

36
front/src/pages/ChannelsPage.tsx
View file

@ -34,22 +34,40 @@ export default function ChannelsPage() {
}, [])
useEffect(() => {
const id = setInterval(() => {
axios
.get("/api/channels").then((res) => {
setChannels(res.data)
}
)
}, 2000)
const socket = new WebSocket("/api/channels");
return () => { clearInterval(id) }
socket.addEventListener('message', function (event) {
if (event.data === "new_channel") {
axios
.get("/api/channels")
.then((res) => {
setChannels(res.data)
})
.catch((err) => {
console.error(err.response)
})
}
});
}, [])
if (!channels) {
return (
<div className="channels-page">
<TopBar user={user} />
<div className="channels-page-channels">
<h2>Channels</h2>
<p>Loading...</p>
</div>
</div>
)
}
return (
<div className="channels-page">
<TopBar user={user} />
<div className="channels-page-channels">
<h2>Channels</h2>
<Link to="/create-channel">Create channel</Link>
<input
type="text"
placeholder="Search channels"
@ -57,7 +75,7 @@ export default function ChannelsPage() {
onChange={(e) => setSearch(e.target.value)}
/>
<ul>
{channels?.filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase())).map((channel) => (
{channels?.sort().filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase())).map((channel) => (
<li key={channel.id}>
<Link to={`/c/${channel.name}`}>{channel.name}</Link>
</li>