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}; +};