From 1fee32f1d2d8715271e77883eaeac5caf3867ac7 Mon Sep 17 00:00:00 2001
From: Lukian <lulul7018@gmail.com>
Date: Wed, 9 Apr 2025 11:49:26 +0200
Subject: [PATCH] fix: fixed websockets

---
 front/src/main.tsx               | 13 +++++++++----
 front/src/pages/ChannelPage.tsx  | 15 ++-------------
 front/src/pages/ChannelsPage.tsx | 13 +------------
 front/src/pages/Home.tsx         | 13 +------------
 front/src/pages/UserPage.tsx     | 13 +------------
 5 files changed, 14 insertions(+), 53 deletions(-)

diff --git a/front/src/main.tsx b/front/src/main.tsx
index 44555dd..98e9abd 100644
--- a/front/src/main.tsx
+++ b/front/src/main.tsx
@@ -10,16 +10,21 @@ import Register from './pages/Register'
 import CreateChannel from './pages/CreateChannel'
 import ChannelsPage from './pages/ChannelsPage'
 
+const socket = new WebSocket("/api/ws");
+setInterval(() => {
+  socket.send("ping");
+}, 30 * 1000);
+
 createRoot(document.getElementById('root')!).render(
   <BrowserRouter>
     <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/c/:name" element={<ChannelPage />} />
-      <Route path="/u/:username" element={<UserPage />} />
+      <Route path="/" element={<Home socket={socket} />} />
+      <Route path="/c/:name" element={<ChannelPage socket={socket} />} />
+      <Route path="/u/:username" element={<UserPage socket={socket} />} />
       <Route path="/login" element={<Login />} />
       <Route path="/register" element={<Register />} />
       <Route path="/create-channel" element={<CreateChannel />} />
-      <Route path="/channels" element={<ChannelsPage />} />
+      <Route path="/channels" element={<ChannelsPage socket={socket} />} />
     </Routes>
   </BrowserRouter>
 )
diff --git a/front/src/pages/ChannelPage.tsx b/front/src/pages/ChannelPage.tsx
index cacc14f..26a8d2e 100644
--- a/front/src/pages/ChannelPage.tsx
+++ b/front/src/pages/ChannelPage.tsx
@@ -7,7 +7,7 @@ import axios from "axios";
 
 import "../styles/ChannelPage.css";
 
-export default function ChannelPage() {
+export default function ChannelPage({socket}: {socket: WebSocket}) {
     const { name } = useParams();
     const [channel, setChannel] = useState<Channel>();
     const [messages, setMessages] = useState<Messages>();
@@ -70,13 +70,7 @@ export default function ChannelPage() {
         });
     }, [name]);
 
-    useEffect(() => {
-        const socket = new WebSocket(`/api/ws`);
-
-        const id = setInterval(() => {
-            socket.send(JSON.stringify("ping"));
-        }, 10000);
-          
+    useEffect(() => {          
         socket.addEventListener('message', function (event) {
             const data = JSON.parse(event.data);
             if ((data.type === "new_message" || data.type === "delete_message") && data.channel_id === channel?.id) {
@@ -86,11 +80,6 @@ export default function ChannelPage() {
                     })
             }
         });
-
-        return () => {
-            clearInterval(id);
-            socket.close();
-        }
     }, [channel])
 
     useEffect(() => {
diff --git a/front/src/pages/ChannelsPage.tsx b/front/src/pages/ChannelsPage.tsx
index f4964b3..dc0a6ec 100644
--- a/front/src/pages/ChannelsPage.tsx
+++ b/front/src/pages/ChannelsPage.tsx
@@ -6,7 +6,7 @@ import TopBar from "../components/TopBar"
 
 import "../styles/ChannelsPage.css"
 
-export default function ChannelsPage() {
+export default function ChannelsPage({socket}: {socket: WebSocket}) {
     const [channels, setChannels] = useState<Channels>();
     const [search, setSearch] = useState<string>("");
     const [user, setUser] = useState<User>();
@@ -34,12 +34,6 @@ export default function ChannelsPage() {
     }, [])
 
     useEffect(() => {
-        const socket = new WebSocket("/api/ws");
-
-        const id = setInterval(() => {
-            socket.send(JSON.stringify("ping"));
-        }, 10000);
-
         socket.addEventListener('message', function (event) {
             const data = JSON.parse(event.data);
             if (data.type === "new_channel") {
@@ -53,11 +47,6 @@ export default function ChannelsPage() {
                     })
             }
         });
-
-        return () => {
-            clearInterval(id);
-            socket.close();
-        }
     }, [])
 
     if (!channels) {
diff --git a/front/src/pages/Home.tsx b/front/src/pages/Home.tsx
index e5ee3de..1e21b56 100644
--- a/front/src/pages/Home.tsx
+++ b/front/src/pages/Home.tsx
@@ -7,7 +7,7 @@ import axios from "axios"
 
 import "../styles/Home.css"
 
-export default function Home() {
+export default function Home({socket}: {socket: WebSocket}) {
     const [user, setUser] = useState<User>();
     const [channels, setChannels] = useState<RecentChannels>();
     const [messages , setMessages] = useState<Messages>();
@@ -59,12 +59,6 @@ export default function Home() {
     }, [])
 
     useEffect(() => {
-        const socket = new WebSocket("/api/ws");
-
-        const id = setInterval(() => {
-            socket.send(JSON.stringify("ping"));
-        }, 10000);
-
         socket.addEventListener('message', function (event) 
         {
             const data = JSON.parse(event.data);
@@ -106,11 +100,6 @@ export default function Home() {
                     })
             }
         });
-
-        return () => {
-            clearInterval(id);
-            socket.close();
-        }
     }, [])
 
     useEffect(() => {
diff --git a/front/src/pages/UserPage.tsx b/front/src/pages/UserPage.tsx
index fc974f5..0ac1b01 100644
--- a/front/src/pages/UserPage.tsx
+++ b/front/src/pages/UserPage.tsx
@@ -7,7 +7,7 @@ import axios from "axios";
 
 import "../styles/UserPage.css";
 
-export default function UserPage() {
+export default function UserPage({socket}: {socket: WebSocket}) {
     const { username } = useParams();
     const [pageUser, setPageUser] = useState<User>();
     const [messages, setMessages] = useState<Messages>();
@@ -45,12 +45,6 @@ export default function UserPage() {
     }, [username]);
 
     useEffect(() => {
-        const socket = new WebSocket("/api/ws");
-
-        const id = setInterval(() => {
-            socket.send(JSON.stringify("ping"));
-        }, 10000);
-
         socket.addEventListener('message', function (event) {
             const data = JSON.parse(event.data);
             if ((data.type === "new_message" || data.type === "delete_message") && data.user_id === pageUser?.id) {
@@ -65,11 +59,6 @@ export default function UserPage() {
                     });
             }
         });
-
-        return () => {
-            clearInterval(id);
-            socket.close();
-        };
     }, [pageUser]);
 
     if (!pageUser) {