Working chatrooms !

Refactor websocket integration: replace WebsocketProvider with useChatWebsocket and usePostWebsocket hooks, update chatSlice to handle chat room messages, and enhance websocket initialization logic

Author: L4B0MB4

frontend/src/pages/main.tsx

@@ -4,21 +4,24 @@ import { getAllChats } from "@/statemanagement/chats/chatSlice";
 import { getAllPosts } from "@/statemanagement/posting/postSlice";
 import { useAppDispatch } from "@/statemanagement/store";
 import { getAllUsers, getOwnUser } from "@/statemanagement/users/usersSlice";
-import { WebsocketProvider } from "@/websocket/websocketProvider";
+import { useChatWebsocket } from "@/websocket/chatWebsocket";
+import { usePostWebsocket } from "@/websocket/postWebsocket";
 import { useEffect } from "react";
 import { Route, Routes } from "react-router-dom";
 import { ChatsPage } from "./subpages/Chats";
 
 export const Main = () => {
   const dispatch = useAppDispatch();
+  usePostWebsocket();
+  useChatWebsocket();
   useEffect(() => {
     dispatch(getAllPosts());
     dispatch(getAllChats());
     dispatch(getOwnUser());
     dispatch(getAllUsers());
   }, []);
   return (
-    <WebsocketProvider>
+    <>
       <Header />
       <main className="flex-1 flex">
         <div className="container mx-auto shadow-lg rounded-lg p-6 flex flex-col">
@@ -28,6 +31,6 @@ export const Main = () => {
           </Routes>
         </div>
       </main>
-    </WebsocketProvider>
+    </>
   );
 };

frontend/src/statemanagement/chats/chatSlice.ts

@@ -101,12 +101,20 @@ export const chatSlice = createSlice({
   name: "chats",
   initialState,
   reducers: {
-    addChatSync: (state, action) => {
-      state.chats.unshift(action.payload);
-    },
     setActiveChatId: (state, action: { payload: string }) => {
       state.activeChatId = action.payload;
     },
+    updateChatRoomMessagesSync: (state, action: { payload: ChatRoom }) => {
+      const chatRoom = state.chats.find((x) => x.id == action.payload.id);
+      if (chatRoom != null) {
+        chatRoom.messages = unique(
+          [...(chatRoom.messages ?? []), ...(action.payload.messages ?? [])],
+          (x) => x.id
+        );
+      } else {
+        state.chats.push(action.payload);
+      }
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(getAllChats.pending, (state) => {
@@ -155,6 +163,7 @@ export const chatSlice = createSlice({
   },
 });
 
-export const { addChatSync, setActiveChatId } = chatSlice.actions;
+export const { updateChatRoomMessagesSync, setActiveChatId } =
+  chatSlice.actions;
 
 export default chatSlice.reducer;

frontend/src/websocket/chatWebsocket.tsx

@@ -0,0 +1,17 @@
+import { updateChatRoomMessagesSync } from "@/statemanagement/chats/chatSlice";
+import { useAppDispatch } from "@/statemanagement/store";
+import { ChatRoom } from "@/types/chatroom.type";
+import { useCallback } from "react";
+import { useWebsocket } from "./websocketProvider";
+
+export const useChatWebsocket = () => {
+  const dispatch = useAppDispatch();
+  const onChat = useCallback(
+    (data: unknown) => {
+      dispatch(updateChatRoomMessagesSync(data as ChatRoom));
+    },
+    [dispatch]
+  );
+  const url = `ws://${window.envUrl}/api/v1/chats/query/ws`;
+  useWebsocket(url, [{ eventName: "default", onEvent: onChat }]);
+};

frontend/src/websocket/postWebsocket.tsx

@@ -0,0 +1,17 @@
+import { addPostSync } from "@/statemanagement/posting/postSlice";
+import { useAppDispatch } from "@/statemanagement/store";
+import { useCallback } from "react";
+import { useWebsocket } from "./websocketProvider";
+
+export const usePostWebsocket = () => {
+  const dispatch = useAppDispatch();
+  const onPost = useCallback(
+    (data: any) => {
+      console.log(data);
+      dispatch(addPostSync(data));
+    },
+    [dispatch]
+  );
+  const url = `ws://${window.envUrl}/api/v1/posting/query/ws`;
+  useWebsocket(url, [{ eventName: "default", onEvent: onPost }]);
+};

frontend/src/websocket/websocketProvider.tsx

@@ -1,45 +1,50 @@
-import { addPostSync } from "@/statemanagement/posting/postSlice";
-import { useAppDispatch, useAppSelector } from "@/statemanagement/store";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useAppSelector } from "@/statemanagement/store";
+import { useEffect } from "react";
 
-interface WebsocketProviderProps {
-  children: React.ReactNode;
-}
+export const useWebsocket = (
+  url: string,
+  listenToEvents: { eventName: string; onEvent: (data: unknown) => void }[]
+) => {
+  const token = useAppSelector((state) => state.authentication.token) || "";
 
-export const WebsocketProvider = ({ children }: WebsocketProviderProps) => {
-  const url = `ws://${window.envUrl}/api/v1/posting/query/ws`;
-  const token = useAppSelector((state) => state.authentication.token);
-  const dispatch = useAppDispatch();
-  const [newWebSocket, setNewWebSocket] = useState(0);
-  const ws = useMemo(() => {
-    return new WebSocket(url);
-  }, [newWebSocket]);
-
-  const onPost = useCallback(
-    (data: any) => {
-      console.log(data);
-      dispatch(addPostSync(data));
-    },
-    [ws, dispatch]
-  );
   useEffect(() => {
+    websocketInitializer(url, token, listenToEvents);
+  }, [url, token]);
+};
+
+const websocketInitializer = (
+  url: string,
+  token: string,
+  listenToEvents: { eventName: string; onEvent: (data: unknown) => void }[]
+) => {
+  const initWebsocket = () => {
+    const ws = new WebSocket(url);
+    let isReconnecting = false;
     ws.onmessage = (event) => {
-      onPost(JSON.parse(event.data));
+      listenToEvents.forEach((listenDef) => {
+        if (listenDef.eventName === "default") {
+          //todo add event name to the event
+          listenDef.onEvent(JSON.parse(event.data));
+        }
+      });
     };
     ws.onopen = () => {
       ws.send(JSON.stringify({ token: token, data: "" }));
     };
+    const reconnect = () => {
+      if (!isReconnecting) {
+        isReconnecting = true;
+        setTimeout(() => {
+          initWebsocket();
+        }, 500);
+      }
+    };
     ws.onclose = () => {
-      setTimeout(() => {
-        setNewWebSocket(newWebSocket + 1);
-      }, 500);
+      reconnect();
     };
     ws.onerror = () => {
-      setTimeout(() => {
-        setNewWebSocket(newWebSocket + 1);
-      }, 500);
+      reconnect();
     };
-  }, [ws, newWebSocket, onPost]);
-
-  return <>{children}</>;
+  };
+  initWebsocket();
 };