Fixed bugs in market popup and made changes to Add/edit

2023-06-27 21:57:39 +01:00
parent b282295924
commit 498966dd23
5 changed files with 118 additions and 153 deletions
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import ModalCom from "../../Helpers/ModalCom";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
@@ -6,17 +6,93 @@ 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 [manageInt, setManageInt] = useState({
-    loading: false,
-    data: {},
-    state: undefined,
-    msg: "",
-  });
+  const MarketCalls = (details) => {
+    const [marketMsg, setMarketMsg] = useState({
+      loading: false,
+      data: {},
+      state: undefined,
+    });
+    const [manageInt, setManageInt] = useState({
+      loading: false,
+      data: {},
+      state: undefined,
+      msg: "",
+    });
+
+    const { offer_code } = details;
+    const reqData = { offer_code };
+
+    const MarketDetail = async () => {
+      try {
+        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);
+      } catch (error) {
+        throw new Error(error);
+      } finally {
+        setTimeout(() => {
+          setTextValue("");
+          setMarketMsg({ loading: false });
+        }, 2000);
+      }
+    };
+
+    const ManageInterest = async () => {
+      try {
+        setManageInt({ loading: true });
+
+        const manageInt = await apiCall.MarketInterest(reqData);
+        const manageIntRes = manageInt?.data;
+
+        if (manageIntRes?.internal_return < 0) {
+          setManageInt({
+            loading: false,
+            msg: manageIntRes?.status,
+            data: manageIntRes,
+            state: false,
+          });
+        } else {
+          setManageInt({
+            loading: false,
+            msg: manageIntRes?.status,
+            data: manageIntRes,
+            state: true,
+          });
+        }
+
+        setTimeout(() => setManageInt({ msg: "" }), 3000);
+      } catch (error) {
+        throw new Error(error);
+      }
+    };
+
+    // useEffect(() => {
+    //   ManageInterest();
+    // }, []);
+
+    return { MarketDetail, ManageInterest, manageInt, marketMsg };
+  };

  const [textValue, setTextValue] = useState("");

@@ -26,75 +102,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {

  const apiCall = useMemo(() => new usersService(), []);

-  const marketCalls = useCallback(
-    async (e) => {
-      try {
-        const nameOfCall = e?.target?.name;
-        const { offer_code } = details;
-        const reqData = { offer_code };
-
-        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);
-      }
-    },
-    [apiCall, details, onClose, textValue]
-  );
+  let { manageInt, ManageInterest, MarketDetail, marketMsg } = MarketCalls(details);

  let thePrice = PriceFormatter(
    details?.price * 0.01,
@@ -103,12 +111,20 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
  );

  // let addedIntDate = marketInt?.added?.split(" ")[0];
-  let expireIntDate = marketInt?.expire?.split(" ")[0];
+  // let expireIntDate = marketInt?.expire?.split(" ")[0];

-  // let cleanedText = details?.job_description.replace(/&lt;/g, '<')
-  // .replace(/&gt;/g, '>')
-  // .replace(/&quot;/g, '"')
-  // .replace(/&amp;/g, '&')
+  let cleanedText = details?.job_description
+    ?.replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&amp;/g, "&");
+
+  console.log("first wait", {
+    manageInt,
+    ManageInterest,
+    MarketDetail,
+    marketMsg,
+  });

  return (
    <ModalCom action={onClose} situation={situation} className="edit-popup">
@@ -142,7 +158,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                },
                {
                  name: "Delivery Detail",
-                  content: details.job_description,
+                  content: cleanedText,
                  danger: true,
                },
              ].map(({ name, content, danger }, idx) => (
@@ -161,7 +177,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                      <p
                        className={``}
                        dangerouslySetInnerHTML={{
-                          __html: danger && content?.replace(/"/g, ""),
+                          __html: danger && content,
                        }}
                      />
                    ) : (
@@ -207,7 +223,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
              <button
                className="self-end w-[150px] h-[52px] rounded-md text-base bg-yellow-500 text-white"
                name="market-message"
-                onClick={marketCalls}
+                onClick={MarketDetail}
              >
                {marketMsg.loading ? (
                  <LoadingSpinner size={5} color="white" />
@@ -230,7 +246,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                <button
                  className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex sm:flex-col flex-row sm:gap-0 gap-1 items-center justify-center"
                  name="market-interest"
-                  onClick={marketCalls}
+                  onClick={ManageInterest}
                >
                  {" "}
                  <span>Send</span>
@@ -261,7 +277,9 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                  Interest: <b className="ml-1">{details.interest_count}</b>
                </p>
                <hr />
-                <p className="my-1">Expire: {expireIntDate}</p>
+                <p className="my-1">
+                  Expire: {details.expire}
+                </p>
              </div>
            </div>
            <button