Rearrangement of New Task Layout

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -31,6 +31,19 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
     setActiveTask({ id, data });
   };
 
+  // New Task
+  const [formState, setFormState] = useState({
+    // Initialize form state with desired fields
+    banner: "" || "default.jpg",
+    country: "" || "",
+    price: "" || "",
+    title: "" || "",
+    description: "" || "",
+    job_detail: "" || "",
+    timeline_days: "" || "",
+    category: [] || "",
+  });
+
   const assignFamilyTask = () => {
     setRequestStatus({ loading: true, status: false, message: "" });
     let reqData = {};
@@ -54,46 +67,93 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
         job_description: activeTask.data?.description,
         assign_mode: 110011,
       };
+    }
 
-      apiCall
-        .assignFamilyTask(reqData)
-        .then((res) => {
-          if (res.status != 200 || res.data.internal_return < 0) {
-            setRequestStatus({
-              loading: false,
-              status: false,
-              message: "failed to assign task",
-            });
-            return setTimeout(() => {
-              setRequestStatus({ loading: false, status: false, message: "" });
-            }, 5000);
-          }
-          setRequestStatus({
-            loading: false,
-            status: true,
-            message: "action successful",
-          });
-          setTimeout(() => {
-            setRequestStatus({ loading: false, status: false, message: "" });
-            action(); // FUNCTION THAT CLOSES THE MODAL BOX
-          }, 5000);
-        })
-        .catch((err) => {
+    if (taskType === "new") {
+      const {
+        banner,
+        category,
+        country,
+        description,
+        job_detail,
+        price,
+        timeline_days,
+        title,
+      } = formState;
+
+      const requiredFields = [
+        banner,
+        category,
+        country,
+        description,
+        job_detail,
+        price,
+        timeline_days,
+        title,
+      ];
+
+      if (requiredFields.some((field) => !field)) {
+        const emptyField = requiredFields.find((field) => !field);
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: `${emptyField} Empty`,
+        });
+
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 3000);
+
+        return;
+      }
+
+      reqData = {
+        banner,
+        category,
+        country,
+        description,
+        job_detail,
+        price: price * 100,
+        timeline_days,
+        title,
+        assign_mode: 110055,
+        family_uid: familyDetails.uid,
+      };
+    }
+
+    apiCall
+      .assignFamilyTask(reqData)
+      .then((res) => {
+        if (res.status != 200 || res.data.internal_return < 0) {
           setRequestStatus({
             loading: false,
             status: false,
-            message: "An Error occured, try again",
+            message: "failed to assign task",
           });
-          setTimeout(() => {
+          return setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
           }, 5000);
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "action successful",
         });
-    }
-
-    if (taskType == "new") {
-      // RUNS HERE IF TASK TYPE IS NEW TASK
-      console.log("TESTING");
-    }
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+          action(); // FUNCTION THAT CLOSES THE MODAL BOX
+        }, 5000);
+      })
+      .catch((err) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "An Error occured, try again",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 5000);
+      });
   };
 
   useEffect(() => {
@@ -120,16 +180,10 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
       });
   }, []);
 
-  // New Task 
-  const [newTaskData, setNewTaskData] = useState({})
-  const handleNewTaskData = (data) => {
-    setNewTaskData(data)
-  }
-
-  console.log("Trying to see form data >>", newTaskData)
+  console.log("Trying to see form data >>", formState);
   return (
     <>
-      <ModalCom action={action} situation={situation}>
+      <ModalCom action={action} situation={situation} className="assign-task-popup">
         <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
           <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 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">
@@ -231,9 +285,12 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
                       )}
                     </div>
                   )}
-                  {taskType !== "select" && (
+                  {taskType == "new" && (
                     <div className="p-4 w-full h-[400px]">
-                      <NewTasks onChange={handleNewTaskData} />
+                      <NewTasks
+                        formState={formState}
+                        setFormState={setFormState}
+                      />
                     </div>
                   )}
                 </div>
@@ -335,7 +392,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
                 <div className="">
                   {requestStatus.loading ? (
                     <LoadingSpinner color="sky-blue" size="8" />
-                  ) : (
+                  ) : taskType == "select" ? (
                     <button
                       type="button"
                       disabled={requestStatus.loading}
@@ -344,6 +401,15 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
                     >
                       Assign
                     </button>
+                  ) : (
+                    <button
+                      type="button"
+                      disabled={requestStatus.loading}
+                      onClick={assignFamilyTask}
+                      className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                    >
+                      {`Assign to ${familyDetails?.firstname}`}
+                    </button>
                   )}
                 </div>
               </div>