Merge branch 'socket-context' of WrenchBoard/Users-Wrench into master

src/App.jsx

@@ -2,19 +2,22 @@ import { Navigate, useLocation } from "react-router-dom";
 import Routers from "./Routers";
 import Toaster from "./components/Helpers/Toaster";
 import Default from "./components/Partials/Default";
+import SocketIOContextProvider from "./components/Contexts/SocketIOContext";
 
 function App() {
   const { pathname } = useLocation();
   return (
     <Default>
-      <>
-        {pathname.startsWith("/@") ? (
-          <Navigate to="/app" replace={true} />
-        ) : (
-          <Routers />
-        )}
-        <Toaster />
-      </>
+      <SocketIOContextProvider>
+        <>
+          {pathname.startsWith("/@") ? (
+            <Navigate to="/app" replace={true} />
+          ) : (
+            <Routers />
+          )}
+          <Toaster />
+        </>
+      </SocketIOContextProvider>
     </Default>
   );
 }

src/components/Contexts/SocketIOContext.js

@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { tableReload } from "../../store/TableReloads";
+import { useDispatch } from "react-redux";
+
+import io from "socket.io-client";
+
+let SocketIOContext = createContext({})
+
+export default function SocketIOContextProvider({children}) {
+    const dispatch = useDispatch()
+
+    const socket = io.connect(process.env.REACT_APP_PRIMARY_SOCKET); 
+
+    // //Room State
+    // const [room, setRoom] = useState("");
+
+    // // Messages States
+    // const [message, setMessage] = useState("");
+    const [socketMsgReceived, setSocketMsgReceived] = useState("");
+
+    const joinRoom = (room) => {
+        if (room !== "") {
+        socket.emit("join_room", room);
+        }
+    };
+
+    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'}))
+        });
+    }, [socket]);
+
+    let values = {
+        socket,
+        sendMessage,
+        joinRoom,
+        setSocketMsgReceived,
+        socketMsgReceived,
+        // room,
+        // setRoom,
+        // message,
+        // setMessage,
+    }
+
+  return (
+    <SocketIOContext.Provider value={values}>
+        {children}
+    </SocketIOContext.Provider>
+  )
+}
+
+
+export const SocketValues = () => {
+    return useContext(SocketIOContext)
+}

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -11,8 +11,11 @@ import IndexJobActions from "./JobActions/IndexJobActions";
 
 import usersService from "../../services/UsersService";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
+import { SocketValues } from "../Contexts/SocketIOContext";
 
 function ActiveJobs(props) {
+  let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
+  
   const ApiCall = new usersService();
   const navigate = useNavigate();
 
@@ -139,6 +142,9 @@ function ActiveJobs(props) {
           status: true,
           message: "Message Sent Successfully",
         });
+        // function to trigger socket to emit 'send_message'
+        sendMessage(messageToSend, `${props.details.contract}-${props.details.contract_uid}`)
+        
         props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
         setMessageToSend(""); // SENDS MESSAGE TO SEND BACK TO EMPTY STRINGS
       })
@@ -255,6 +261,12 @@ function ActiveJobs(props) {
     props.details?.currency
   );
 
+
+  useEffect(()=>{
+    // calls function to add user to a room
+    joinRoom(`${props.details.contract}-${props.details.contract_uid}`)
+  },[props.details.contract, props.details.contract_uid])
+
   return (
     <Layout>
       <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">

src/middleware/AuthRoute.jsx

@@ -229,7 +229,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       apiCall
         .getHeroJBanners()
         .then((res) => {
-          if (res.data.internal_return < 0) {
+          if (res.data?.internal_return < 0) {
             return;
           }
           dispatch(commonHeadBanner(res.data));

src/store/TableReloads.js

@@ -9,6 +9,7 @@ const initialState = {
   walletTable: false,
   uploadsTable: false,
   familyBannersListTable: false,
+  chatMessageList: false,
 };
 
 export const tableReloadSlice = createSlice({
@@ -41,6 +42,9 @@ export const tableReloadSlice = createSlice({
         case "FAMILYBANNERSLIST":
           state.familyBannersListTable = !state.familyBannersListTable;
           return;
+        case "CHATMESSAGELIST":
+          state.chatMessageList = !state.chatMessageList;
+          return;
         default:
           return state;
       }

src/views/ManageActiveJobs.jsx

@@ -2,12 +2,17 @@ import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import ActiveJobs from "../components/MyActiveJobs/ActiveJobs";
 import usersService from "../services/UsersService";
+import { useSelector } from "react-redux";
 
 /**
  * This code defines a React functional component called `ManageActiveJobs`.
  * It fetches a list of active job messages and renders the `ActiveJobs` component with the necessary props.
  */
 function ManageActiveJobs() {
+  const { chatMessageList } = useSelector(
+    (state) => state.tableReload
+  );
+
   const ApiCall = new usersService();
 
   const navigate = useNavigate();
@@ -54,7 +59,7 @@ function ManageActiveJobs() {
     }
     setDetails(state);
     getActiveJobMesList();
-  }, [activeJobMesListReload]);
+  }, [activeJobMesListReload, chatMessageList]);
 
   return (
     <ActiveJobs