generated from lucien/api-template
add: added user pages, and last messages to the home page
This commit is contained in:
parent
d7af341ca2
commit
87e7c44a5b
10 changed files with 155 additions and 31 deletions
|
@ -1,29 +1,41 @@
|
|||
import { useState, useEffect } from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
import { Channels, User } from "../types"
|
||||
import { Channels, User, Messages } from "../types"
|
||||
import axios from "axios"
|
||||
|
||||
export default function Home() {
|
||||
const [user, setUser] = useState<User>();
|
||||
const [channels, setChannels] = useState<Channels>();
|
||||
const [messages , setMessages] = useState<Messages>();
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("token")
|
||||
if (token) {
|
||||
axios.post("/api/auth/me", {
|
||||
token: token
|
||||
}).then((res) => {
|
||||
setUser(res.data)
|
||||
}).catch((err) => {
|
||||
axios
|
||||
.post("/api/auth/me", {
|
||||
token: token
|
||||
})
|
||||
.then((res) => {
|
||||
setUser(res.data)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
axios
|
||||
.get("/api/channels").then((res) => {
|
||||
setChannels(res.data)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
axios.get("/api/channels").then((res) => {
|
||||
setChannels(res.data)
|
||||
}).catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
|
||||
axios
|
||||
.get("/api/lastmessages").then((res) => {
|
||||
setMessages(res.data)
|
||||
}
|
||||
)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
|
@ -52,6 +64,16 @@ export default function Home() {
|
|||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<h2>Last messages</h2>
|
||||
<ul>
|
||||
{messages?.map((message) => (
|
||||
<li key={message.id}>
|
||||
<p><Link to={`/u/${message.username}`}>{message.username}</Link>: {message.content}</p>
|
||||
<p>In <Link to={`/c/${message.channel_name}`}>{message.channel_name}</Link></p>
|
||||
<p>{new Date(message.date * 1000).toLocaleString()}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<img src="cat.jpg" alt="cat" className="cat"/>
|
||||
</div>
|
||||
)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue