Implement WebSocket provider for real-time post updates; add Ctrl+Ent…

frontend/src/components/posts/createpost.tsx

@@ -113,6 +113,9 @@ export const CreatePost = ({
           rows={3}
           value={postText}
           onChange={(e) => setPostText(e.target.value)}
+          onKeyUp={(e) => {
+            e.key === "Enter" && e.ctrlKey && onUpload();
+          }}
         />
         <div
           className={`mt-2 border-2 border-dashed rounded-md p-4 text-center cursor-pointer drop-image ${

frontend/src/components/posts/postlist.tsx

@@ -1,4 +1,3 @@
-import { useInterval } from "@/hooks/useInterval";
 import { getAllPosts } from "@/statemanagement/posting/postSlice";
 import { useAppDispatch, useAppSelector } from "@/statemanagement/store";
 import { EnhancedPost } from "@/types/enhanced_post.type";
@@ -28,10 +27,6 @@ export const PostList = () => {
     dispatch(getAllPosts());
   }, []);
 
-  useInterval(() => {
-    dispatch(getAllPosts());
-  }, 1000); // Fetch posts every second
-
   return (
     <>
       {posts.map((post) => (

frontend/src/pages/main.tsx

@@ -1,15 +1,16 @@
 import { Header } from "@/components/header/header";
 import { SocialNetworkLayout } from "@/components/social-network-layout";
+import { WebsocketProvider } from "@/websocket/websocketProvider";
 
 export const Main = () => {
   return (
-    <>
+    <WebsocketProvider>
       <Header />
       <main className="flex-1">
         <div className="container mx-auto px-4 py-8">
           <SocialNetworkLayout />
         </div>
       </main>
-    </>
+    </WebsocketProvider>
   );
 };

frontend/src/statemanagement/posting/postSlice.ts

@@ -62,10 +62,14 @@ export const addPost = createAsyncThunk(
   }
 );
 
-export const usersSlice = createSlice({
+export const postSlice = createSlice({
   name: "posts",
   initialState,
-  reducers: {},
+  reducers: {
+    addPostSync: (state, action) => {
+      state.posts.unshift(action.payload);
+    },
+  },
   extraReducers: (builder) => {
     builder.addCase(getAllPosts.pending, (state) => {
       state.postsLoading = true;
@@ -84,11 +88,12 @@ export const usersSlice = createSlice({
       state.postSending = false;
       console.log(err);
     });
-    builder.addCase(addPost.fulfilled, (state, action) => {
+    builder.addCase(addPost.fulfilled, (state) => {
       state.postSending = false;
-      state.posts.unshift(action.payload);
     });
   },
 });
 
-export default usersSlice.reducer;
+export const { addPostSync } = postSlice.actions;
+
+export default postSlice.reducer;

frontend/src/websocket/websocketProvider.tsx

@@ -0,0 +1,45 @@
+import { addPostSync } from "@/statemanagement/posting/postSlice";
+import { useAppDispatch, useAppSelector } from "@/statemanagement/store";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+interface WebsocketProviderProps {
+  children: React.ReactNode;
+}
+
+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(() => {
+    ws.onmessage = (event) => {
+      onPost(JSON.parse(event.data));
+    };
+    ws.onopen = () => {
+      ws.send(JSON.stringify({ token: token, data: "" }));
+    };
+    ws.onclose = () => {
+      setTimeout(() => {
+        setNewWebSocket(newWebSocket + 1);
+      }, 500);
+    };
+    ws.onerror = () => {
+      setTimeout(() => {
+        setNewWebSocket(newWebSocket + 1);
+      }, 500);
+    };
+  }, [ws, newWebSocket, onPost]);
+
+  return <>{children}</>;
+};