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

2
front/src/components/MessageComponent.tsx
View file

@ -19,6 +19,8 @@ export default function MessageComponent({ message, user, channel, deleteMessage
if (mention) {
return <span><Link key={index} to={`/u/${mention.username}`}>{word}</Link> </span>;
}
} else if (word.startsWith("https://") || word.startsWith("http://")) {
return <span><Link to={word}>{word}</Link> </span>
}
return <span key={index}>{word} </span>;
})}

1
front/src/index.css
View file

@ -1,5 +1,6 @@
html {
background: linear-gradient(#FFE0E3, #f59ebb);
min-height: 100vh;
}
.cat {

29
front/src/pages/ChannelPage.tsx
View file

@ -71,15 +71,17 @@ export default function ChannelPage() {
}, [name]);
useEffect(() => {
const id = setInterval(() => {
axios
.get(`/api/channels/${name}/messages`).then((res) => {
setMessages(res.data)
})
}, 2000)
return () => { clearInterval(id) }
}, [])
const socket = new WebSocket(`/api/channels/${name}`);
socket.addEventListener('message', function (event) {
if (event.data === "new_message" || event.data === "delete_message") {
axios
.get(`/api/channels/${name}/messages`).then((res) => {
setMessages(res.data)
})
}
});
}, [name])
useEffect(() => {
const words = message.toString().split(" ");
@ -102,7 +104,14 @@ export default function ChannelPage() {
if (!channel || !messages) {
return <div>Loading...</div>;
return (
<div className="channel-page">
<TopBar user={user} />
<div className="channel">
<p>Loading...</p>
</div>
</div>
)
}
return (

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>

2
front/src/pages/CreateChannel.tsx
View file

@ -31,7 +31,7 @@ export default function CreateChannel() {
axios
.post("/api/channels/add", { name, description, token })
.then(() => {
navigate("/");
navigate(`/c/${name}`);
})
.catch((err) => {
console.error(err.response.data.message);

74
front/src/pages/Home.tsx
View file

@ -12,6 +12,7 @@ export default function Home() {
const [channels, setChannels] = useState<RecentChannels>();
const [messages , setMessages] = useState<Messages>();
const [searchedChannels, setSearchedChannels] = useState<Channels>([]);
const [newChannels, setNewChannels] = useState<Channels>([]);
const [search, setSearch] = useState<string>("");
useEffect(() => {
@ -45,27 +46,60 @@ export default function Home() {
})
.catch((err) => {
console.error(err.response)
}
)
})
axios
.get("/api/newchannels")
.then((res) => {
setNewChannels(res.data)
})
.catch((err) => {
console.error(err.response)
})
}, [])
useEffect(() => {
const id = setInterval(() => {
axios
.get("/api/activechannels").then((res) => {
setChannels(res.data)
}
)
const socket = new WebSocket("/api/channels");
axios
.get("/api/lastmessages").then((res) => {
setMessages(res.data)
}
)
socket.addEventListener('message', function (event) {
if (event.data === "new_message" || event.data === "delete_message") {
axios
.get("/api/lastmessages")
.then((res) => {
setMessages(res.data)
})
.catch((err) => {
console.error(err.response)
})
}, 2000)
axios
.get("/api/activechannels")
.then((res) => {
setChannels(res.data)
})
.catch((err) => {
console.error(err.response)
})
} else if (event.data === "new_channel") {
axios
.get("/api/activechannels")
.then((res) => {
setChannels(res.data)
})
.catch((err) => {
console.error(err.response)
})
return () => { clearInterval(id) }
axios
.get("/api/newchannels")
.then((res) => {
setNewChannels(res.data)
})
.catch((err) => {
console.error(err.response)
})
}
});
}, [])
useEffect(() => {
@ -125,6 +159,16 @@ export default function Home() {
))}
</ul>
</div>
<div className="channels-new">
<h3>Last created channels</h3>
<ul>
{newChannels?.map((channel) => (
<li key={channel.id}>
<Link to={`/c/${channel.name}`}>{channel.name}</Link>
</li>
))}
</ul>
</div>
<div className="channels-search">
<h3>Search channels</h3>
<input

37
front/src/pages/UserPage.tsx
View file

@ -34,17 +34,6 @@ export default function UserPage() {
});
}, [username]);
useEffect(() => {
const id = setInterval(() => {
axios
.get(`/api/users/${username}/lastmessages`).then((res) => {
setMessages(res.data)
})
}, 2000)
return () => { clearInterval(id) }
}, [username])
if (!pageUser) {
return <div>Loading...</div>;
}
@ -55,19 +44,19 @@ export default function UserPage() {
<div className="user">
<h2>{pageUser.username}</h2>
{pageUser.admin ? <p>Admin</p> : <p>User</p>}
<div className="user-messages">
<h2>Last messages</h2>
<div className="messages-list">
{messages?.map((message) => (
<MessageComponent
key={message.id}
message={message}
user={pageUser}
channel={undefined}
deleteMessage={undefined}
/>
))}
</div>
</div>
<div className="user-messages">
<h2>Last messages</h2>
<div className="messages-list">
{messages?.map((message) => (
<MessageComponent
key={message.id}
message={message}
user={pageUser}
channel={undefined}
deleteMessage={undefined}
/>
))}
</div>
</div>
</div>

1
front/src/styles/ChannelPage.css
View file

@ -4,7 +4,6 @@
justify-content: start;
align-items: center;
width: 100%;
min-height: 100vh;
gap: 20px;
}

5
front/src/styles/ChannelsPage.css
View file

@ -4,7 +4,6 @@
justify-content: start;
align-items: center;
width: 100%;
min-height: 100vh;
gap: 20px;
}
@ -13,4 +12,8 @@
border: 1px solid #270722;
padding: 10px;
background-color: #fff6fd;
display: flex;
flex-direction: column;
align-items: start;
gap: 10px;
}

2
front/src/styles/MessageComponent.css
View file

@ -2,4 +2,4 @@
width: 95%;
border: 1px solid #270722;
padding: 10px;
}
}

5
front/src/styles/UserPage.css
View file

@ -4,7 +4,6 @@
justify-content: start;
align-items: center;
width: 100%;
min-height: 100vh;
gap: 20px;
}
@ -18,8 +17,12 @@
}
.user-messages {
width: 97%;
border: 1px solid #270722;
padding: 10px;
display: flex;
flex-direction: column;
background-color: #fff6fd;
}
.messages-list {