socket context added

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() {
         </Route>
 
         {/* protected routes */}
-        <Route element={<UserExist />}> 
+        <Route element={<SocketIOContextProvider />}>
-          <Route path={siteLinks.dash} element={<HomePage />} />
+          <Route element={<UserExist />}> 
-          <Route path={siteLinks.product} element={<ProductPage />} />
+            <Route path={siteLinks.dash} element={<HomePage />} />
-          <Route path={siteLinks.reports} element={<ReportsPage />} />
+            <Route path={siteLinks.product} element={<ProductPage />} />
-          <Route path={siteLinks.comments} element={<CommentsPage />} />
+            <Route path={siteLinks.reports} element={<ReportsPage />} />
-          <Route path={siteLinks.contacts} element={<ContactsPage />} />
+            <Route path={siteLinks.comments} element={<CommentsPage />} />
-          <Route path={siteLinks.user} element={<UserPage />} />
+            <Route path={siteLinks.contacts} element={<ContactsPage />} />
-          <Route path={siteLinks.calendar} element={<CalendarPage />} />
+            <Route path={siteLinks.user} element={<UserPage />} />
-          <Route path={siteLinks.settings} element={<SettingsPage />} />
+            <Route path={siteLinks.calendar} element={<CalendarPage />} />
+            <Route path={siteLinks.settings} element={<SettingsPage />} />
+          </Route>
         </Route>
       </Routes>
     </div>

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

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 ? 

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 (
+    <SocketIOContext.Provider value={values}>
+        <Outlet />
+    </SocketIOContext.Provider>
+  )
+}
+
+
+export const SocketContextValues = () => {
+    return useContext(SocketIOContext)
+}

src/component/context/socketEvents.js

@@ -0,0 +1,9 @@
+export const socketEmitEvents = {
+    send_message: 'send_message'
+}
+
+
+
+export const socketOnEvents = {
+    receive_message: 'receive_message'
+}

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 <>
         {/* <div className="row">
             <div className="col-md-12 m-b-30">