.

src/components/jobPopout/PendingJobsPopout.jsx

@@ -1,46 +1,63 @@
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import Detail from "./popoutcomponent/Detail";
 import ModalCom from "../Helpers/ModalCom";
 import usersService from "../../services/UsersService";
+import { toast } from "react-toastify";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+const showSuccessToast = (message) => {
+  toast.success(message, {
+    autoClose: 3000,
+    hideProgressBar: true,
+  });
+};
 
 function PendingJobsPopout({ details, onClose, situation }) {
-  const [pendingJobLoader, setPendingJobLoader] = useState(false)
+  const [pendingJobLoader, setPendingJobLoader] = useState({
+    extend: false,
+    offer: false,
+  });
   const apiCall = useMemo(() => new usersService(), []);
-  
-  const handlePendingJobsBtn = async ({ target: { name } }) => {
-    setPendingJobLoader(true)
-    let { job_uid, offer_code } = details;
 
-    let reqData;
+  const handlePendingJobsBtn = useCallback(
+    async ({ target: { name } }) => {
+      let { job_uid, offer_code } = details;
 
-    let pendingData = { job_uid, offer_code };
+      let reqData;
+
+      let pendingData = { job_uid, offer_code };
 
-    if (name === "extend") {
       try {
-        reqData = { ...pendingData };
-        let { data } = await apiCall.pendingJobExtend(reqData);
-        console.log("This is for extend", data);
-        setPendingJobLoader(false)
+        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;
+
+        setTimeout(() => {
+          setPendingJobLoader({ extend: false, offer: false });
+          onClose();
+        }, 2700);
       } catch (error) {
-        setPendingJobLoader(false)
+        setPendingJobLoader({ extend: false, offer: false });
         throw new Error(error);
       }
-    } else if (name === "offer") {
-      try {
-        reqData = { ...pendingData };
-        let { data } = await apiCall.pendingJobSendTome(reqData);
-        console.log("This is for offer", data);
-        setPendingJobLoader(false)
-      } catch (error) {
-        setPendingJobLoader(false)
-        throw new Error(error);
-      }
-    } else return;
+    },
+    [onClose, apiCall, details]
+  );
 
-    onClose();
-  };
   return (
-    <ModalCom action={onClose} situation={situation}>
+    <ModalCom action={onClose} situation={situation} className="edit-popup">
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
@@ -159,7 +176,13 @@ function PendingJobsPopout({ details, onClose, situation }) {
                 onClick={handlePendingJobsBtn}
                 name="extend"
               >
-                Extend by a week
+                {pendingJobLoader.extend ? (
+                  <div className="w-[136px] flex justify-center items-center h-full">
+                    <LoadingSpinner size={5} color="sky-blue" />
+                  </div>
+                ) : (
+                  "Extend by a week"
+                )}
               </button>
             </div>
 
@@ -169,7 +192,13 @@ function PendingJobsPopout({ details, onClose, situation }) {
                 onClick={handlePendingJobsBtn}
                 name="offer"
               >
-                Send to me
+                {pendingJobLoader.offer ? (
+                  <div className="w-[96px] flex justify-center items-center h-full">
+                    <LoadingSpinner size={5} color="sky-blue" />
+                  </div>
+                ) : (
+                  "Send to me"
+                )}
               </button>
             </div>