diff --git a/frontend/src/components/posts/createpost.tsx b/frontend/src/components/posts/createpost.tsx
index fd103c5..fe4e910 100644
--- a/frontend/src/components/posts/createpost.tsx
+++ b/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();
+ }}
/>
{
dispatch(getAllPosts());
}, []);
- useInterval(() => {
- dispatch(getAllPosts());
- }, 1000); // Fetch posts every second
-
return (
<>
{posts.map((post) => (
diff --git a/frontend/src/hooks/useInterval.ts b/frontend/src/hooks/useInterval.ts
deleted file mode 100644
index c0ac3e0..0000000
--- a/frontend/src/hooks/useInterval.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export const useInterval = (callback: () => void, delay: number) => {
- const savedCallback = useRef<() => void>();
-
- useEffect(() => {
- savedCallback.current = callback;
- }, [callback]);
-
- useEffect(() => {
- const tick = () => {
- if (savedCallback.current) {
- savedCallback.current();
- }
- };
- if (delay !== null) {
- const id = setInterval(tick, delay);
- return () => clearInterval(id);
- }
- }, [delay]);
-};
diff --git a/frontend/src/pages/main.tsx b/frontend/src/pages/main.tsx
index 10b7ffa..2d16e17 100644
--- a/frontend/src/pages/main.tsx
+++ b/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 (
- <>
+
- >
+
);
};
diff --git a/frontend/src/statemanagement/posting/postSlice.ts b/frontend/src/statemanagement/posting/postSlice.ts
index c9e91e9..0e7c949 100644
--- a/frontend/src/statemanagement/posting/postSlice.ts
+++ b/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;
diff --git a/frontend/src/websocket/websocketProvider.tsx b/frontend/src/websocket/websocketProvider.tsx
new file mode 100644
index 0000000..88f3d17
--- /dev/null
+++ b/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}>;
+};