From d28e14e2623555dad33d31b38f91aeeda2523d52 Mon Sep 17 00:00:00 2001
From: Lukian LEIZOUR <lulul7018@gmail.com>
Date: Fri, 18 Apr 2025 18:15:36 +0200
Subject: [PATCH] add: added 404 page and fixed home loading display

---
 front/src/main.tsx              |  2 ++
 front/src/pages/404.tsx         | 38 +++++++++++++++++++++++++++++++++
 front/src/pages/ChannelPage.tsx |  2 ++
 front/src/styles/404.css        | 15 +++++++++++++
 front/src/styles/Home.css       |  2 +-
 5 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 front/src/pages/404.tsx
 create mode 100644 front/src/styles/404.css

diff --git a/front/src/main.tsx b/front/src/main.tsx
index fa3ccba..35fb5bd 100644
--- a/front/src/main.tsx
+++ b/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>
 )
diff --git a/front/src/pages/404.tsx b/front/src/pages/404.tsx
new file mode 100644
index 0000000..7127469
--- /dev/null
+++ b/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>
+    );
+}
\ No newline at end of file
diff --git a/front/src/pages/ChannelPage.tsx b/front/src/pages/ChannelPage.tsx
index 5b470bc..5945b53 100644
--- a/front/src/pages/ChannelPage.tsx
+++ b/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];
diff --git a/front/src/styles/404.css b/front/src/styles/404.css
new file mode 100644
index 0000000..3b72bbd
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/front/src/styles/Home.css b/front/src/styles/Home.css
index e6bd200..15ea1a6 100644
--- a/front/src/styles/Home.css
+++ b/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;