lucien/tanuki-s-forum
1
0
Fork 0
generated from lucien/api-template
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: display error message when user or channel does not exists

Browse source
This commit is contained in:
Lukian LEIZOUR 2025-04-18 18:39:56 +02:00
parent 17c6ab79ca
commit 2b2a38682a
5 changed files with 80 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,7 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
const [message, setMessage] = useState<string>("");
const [maxMessageToShown, setMaxMessageToShown] = useState<number>(10);
const [searchedUsers, setSearchedUsers] = useState<User[]>([]);
const [noChannel, setNoChannel] = useState<boolean>(false);
const ref = React.createRef<HTMLInputElement>();
function handleSubmit(e: React.FormEvent) {
@ -64,18 +65,32 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
const localToken = localStorage.getItem("token");
if (localToken) {
setToken(localToken);
axios.post("/api/auth/me", { token: localToken }).then((res) => {
axios
.post("/api/auth/me", { token: localToken }).then((res) => {
setUser(res.data);
}
);
})
.catch((err) => {
console.error(err.response.data);
});
}
axios.get(`/api/channels/${name}`).then((res) => {
setChannel(res.data);
});
axios
.get(`/api/channels/${name}`).then((res) => {
setChannel(res.data);
})
.catch((err) => {
if (err.response.data.error === 'No channel found') {
setNoChannel(true);
}
console.error(err.response.data);
});
axios.get(`/api/channels/${name}/messages`).then((res) => {
setMessages(res.data);
});
axios
.get(`/api/channels/${name}/messages`).then((res) => {
setMessages(res.data);
})
.catch((err) => {
console.error(err.response.data);
});
}, [name]);
useEffect(() => {
@ -93,8 +108,6 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
});
}, [channel])
console.log(channel)
useEffect(() => {
const words = message.toString().split(" ");
const lastWord = words[words.length - 1];
@ -107,15 +120,27 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
setSearchedUsers(res.data);
})
.catch((err) => {
console.error(err.response);
console.error(err.response.data);
});
} else {
setSearchedUsers([]);
}
}, [message]);
if (noChannel) {
return (
<div className="channel-page">
<TopBar user={user} />
<div className="channel">
<h2>Channel Not Found</h2>
<p>Sorry, the channel you are looking for does not exist.</p>
<Link to="/">Go back to the homepage</Link>
</div>
</div>
)
}
if (!channel || !messages) {
if (!channel) {
return (
<div className="channel-page">
<TopBar user={user} />
@ -184,20 +209,25 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
<Link to="/register">Register</Link>
</div>
)}
<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>
{messages ? (
<div className="messages-list">
{messages?.length === 0 && <p>No messages yet.</p>}
{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>
) : (
<p>Loading messages...</p>
)}
</div>
</div>
);