Merge branch 'market-item-view-popup' of WrenchBoard/Users-Wrench into master

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -1,49 +1,70 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import ModalCom from "../../Helpers/ModalCom";
+import { toast } from "react-toastify";
 import { Form, Formik } from "formik";
 import usersService from "../../../services/UsersService";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
-  const [marketMsg, setMarketMsg] = useState({ loading: false, data: {} });
+  const [marketMsg, setMarketMsg] = useState({
+    loading: false,
+    data: {},
+    state: undefined,
+  });
   const [textValue, setTextValue] = useState("");
 
   const handleInputChange = ({ target: { value } }) => {
     setTextValue(value);
   };
-  console.log("maker pop data", details);
+
   const apiCall = useMemo(() => new usersService(), []);
 
-  const marketCalls = useCallback(async (e) => {
-    let nameOfCall = e?.target?.name;
-    let { offer_code } = details;
-    let reqData = { offer_code };
+  const marketCalls = useCallback(
+    async (e) => {
+      let nameOfCall = e?.target?.name;
+      let { offer_code } = details;
+      let reqData = { offer_code };
 
-    try {
-      if (nameOfCall === "market-message") {
-        // To manage the manage msg data
-        setMarketMsg({ loading: true });
-        reqData = { your_message: textValue, ...reqData };
+      try {
+        if (nameOfCall === "market-message") {
+          // To manage the manage msg data
+          setMarketMsg({ loading: true });
+          reqData = { yourmessage: textValue, ...reqData };
 
-        const marketMessage = await apiCall.MarketMessage(reqData);
-        const marketMessageRes = await marketMessage?.data;
+          const marketMessage = await apiCall.MarketMessage(reqData);
+          const marketMessageRes = await marketMessage?.data;
 
-        // To manage the manage msg data
-        setMarketMsg({ loading: false, data: marketMessageRes });
+          if (marketMessageRes?.internal_return < 0) {
+            setMarketMsg({ loading: false });
+            toast.warn("Something wrong happened", {
+              autoClose: 2000,
+              hideProgressBar: true,
+            });
+            onClose();
+            return;
+          }
 
+          toast.success("Message sent", {
+            autoClose: 2500,
+            hideProgressBar: true,
+          });
+          // To manage the manage msg data
+          setMarketMsg({ data: marketMessageRes, state: true });
+        }
+      } catch (error) {
+        throw new Error(error);
+      } finally {
         setTimeout(() => {
           onClose();
-        }, 3500);
+          setTextValue("");
+          setMarketMsg({ loading: false });
+        }, 2000);
       }
-    } catch (error) {
-      throw new Error(error);
-    }
-  });
+    },
+    [apiCall, details, onClose, setMarketMsg, textValue]
+  );
 
-  useEffect(() => {
-    marketCalls();
-  }, []);
-
-  let addedIntDate = marketInt?.added?.split(" ")[0];
+  // let addedIntDate = marketInt?.added?.split(" ")[0];
   let expireIntDate = marketInt?.expire?.split(" ")[0];
 
   return (
@@ -114,7 +135,13 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 name="market-message"
                 onClick={marketCalls}
               >
-                Send Message
+                {marketMsg.loading ? (
+                  <LoadingSpinner size={5} color="white" />
+                ) : !marketMsg.state ? (
+                  "Send Message"
+                ) : (
+                  "Message Sent"
+                )}
               </button>
             </div>
           </div>
@@ -134,7 +161,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 </button>
                 <p>Error - {marketInt?.status}</p>
                 <p className="mt-2 flex items-center">
-                  Interest: <b className="ml-1">0</b>
+                  Interest: <b className="ml-1">{marketInt?.public_view}</b>
                 </p>
                 <hr />
               </div>