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

2
back/api/channels.js
View file

@ -35,7 +35,7 @@ router.get('/:name', async (req, res) => {
if (channel[0]) {
res.send(channel[0]);
} else {
res.send('No channel found');
res.status(400).send({ error: 'No channel found' });
}
});

2
back/api/users.js
View file

@ -21,7 +21,7 @@ router.get('/:username', async (req, res) => {
if (user[0]) {
res.send({id: user[0].id, username: user[0].username, admin: user[0].admin});
} else {
res.send('No user found');
return res.status(400).send({ error: 'No user found' });
}
});

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

@ -21,10 +21,10 @@ export default function MessageComponent({ message, user, channel, deleteMessage
if (word.startsWith("@")) {
const mention = message.mentions.find((mention) => `@${mention.username}` === word);
if (mention) {
return <span><Link key={index} to={`/u/${mention.username}`}>{word}</Link> </span>;
return <span key={index} ><Link 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} ><Link to={word}>{word}</Link> </span>
}
return <span key={index}>{word} </span>;
})}

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

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

@ -12,6 +12,7 @@ export default function UserPage({socket}: {socket: WebSocket}) {
const [pageUser, setPageUser] = useState<User>();
const [messages, setMessages] = useState<Messages>();
const [user, setUser] = useState<User>();
const [noUser, setNoUser] = useState<boolean>(false);
useEffect(() => {
const localToken = localStorage.getItem("token");
@ -31,7 +32,10 @@ export default function UserPage({socket}: {socket: WebSocket}) {
setPageUser(res.data);
})
.catch((err) => {
console.error(err.response);
if (err.response.data.error === "No user found") {
setNoUser(true);
}
console.error(err.response.data);
});
axios
@ -40,7 +44,7 @@ export default function UserPage({socket}: {socket: WebSocket}) {
setMessages(res.data);
})
.catch((err) => {
console.error(err.response);
console.error(err.response.data);
});
}, [username]);
@ -59,6 +63,19 @@ export default function UserPage({socket}: {socket: WebSocket}) {
}
});
}, [pageUser]);
if (noUser) {
return (
<div className="user-page">
<TopBar user={user} />
<div className="user">
<h2>User Not Found</h2>
<p>Sorry, the user you are looking for does not exist.</p>
<Link to="/">Go back to the homepage</Link>
</div>
</div>
)
}
if (!pageUser) {
return (