diff --git a/src/App.jsx b/src/App.jsx index bb13bbc..c4a2ad2 100644 --- a/src/App.jsx +++ b/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 ( - <> - {pathname.startsWith("/@") ? ( - - ) : ( - - )} - - + + <> + {pathname.startsWith("/@") ? ( + + ) : ( + + )} + + + ); } diff --git a/src/components/Breadcrumb/CustomBreadcrumb.jsx b/src/components/Breadcrumb/CustomBreadcrumb.jsx index 9a8be78..1d2027b 100644 --- a/src/components/Breadcrumb/CustomBreadcrumb.jsx +++ b/src/components/Breadcrumb/CustomBreadcrumb.jsx @@ -1,22 +1,25 @@ -import React from 'react' -import { Link } from 'react-router-dom' +import React from "react"; +import { Link } from "react-router-dom"; -export default function CustomBreadcrumb({title, breadcrumb}) { +export default function CustomBreadcrumb({ title, breadcrumb }) { return (
-

{title}

- +

+ {title} +

+
- ) + ); } diff --git a/src/components/Contexts/SocketIOContext.js b/src/components/Contexts/SocketIOContext.js new file mode 100644 index 0000000..f645e73 --- /dev/null +++ b/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 ( + + {children} + + ) +} + + +export const SocketValues = () => { + return useContext(SocketIOContext) +} diff --git a/src/components/FamilyAcc/FamilyActivities.jsx b/src/components/FamilyAcc/FamilyActivities.jsx index 57e077c..ac353aa 100644 --- a/src/components/FamilyAcc/FamilyActivities.jsx +++ b/src/components/FamilyAcc/FamilyActivities.jsx @@ -1,12 +1,11 @@ -import React, { Suspense, useMemo, useState } from "react"; +import React, { Suspense } from "react"; import { Link } from "react-router-dom"; -import usersService from "../../services/UsersService"; +import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb"; import Layout from "../Partials/Layout"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import FamilyTableNew from "./FamilyTableNew"; export default function FamilyActivities() { - return ( {/**/} @@ -15,9 +14,21 @@ export default function FamilyActivities() { {/* heading */}
-

- Tasks & Chores -

+

- Assign task to{" "} - {pathname === "/acc-family/activities" ? ( -
- -
- ) : ( - <>{familyDetailsData?.firstname || details?.firstName} - )} + <> + Assign task to{" "} + {pathname === "/acc-family/activities" ? ( +
+ +
+ ) : ( + <>{familyDetailsData?.firstname || details?.firstName} + )} +

diff --git a/src/components/MyActiveJobs/ActiveJobs.jsx b/src/components/MyActiveJobs/ActiveJobs.jsx index aeed9a9..c5e2498 100644 --- a/src/components/MyActiveJobs/ActiveJobs.jsx +++ b/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 (
diff --git a/src/middleware/AuthRoute.jsx b/src/middleware/AuthRoute.jsx index 7a51257..72eb1a3 100644 --- a/src/middleware/AuthRoute.jsx +++ b/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)); diff --git a/src/store/TableReloads.js b/src/store/TableReloads.js index d284f64..2dc2a87 100644 --- a/src/store/TableReloads.js +++ b/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; } diff --git a/src/views/ManageActiveJobs.jsx b/src/views/ManageActiveJobs.jsx index 1d38f57..db1dfaf 100644 --- a/src/views/ManageActiveJobs.jsx +++ b/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 (