From 76c0994eb04a341086c86885a6fdd9ce38d834f7 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Thu, 21 Mar 2024 22:00:31 +0100 Subject: [PATCH 1/2] initial commit --- src/components/Contexts/SocketIOContext.js | 16 +++++++++++++++ .../MarketPlace/PopUp/MarketPopUp.jsx | 20 +++++++++++++++++-- src/store/TableReloads.js | 4 ++++ src/views/OffersInterestPage.jsx | 13 ++++++++++++ 4 files changed, 51 insertions(+), 2 deletions(-) diff --git a/src/components/Contexts/SocketIOContext.js b/src/components/Contexts/SocketIOContext.js index 0ecc8b5..436fe24 100644 --- a/src/components/Contexts/SocketIOContext.js +++ b/src/components/Contexts/SocketIOContext.js @@ -44,6 +44,12 @@ export default function SocketIOContextProvider({children}) { } }; + const sendJobInterestToOwner = (message, room) => { + if(message && room){ + socket.emit("marketjob", { message:{...message}, room }); + } + }; + useEffect(() => { socket.on("receive_message", (data) => { // setSocketMsgReceived(data.message); @@ -70,6 +76,15 @@ export default function SocketIOContextProvider({children}) { } // console.log('DATA', data) }); + + socket.on("marketjob_actions", (data) => { // Triggers refresh on owner side, when somebody sends/shows interest in a job + // let user_uid = userDetails.account_type == 'FULL' ? userDetails.uid : sessionStorage.getItem('family_uid') // gets user UID + let {message} = data + if(message.action == "REFRESH_OFFERS" && message.audience == "MERCHANT"){ // for refreshing job owner offer interest list when any worker sends interest + dispatch(tableReload({type:'OFFERINTERESTLISTRELOAD'})) + } + }); + }, [socket]); let values = { @@ -79,6 +94,7 @@ export default function SocketIOContextProvider({children}) { setSocketMsgReceived, marketUpdate, parentAssignJobToKid, + sendJobInterestToOwner, socketMsgReceived, // room, // setRoom, diff --git a/src/components/MarketPlace/PopUp/MarketPopUp.jsx b/src/components/MarketPlace/PopUp/MarketPopUp.jsx index f364281..c9158e4 100644 --- a/src/components/MarketPlace/PopUp/MarketPopUp.jsx +++ b/src/components/MarketPlace/PopUp/MarketPopUp.jsx @@ -1,11 +1,26 @@ -import { useMemo, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { toast } from "react-toastify"; import usersService from "../../../services/UsersService"; import ModalCom from "../../Helpers/ModalCom"; import { PriceFormatter } from "../../Helpers/PriceFormatter"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; +import { SocketValues } from "../../Contexts/SocketIOContext"; const MarketPopUp = ({ details, onClose, situation, marketInt }) => { + + let {sendJobInterestToOwner} = SocketValues() // function to emit job interest request + const emitOfferInterest = () => { + let message = { + "audience": "MERCHANT", + "action": "REFRESH_OFFERS", + "offer_code": details?.offer_code, + "offer_uid": details?.offer_uid, + "job_uid": details?.job_uid, + } + let room = `INTEREST-${details?.market_uid}` + sendJobInterestToOwner(message, room) + } + const [textValue, setTextValue] = useState(""); const [errMsg, setErrMsg] = useState({ market: false, @@ -88,7 +103,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => { state: true, }); } - + emitOfferInterest() // FUNCTIONS TO EMIT EVENT INDICATING SOMEONE SENDS AN INTEREST IN YOUR JOB setTimeout(() => setManageInt({ msg: "" }), 3000); } catch (error) { throw new Error(error); @@ -296,6 +311,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => { ); }; + export default MarketPopUp; const CloseIcon = ({ onClose }) => ( diff --git a/src/store/TableReloads.js b/src/store/TableReloads.js index e2f9b7c..34fad9f 100644 --- a/src/store/TableReloads.js +++ b/src/store/TableReloads.js @@ -13,6 +13,7 @@ const initialState = { marketTableList: false, familyOfferList: false, parentFamilyTaskList: false, + offerInterestListReload: false, }; export const tableReloadSlice = createSlice({ @@ -57,6 +58,9 @@ export const tableReloadSlice = createSlice({ case "PARENTFAMILYTASKLIST": // reloads list of active family task on parent side state.parentFamilyTaskList = !state.parentFamilyTaskList; return; + case "OFFERINTERESTLISTRELOAD": // to reload offer interest list of owner when a worker sends interest in a job + state.offerInterestListReload = !state.offerInterestListReload; + return; default: return state; } diff --git a/src/views/OffersInterestPage.jsx b/src/views/OffersInterestPage.jsx index bc70271..f3ecdcd 100644 --- a/src/views/OffersInterestPage.jsx +++ b/src/views/OffersInterestPage.jsx @@ -5,7 +5,16 @@ import OffersInterest from "../components/OffersInterest"; import usersService from "../services/UsersService"; +import { SocketValues } from "../components/Contexts/SocketIOContext"; // for reading socket context values + export default function OffersInterestPage() { + + const { offerInterestListReload } = useSelector((state) => state.tableReload); // table/list reload variable + + const {userDetails} = useSelector((state) => state?.userDetails); // Gets USER Details + + let {joinRoom} = SocketValues() // function to join room for socket + const apiCall = new usersService() let {commonHeadBanner} = useSelector(state => state.commonHeadBanner) @@ -19,6 +28,10 @@ export default function OffersInterestPage() { setOfferInterestList({loading: false, data: [], imgServer:''}) console.log('Error: ', err) }) + },[offerInterestListReload]) + + useEffect(()=>{ + joinRoom(`INTEREST-${userDetails?.uid}`) },[]) return ( From 6d98141c394c534a1b3729b0111492bede37ceea Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Fri, 22 Mar 2024 10:40:57 +0100 Subject: [PATCH 2/2] offer interest refresh started --- src/components/MarketPlace/MainSection.jsx | 35 ++++++ .../Pagination/NewPaginatedList.jsx | 101 ++++++++++++++++++ 2 files changed, 136 insertions(+) create mode 100644 src/components/Pagination/NewPaginatedList.jsx diff --git a/src/components/MarketPlace/MainSection.jsx b/src/components/MarketPlace/MainSection.jsx index f251cd7..4d76c7b 100644 --- a/src/components/MarketPlace/MainSection.jsx +++ b/src/components/MarketPlace/MainSection.jsx @@ -4,6 +4,7 @@ import ListView from "../../assets/images/list-view.png"; import AvailableJobsCard from "../Cards/AvailableJobsCard"; import DataIteration from "../Helpers/DataIteration"; import SelectBox from "../Helpers/SelectBox"; +import NewPaginatedList from "../Pagination/NewPaginatedList"; export default function MainSection({ className, @@ -120,6 +121,40 @@ export default function MainSection({ + {/* {products?.length && + + { + ({data})=>( +
+
+ { + data.map((datum, index) => ( +
+ +
+ )) + } +
+
+ ) + } + + } */} ); diff --git a/src/components/Pagination/NewPaginatedList.jsx b/src/components/Pagination/NewPaginatedList.jsx new file mode 100644 index 0000000..9283b6c --- /dev/null +++ b/src/components/Pagination/NewPaginatedList.jsx @@ -0,0 +1,101 @@ +import { useEffect, useState } from "react"; + +const data1 = []; + +export default function NewPaginatedList({ + data = data1, + itemsPerPage = 5, + filterItem, + tableTitle, + children, +}) { + const [searchTerm, setSearchTerm] = useState(""); + const [filteredData, setFilteredData] = useState(data); + + const [currentPage, setCurrentPage] = useState(0); + const [newData, setNewData] = useState([]); + + const numberOfSelection = itemsPerPage; + + const handlePrev = () => { + if (currentPage != 0) { + setCurrentPage((prev) => prev - numberOfSelection); + } + }; + const handleNext = () => { + if (currentPage < data.length) { + setCurrentPage((prev) => prev + numberOfSelection); + } + }; + + const handleSearch = ({ target: { value } }, name) => { + setSearchTerm(value); + let newFilteredData = data.filter((item) => + item[name].toLowerCase().startsWith(value.toLowerCase()) + ); + setFilteredData(newFilteredData); + setCurrentPage(0); + }; + + useEffect(() => { + setNewData( + filteredData?.slice(currentPage, numberOfSelection + currentPage) + ); + }, [currentPage, filteredData]); + console.log("newData", newData, filteredData); + return ( +
+

{tableTitle}

+ + {data.length > 0 && filterItem && ( +
+ {filterItem.map((item, index) => ( + + ))} +
+ )} + + {children({ data: newData })} + + {/* show prev and next button if data exist */} + {data.length > 0 && ( +
+ + +
+ )} +
+ ); +}