diff --git a/src/components/Helpers/CountDown.jsx b/src/components/Helpers/CountDown.jsx index c2f39bd..809d6a5 100644 --- a/src/components/Helpers/CountDown.jsx +++ b/src/components/Helpers/CountDown.jsx @@ -1,59 +1,64 @@ -/* eslint-disable no-underscore-dangle */ -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; function CountDown({ lastDate = "" }) { - // const [showDate, setDate] = useState(0); - const [showHour, setHour] = useState(0); - const [showMinute, setMinute] = useState(0); - const [showSecound, setDateSecound] = useState(0); - // count Down - const provideDate = new Date(lastDate); - // format date - const year = provideDate.getFullYear(); - const month = provideDate.getMonth(); - // console.log(month); - const date = provideDate.getDate(); - // console.log(date); - const hours = provideDate.getHours(); - // console.log(hours); - const minutes = provideDate.getMinutes(); - // console.log(minutes); - const seconds = provideDate.getSeconds(); - // console.log(seconds); - - // date calculation logic - const _seconds = 1000; - const _minutes = _seconds * 60; - const _hours = _minutes * 60; - const _date = _hours * 24; - - // interval function - const startInterval = () => { - const timer = setInterval(() => { - const now = new Date(); - const distance = - new Date(year, month, date, hours, minutes, seconds).getTime() - - now.getTime(); - if (distance < 0) { - clearInterval(timer); - return; - } - // setDate(Math.floor(distance / _date)); - setMinute(Math.floor((distance % _hours) / _minutes)); - setHour(Math.floor((distance % _date) / _hours)); - setDateSecound(Math.floor((distance % _minutes) / _seconds)); - }, 1000); - }; - - // effect - useEffect(() => { - if (lastDate !== "") { - startInterval(); - } + // State to store the countdown values + const [countdownValues, setCountdownValues] = useState({ + showHour: 0, + showMinute: 0, + showSecond: 0, }); + + useEffect(() => { + if (lastDate) { + // Interval function to update countdown values + const intervalId = setInterval(() => { + const now = new Date().getTime(); + const targetDate = new Date(lastDate).getTime(); + const distance = targetDate - now; + + if (distance < 0) { + // If the countdown has reached zero or gone past the target date, clear the interval + clearInterval(intervalId); + setCountdownValues({ + showHour: 0, + showMinute: 0, + showSecond: 0, + }); + return; + } + + // Calculate the countdown values (days, hours, minutes, seconds) + const days = Math.floor(distance / (1000 * 60 * 60 * 24)); + const hours = Math.floor( + (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) + ); + const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((distance % (1000 * 60)) / 1000); + + // since we don't have a slot for days... + const totalHours = days * 24 + hours; + + // Update the countdown values in the state + setCountdownValues({ + showHour: totalHours, + showMinute: minutes, + showSecond: seconds, + }); + }, 1000); + + // Clean up the interval on component unmount or when the lastDate prop changes + return () => clearInterval(intervalId); + } + }, [lastDate]); + + // Destructure the countdown values from the state + const { showHour, showMinute, showSecond } = countdownValues; + return ( - {showHour} : {showMinute} : {showSecound} + {showHour < 10 ? "0" + showHour : showHour} :{" "} + {showMinute < 10 ? "0" + showMinute : showMinute} :{" "} + {showSecond < 10 ? "0" + showSecond : showSecond} ); } diff --git a/src/components/MarketPlace/PopUp/Detail.jsx b/src/components/MarketPlace/PopUp/Detail.jsx new file mode 100644 index 0000000..4c4e3df --- /dev/null +++ b/src/components/MarketPlace/PopUp/Detail.jsx @@ -0,0 +1,12 @@ +import React from 'react' + +function Detail({label, value, bg,}) { + return ( + <> + +

{value}

+ + ) +} + +export default Detail \ No newline at end of file diff --git a/src/components/MarketPlace/PopUp/MarketPopUp.jsx b/src/components/MarketPlace/PopUp/MarketPopUp.jsx index 4c08188..444d1ba 100644 --- a/src/components/MarketPlace/PopUp/MarketPopUp.jsx +++ b/src/components/MarketPlace/PopUp/MarketPopUp.jsx @@ -1,306 +1,234 @@ -import React, { useCallback, useMemo, useState } from "react"; +import { useCallback, useMemo, useState } from "react"; +import Detail from "./Detail"; import ModalCom from "../../Helpers/ModalCom"; -import { toast } from "react-toastify"; -import { Form, Formik } from "formik"; import usersService from "../../../services/UsersService"; +import { toast } from "react-toastify"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; import { PriceFormatter } from "../../Helpers/PriceFormatter"; -const MarketPopUp = ({ details, onClose, situation, marketInt }) => { - const [marketMsg, setMarketMsg] = useState({ - loading: false, - data: {}, - state: undefined, +const showSuccessToast = (message) => { + toast.success(message, { + autoClose: 3000, + hideProgressBar: true, }); - const [manageInt, setManageInt] = useState({ - loading: false, - data: {}, - state: undefined, - msg: "", +}; + +function MarketPopUp({ details, onClose, situation }) { + const [pendingJobLoader, setPendingJobLoader] = useState({ + extend: false, + offer: false, }); - - const [textValue, setTextValue] = useState(""); - - const handleInputChange = ({ target: { value } }) => { - setTextValue(value); - }; - const apiCall = useMemo(() => new usersService(), []); - const marketCalls = useCallback( - async (e) => { + const handlePendingJobsBtn = useCallback( + async ({ target: { name } }) => { + let { job_uid, offer_code } = details; + + let reqData; + + let pendingData = { job_uid, offer_code }; + try { - const nameOfCall = e?.target?.name; - const { offer_code } = details; - const reqData = { offer_code }; + if (name === "extend") { + setPendingJobLoader({ extend: true }); + reqData = { ...pendingData }; + // let { data } = + await apiCall.pendingJobExtend(reqData); + // console.log("This is for extend", data); + showSuccessToast("Job has been extended by a week!"); + } else if (name === "offer") { + setPendingJobLoader({ offer: true }); + reqData = { ...pendingData }; + // let { data } = + await apiCall.pendingJobSendTome(reqData); + // console.log("This is for offer", data); + showSuccessToast("Offer sent, check your email"); + } else return; - if (nameOfCall === "market-message") { - setMarketMsg({ loading: true }); - if (!textValue) return; - - reqData.yourmessage = textValue; - - const marketMessage = await apiCall.MarketMessage(reqData); - const marketMessageRes = marketMessage?.data; - - if (marketMessageRes?.internal_return < 0) { - toast.warn("Something wrong happened", { - autoClose: 2000, - hideProgressBar: true, - }); - onClose(); - return; - } - - toast.success("Message sent", { - autoClose: 2500, - hideProgressBar: true, - }); - - setMarketMsg({ data: marketMessageRes, state: true }); - setTimeout(() => onClose(), 2000); - } else { - setManageInt({ loading: true }); - - const manageInt = await apiCall.MarketInterest(reqData); - const manageIntRes = manageInt?.data; - - if (manageIntRes?.internal_return < 0) { - setManageInt({ - loading: false, - msg: `Error - ${manageIntRes?.status}`, - data: manageIntRes, - state: false, - }); - } else { - setManageInt({ - loading: false, - msg: manageIntRes?.status, - data: manageIntRes, - state: true, - }); - } - - setTimeout(() => setManageInt({ msg: "" }), 3000); - - return; - } - } catch (error) { - throw new Error(error); - } finally { setTimeout(() => { - setTextValue(""); - setMarketMsg({ loading: false }); - }, 2000); + setPendingJobLoader({ extend: false, offer: false }); + onClose(); + }, 2700); + } catch (error) { + setPendingJobLoader({ extend: false, offer: false }); + throw new Error(error); } }, - [apiCall, details, onClose, textValue] + [onClose, apiCall, details] ); - let thePrice = PriceFormatter( - details?.price * 0.01, - details?.currency_code, - details?.currency - ); - - // let addedIntDate = marketInt?.added?.split(" ")[0]; - let expireIntDate = marketInt?.expire?.split(" ")[0]; - return ( -
-
+
+

- {details.offer_code} + Manage Pending Item

- +
- -
-
-
-

- {details?.title} -

- - {/* INPUT SECTION */} - {[ - { - name: "Description", - content: details.description, - }, - { - name: "", - content: { - text: `Timeline: ${details.timeline_days} day(s) -- `, - bold: `Budget: ${thePrice}`, - }, - }, - { - name: "Delivery Detail", - content: details.job_description, - danger: true, - }, - ].map(({ name, content, danger }, idx) => ( -
- -
- {danger ? ( -

- ) : ( -

- {name !== "Delivery Detail" ? ( - <> - {typeof content !== "object" ? content : null} - {typeof content === "object" && ( - <> -

- - {content?.text} - {thePrice} - -
- - )} - - ) : ( - "" - )} -

- )} -
-
- ))} -
-
-
-
- -