From a62aea19d8e43cc557a9769c73c1cf179f4387e9 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Wed, 18 Dec 2024 21:17:03 +0100 Subject: [PATCH] socket context added --- src/AppRouters.jsx | 21 ++++--- src/component/auth/Login2.jsx | 3 +- src/component/authorization/UserExist.jsx | 9 +++ src/component/context/SocketIOContext.jsx | 71 +++++++++++++++++++++++ src/component/context/socketEvents.js | 9 +++ src/component/home/HomeSections.jsx | 9 ++- 6 files changed, 111 insertions(+), 11 deletions(-) create mode 100644 src/component/context/SocketIOContext.jsx create mode 100644 src/component/context/socketEvents.js diff --git a/src/AppRouters.jsx b/src/AppRouters.jsx index 4d84db3..8b51e72 100644 --- a/src/AppRouters.jsx +++ b/src/AppRouters.jsx @@ -15,6 +15,7 @@ import UserPage from './views/UserPage' import CalendarPage from './views/CalendarPage' import SettingsPage from './views/SettingsPage' import ProductPage from './views/ProductPage' +import SocketIOContextProvider from './component/context/SocketIOContext'; function AppRouters() { return ( @@ -30,15 +31,17 @@ function AppRouters() { {/* protected routes */} - }> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + }> + }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + diff --git a/src/component/auth/Login2.jsx b/src/component/auth/Login2.jsx index 57a34a9..949229f 100644 --- a/src/component/auth/Login2.jsx +++ b/src/component/auth/Login2.jsx @@ -43,9 +43,10 @@ export default function Login() { console.log(error) }, onSuccess: (res) => { - const {token} = res?.data?.data + const {token, room} = res?.data?.data if(token){ localStorage.setItem('token', token) + localStorage.setItem('room', room) // const data = {token} // dispatch(updateUserDetails({ ...data })); navigate('/dash') // later add redux to dispatch state diff --git a/src/component/authorization/UserExist.jsx b/src/component/authorization/UserExist.jsx index 52157bf..8354061 100644 --- a/src/component/authorization/UserExist.jsx +++ b/src/component/authorization/UserExist.jsx @@ -8,10 +8,13 @@ import siteLinks from '../../links/siteLinks' import debounceFunction from '../../utils/debounceFunction' import { accountDashboard } from '../../services/services'; +import { SocketContextValues } from '../context/SocketIOContext'; export default function UserExist() { + const {joinRoom} = SocketContextValues() // Destructures values from socket context + const navigate = useNavigate() const [loading, setLoading] = useState(true) @@ -89,6 +92,12 @@ export default function UserExist() { // return () => clearTimeout(timer) // },[]) + useEffect(()=>{ + if(localStorage.getItem('room')){ + joinRoom(localStorage.getItem('room')) + } + },[]) + return ( <> {loading ? diff --git a/src/component/context/SocketIOContext.jsx b/src/component/context/SocketIOContext.jsx new file mode 100644 index 0000000..eecddd8 --- /dev/null +++ b/src/component/context/SocketIOContext.jsx @@ -0,0 +1,71 @@ +import React, { createContext, useContext, useEffect, useState } from "react"; +import { Outlet } from "react-router-dom"; +import { io } from "socket.io-client"; +// import io from "socket.io-client"; + +// import { tableReload } from "../../store/TableReloads"; +// import { useDispatch, useSelector } from "react-redux"; + + +let SocketIOContext = createContext({}) + +export default function SocketIOContextProvider({children}) { + // const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER UID, to determine if user is active + + // const dispatch = useDispatch() + + const socket = io.connect(process.env.REACT_APP_SOCKET_URL); + + // // Messages States + // const [message, setMessage] = useState(""); + const [socketMsgReceived, setSocketMsgReceived] = useState(""); + + const joinRoom = (room) => { + if (room !== "") { + return socket.emit("join_room", room); + } + return + }; + + const sendMessage = (message, room) => { + if(message && room){ + socket.emit("send_message", { message, room }); + } + }; + + useEffect(() => { + socket.on("receive_message", (data) => { + // setSocketMsgReceived(data.message); + // dispatch(tableReload({type:'CHATMESSAGELIST'})) // dispatches to update chat message sending from owner to worker and vice versa + console.log('DATA', data) + }); + + // client-side + socket.on("connect", () => { + console.log(socket.id); + }); + + socket.on("disconnect", () => { + console.log(socket.id); + }); + }, [socket]); + + let values = { + socket, + sendMessage, + socketMsgReceived, + setSocketMsgReceived, + joinRoom, + } + + return ( + + + + ) +} + + +export const SocketContextValues = () => { + return useContext(SocketIOContext) +} diff --git a/src/component/context/socketEvents.js b/src/component/context/socketEvents.js new file mode 100644 index 0000000..d3b198c --- /dev/null +++ b/src/component/context/socketEvents.js @@ -0,0 +1,9 @@ +export const socketEmitEvents = { + send_message: 'send_message' +} + + + +export const socketOnEvents = { + receive_message: 'receive_message' +} \ No newline at end of file diff --git a/src/component/home/HomeSections.jsx b/src/component/home/HomeSections.jsx index 411288b..c525ec9 100644 --- a/src/component/home/HomeSections.jsx +++ b/src/component/home/HomeSections.jsx @@ -1,12 +1,19 @@ -import React from "react"; +import React, { useEffect } from "react"; import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS"; import RecentActions from "./RecentActions"; import Products from "./Products"; import TopBar from "./TopBar"; import ProductsURL from "./ProductsURL"; +import { SocketContextValues } from "../context/SocketIOContext"; export default function HomeSections(){ + const {sendMessage} = SocketContextValues() // Destructures values from socket context + + // useEffect(()=>{ + // sendMessage('Hello socket', '2020aklksod') + // },[]) + return <> {/*