();
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 (
+
+
+
+
Channel Not Found
+
Sorry, the channel you are looking for does not exist.
+
Go back to the homepage
+
+
+ )
+ }
- if (!channel || !messages) {
+ if (!channel) {
return (
@@ -184,20 +209,25 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
Register
)}
-
- {messages.slice(0, maxMessageToShown).map((message) => (
-
- ))}
- {messages.length > maxMessageToShown && (
-
- )}
-
+ {messages ? (
+
+ {messages?.length === 0 &&
No messages yet.
}
+ {messages.slice(0, maxMessageToShown).map((message) => (
+
+ ))}
+ {messages.length > maxMessageToShown && (
+
+ )}
+
+ ) : (
+ Loading messages...
+ )}
);
diff --git a/front/src/pages/UserPage.tsx b/front/src/pages/UserPage.tsx
index 9720937..a2a777f 100644
--- a/front/src/pages/UserPage.tsx
+++ b/front/src/pages/UserPage.tsx
@@ -12,6 +12,7 @@ export default function UserPage({socket}: {socket: WebSocket}) {
const [pageUser, setPageUser] = useState();
const [messages, setMessages] = useState();
const [user, setUser] = useState();
+ const [noUser, setNoUser] = useState(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 (
+
+
+
+
User Not Found
+
Sorry, the user you are looking for does not exist.
+
Go back to the homepage
+
+
+ )
+ }
if (!pageUser) {
return (