add: added user pages, and last messages to the home page

This commit is contained in:
Lukian 2025-03-25 16:47:30 +01:00
parent d7af341ca2
commit 87e7c44a5b
10 changed files with 155 additions and 31 deletions

View file

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