generated from lucien/api-template
add: changed homepage to display most active channels
This commit is contained in:
parent
411aa149ac
commit
dfb6639ecf
10 changed files with 179 additions and 14 deletions
|
@ -70,7 +70,7 @@ export default function ChannelPage() {
|
|||
.get(`/api/channels/${name}/messages`).then((res) => {
|
||||
setMessages(res.data)
|
||||
})
|
||||
}, 5000)
|
||||
}, 2000)
|
||||
|
||||
return () => { clearInterval(id) }
|
||||
}, [])
|
||||
|
|
52
front/src/pages/ChannelsPage.tsx
Normal file
52
front/src/pages/ChannelsPage.tsx
Normal 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>
|
||||
)
|
||||
}
|
|
@ -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) => (
|
||||
|
|
|
@ -24,7 +24,7 @@ export default function UserPage() {
|
|||
.get(`/api/users/${username}/lastmessages`).then((res) => {
|
||||
setMessages(res.data)
|
||||
})
|
||||
}, 5000)
|
||||
}, 2000)
|
||||
|
||||
return () => { clearInterval(id) }
|
||||
}, [])
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue