From e8789e7be616ea20aeb15de32ad58c5e9d7075eb Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 7 Jun 2023 00:35:35 +0100 Subject: [PATCH] . --- .../MarketPlace/PopUp/MarketPopUp.jsx | 208 ++++++++++++------ src/index.css | 15 +- 2 files changed, 159 insertions(+), 64 deletions(-) diff --git a/src/components/MarketPlace/PopUp/MarketPopUp.jsx b/src/components/MarketPlace/PopUp/MarketPopUp.jsx index 47041d0..0150037 100644 --- a/src/components/MarketPlace/PopUp/MarketPopUp.jsx +++ b/src/components/MarketPlace/PopUp/MarketPopUp.jsx @@ -11,6 +11,13 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => { data: {}, state: undefined, }); + const [manageInt, setManageInt] = useState({ + loading: false, + data: {}, + state: undefined, + msg: "", + }); + const [textValue, setTextValue] = useState(""); const handleInputChange = ({ target: { value } }) => { @@ -21,21 +28,21 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => { const marketCalls = useCallback( async (e) => { - let nameOfCall = e?.target?.name; - let { offer_code } = details; - let reqData = { offer_code }; - try { + const nameOfCall = e?.target?.name; + const { offer_code } = details; + const reqData = { offer_code }; + if (nameOfCall === "market-message") { - // To manage the manage msg data setMarketMsg({ loading: true }); - reqData = { yourmessage: textValue, ...reqData }; + if (!textValue) return; + + reqData.yourmessage = textValue; const marketMessage = await apiCall.MarketMessage(reqData); - const marketMessageRes = await marketMessage?.data; + const marketMessageRes = marketMessage?.data; if (marketMessageRes?.internal_return < 0) { - setMarketMsg({ loading: false }); toast.warn("Something wrong happened", { autoClose: 2000, hideProgressBar: true, @@ -48,73 +55,127 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => { autoClose: 2500, hideProgressBar: true, }); - // To manage the manage msg data + 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(() => { - onClose(); setTextValue(""); setMarketMsg({ loading: false }); }, 2000); } }, - [apiCall, details, onClose, setMarketMsg, textValue] + [apiCall, details, onClose, textValue] ); + console.log('Checking my mangeInt',manageInt) + // let addedIntDate = marketInt?.added?.split(" ")[0]; let expireIntDate = marketInt?.expire?.split(" ")[0]; return ( - // className="job-popup" - -
-
+ +
+
+

+ {details.offer_code} +

-
+
-
-

- {details.offer_code} -

-

- {`Timeline: ${details.timeline_days} day(s) -- `} - {`Budget: ${details.price} naira`} -

-
+
+

+ {details?.title} +

- {/* INPUT SECTION */} - {[ - { name: "Title", content: details.title }, - { name: "Description", content: details.description }, - { - name: "Detail", - content: details.job_description, - danger: true, - }, - ].map(({ name, content, danger }, idx) => ( -
- - {danger ? ( -

- ) : ( -

- {content !== "Detail" ? content : null} -

- )} -
- ))} + {/* INPUT SECTION */} + {[ + { + name: "Description", + content: details.description, + }, + { + name: "", + content: { + text: `Timeline: ${details.timeline_days} day(s) -- `, + bold: `Budget: ${details.price} naira`, + }, + }, + { + 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} + {content?.bold} + + )} + + ) : ( + "" + )} +

+ )} +
+
+ ))} +
@@ -146,26 +207,49 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
-
-
-

- Interested in the task? -

+
+
+

+ Interested in the task? +

- -

Error - {marketInt?.status}

-

+ <> + {manageInt.loading ? ( +

please wait...

+ ) : ( + <> + {manageInt?.msg !== "" && ( +

+ {manageInt?.msg} +

+ )} + + )} + +
+ +
+

Interest: {marketInt?.public_view}

+

Expire: {expireIntDate}

-

Expire: {expireIntDate}

{/* END OF ACTION SECTION */} diff --git a/src/index.css b/src/index.css index 64f56ef..41f66de 100644 --- a/src/index.css +++ b/src/index.css @@ -786,13 +786,15 @@ TODO: Responsive =========================== } /* Update table scrollbar */ -.update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track{ +.update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track, +.market-pop::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: transparent; border-radius: 10px; } -.update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar { +.update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar, +.market-pop::-webkit-scrollbar { width: 10px; background-color: transparent; } @@ -805,6 +807,15 @@ TODO: Responsive =========================== background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%); } +.market-pop::-webkit-scrollbar-thumb { + border-radius: 100px; + + /* background-color: #fafafa; */ + /* background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%); */ + background: rgb(236,237,241); + background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%); +} + .input-curve.lg{ border-radius: 35px !important; }