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 UI by adding CSS files

Browse source
This commit is contained in:
Lukian 2025-04-06 17:47:51 +02:00
parent 1656e95557
commit 42e6acd9ca
19 changed files with 543 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,12 @@
import { useParams, Link } from "react-router-dom";
import React, { useEffect, useState } from "react";
import { Channel, Messages, User } from "../types";
import TopBar from "../components/TopBar";
import MessageComponent from "../components/MessageComponent";
import axios from "axios";
import "../styles/ChannelPage.css";
export default function ChannelPage() {
const { name } = useParams();
const [channel, setChannel] = useState<Channel>();
@ -102,17 +105,24 @@ export default function ChannelPage() {
}
return (
<div>
<Link to="/">Home</Link>
<h1>Channel {channel.name}</h1>
<p>{channel.description}</p>
<p>Owner: <Link to={`/u/${channel.owner_username}`}>{channel.owner_username}</Link></p>
{channel.name.toLowerCase().includes("cat") && (
<img src="/cat.jpg" alt="cat" className="cat" />
)}
{
token ? (
<form onSubmit={handleSubmit}>
<div className="channel-page">
<TopBar user={user} />
<div className="channel">
<h2>Channel {channel.name}</h2>
<p>{channel.description}</p>
<p>Owner: <Link to={`/u/${channel.owner_username}`}>{channel.owner_username}</Link></p>
{channel.name.toLowerCase().includes("cat") && (
<img src="/cat.jpg" alt="cat" className="cat" />
)}
{token ? (
<form onSubmit={handleSubmit} className="message-form">
<input
type="text"
placeholder="Message"
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button type="submit">Send</button>
{searchedUsers.length > 0 && (
<div>
<p>Mentions:</p>
@ -134,37 +144,28 @@ export default function ChannelPage() {
))}
</div>
)}
<input
type="text"
placeholder="Message"
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button type="submit">Send</button>
</form>
) : (
<div>
<div className="login-prompt">
<Link to="/login">Login</Link>
<Link to="/register">Register</Link>
</div>
)
}
<ul>
{messages.slice(0, maxMessageToShown).map((message) => (
<MessageComponent
key={message.id}
message={message}
user={user}
channel={channel}
deleteMessage={deleteMessage}
/>
))}
</ul>
{
messages.length > maxMessageToShown && (
<button onClick={() => setMaxMessageToShown(maxMessageToShown + 10)}>Show more</button>
)
}
)}
<div className="messages-list">
{messages.slice(0, maxMessageToShown).map((message) => (
<MessageComponent
key={message.id}
message={message}
user={user}
channel={channel}
deleteMessage={deleteMessage}
/>
))}
{messages.length > maxMessageToShown && (
<button onClick={() => setMaxMessageToShown(maxMessageToShown + 10)}>Show more</button>
)}
</div>
</div>
</div>
);
}