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

back/api/channels.js

@@ -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' });
     }
 });
 

back/api/users.js

@@ -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' });
     }
 });
 

front/src/components/MessageComponent.tsx

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

front/src/pages/ChannelPage.tsx

@@ -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) => {
+        axios
-            setChannel(res.data);
+            .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) => {
+        axios
-            setMessages(res.data);
+            .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 ? (
-                    {messages.slice(0, maxMessageToShown).map((message) => (
+                    <div className="messages-list">
-                        <MessageComponent
+                        {messages?.length === 0 && <p>No messages yet.</p>}
-                            key={message.id}
+                        {messages.slice(0, maxMessageToShown).map((message) => (
-                            message={message}
+                            <MessageComponent
-                            user={user}
+                                key={message.id}
-                            channel={channel}
+                                message={message}
-                            deleteMessage={deleteMessage}
+                                user={user}
-                        />
+                                channel={channel}
-                    ))}
+                                deleteMessage={deleteMessage}
-                    {messages.length > maxMessageToShown && (
+                            />
-                        <button onClick={() => setMaxMessageToShown(maxMessageToShown + 10)}>Show more</button>
+                        ))}
-                    )}
+                        {messages.length > maxMessageToShown && (
-                </div>
+                            <button onClick={() => setMaxMessageToShown(maxMessageToShown + 10)}>Show more</button>
+                        )}
+                    </div>
+                ) : (
+                    <p>Loading messages...</p>
+                )}
             </div>
         </div>
     );

front/src/pages/UserPage.tsx

@@ -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]);
 
@@ -60,6 +64,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 (
             <div className="user-page">