src/components/jobPopout/PendingJobsPopout.jsx

@@ -1,9 +1,17 @@
-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({
     extend: false,
@@ -11,38 +19,45 @@ function PendingJobsPopout({ details, onClose, situation }) {
   });
   const apiCall = useMemo(() => new usersService(), []);
 
-  const handlePendingJobsBtn = async ({ target: { name } }) => {
-    let { job_uid, offer_code } = details;
+  const handlePendingJobsBtn = useCallback(
+    async ({ target: { name } }) => {
+      let { job_uid, offer_code } = details;
 
-    let pendingData = { job_uid, offer_code };
-    let reqData = { ...pendingData };
+      let reqData;
+
+      let pendingData = { job_uid, offer_code };
 
-    if (name === "extend") {
       try {
-        setPendingJobLoader({ extend: true });
-        let { data } = await apiCall.pendingJobExtend(reqData);
-        console.log("This is for extend", data);
-        setPendingJobLoader({ extend: 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({ extend: false });
+        setPendingJobLoader({ extend: false, offer: false });
         throw new Error(error);
       }
-    } else if (name === "offer") {
-      try {
-        setPendingJobLoader({ offer: true });
-        let { data } = await apiCall.pendingJobSendTome(reqData);
-        console.log("This is for offer", data);
-        setPendingJobLoader({ offer: false });
-      } catch (error) {
-        setPendingJobLoader({ offer: 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">
@@ -162,8 +177,8 @@ function PendingJobsPopout({ details, onClose, situation }) {
                 name="extend"
               >
                 {pendingJobLoader.extend ? (
-                  <div className="min-w-[130px] w-full h-full place-items-center">
-                    <LoadingSpinner size={6} color="sky-blue" />
+                  <div className="w-[136px] flex justify-center items-center h-full">
+                    <LoadingSpinner size={5} color="sky-blue" />
                   </div>
                 ) : (
                   "Extend by a week"
@@ -178,14 +193,15 @@ function PendingJobsPopout({ details, onClose, situation }) {
                 name="offer"
               >
                 {pendingJobLoader.offer ? (
-                  <div className="min-w-[130px] w-full h-full">
-                    <LoadingSpinner size={6} color="sky-blue" />
+                  <div className="w-[96px] flex justify-center items-center h-full">
+                    <LoadingSpinner size={5} color="sky-blue" />
                   </div>
                 ) : (
                   "Send to me"
                 )}
               </button>
             </div>
+
             <div className="mt-10 md:mt-32 md:flex md:justify-center">
               <button
                 className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
@@ -213,4 +229,4 @@ function PendingJobsPopout({ details, onClose, situation }) {
   );
 }
 
-export default PendingJobsPopout;
+export default PendingJobsPopout;