add: added 404 page and fixed home loading display

front/src/main.tsx

@@ -11,6 +11,7 @@ import CreateChannel from './pages/CreateChannel'
 import ChannelsPage from './pages/ChannelsPage'
 import UsersPage from './pages/UsersPage'
 import EditProfile from './pages/EditProfile'
+import NotFoundPage from './pages/404'
 
 const socket = new WebSocket("/api/ws");
 
@@ -35,6 +36,7 @@ createRoot(document.getElementById('root')!).render(
       <Route path="/channels" element={<ChannelsPage socket={socket} />} />
       <Route path="/users" element={<UsersPage socket={socket} />} />
       <Route path="/edit-profile" element={<EditProfile />} />
+      <Route path="*" element={<NotFoundPage />} />
     </Routes>
   </BrowserRouter>
 )

front/src/pages/404.tsx

@@ -0,0 +1,38 @@
+import TopBar from "../components/TopBar";
+import { Link } from "react-router-dom";
+import { User } from "../types";
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+import "../styles/404.css";
+
+export default function NotFoundPage() {
+    const [user, setUser] = useState<User | undefined>(undefined);
+
+    useEffect(() => {
+        const token = localStorage.getItem("token");
+        if (token) {
+            axios
+                .post("/api/auth/me", {
+                    token
+                })
+                .then((res) => {
+                    setUser(res.data);
+                })
+                .catch((err) => {
+                    console.error(err.response);
+                });
+        }
+    }, []);
+
+    return (
+        <div className="not-found-page">
+            <TopBar user={user} />
+            <div className="not-found-content">
+                <h2>404 - Page Not Found</h2>
+                <p>Sorry, the page you are looking for does not exist.</p>
+                <Link to="/">Go back to the homepage</Link>
+            </div>
+        </div>
+    );
+}

front/src/pages/ChannelPage.tsx

@@ -93,6 +93,8 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
         });
     }, [channel])
 
+    console.log(channel)
+
     useEffect(() => {
         const words = message.toString().split(" ");
         const lastWord = words[words.length - 1];

front/src/styles/404.css

@@ -0,0 +1,15 @@
+.not-found-page {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+    width: 100%;
+    gap: 20px;
+}
+
+.not-found-content {
+    width: 97%;
+    border: 1px solid #270722;
+    padding: 10px;
+    background-color: #fff6fd;
+}

front/src/styles/Home.css

@@ -1,7 +1,7 @@
 .home {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: start;
     align-items: center;
     width: 100%;
     min-height: 100vh;