Continue Suggested Task

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -6,7 +6,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import { NewTasks } from "./forms";
 
-function AssignTaskPopout({ action, situation, familyDetails }) {
+function AssignTaskPopout({ action, details, situation, familyDetails }) {
   const apiCall = new usersService();
 
   let [requestStatus, setRequestStatus] = useState({
@@ -17,7 +17,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
 
   let [familyTask, setFamilyTask] = useState({ loading: true, data: [] });
 
-  let [taskType, setTaskType] = useState("select"); // SWITCHES BTW SELECT TASK AND NEW TASK
+  let [taskType, setTaskType] = useState(details ? "new" : "select"); // SWITCHES BTW SELECT TASK AND NEW TASK
 
   let [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK
 
@@ -34,14 +34,14 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
   // New Task
   const [formState, setFormState] = useState({
     // Initialize form state with desired fields
-    banner: "" || "default.jpg",
-    country: "" || "",
-    price: "" || "",
-    title: "" || "",
-    description: "" || "",
-    job_detail: "" || "",
-    timeline_days: "" || "",
-    category: [] || "",
+    banner: details?.banner || "default.jpg",
+    country: details?.country || "",
+    price: details?.price || "",
+    title: details?.title || "",
+    description: details?.description || "",
+    job_detail: details?.job_detail || "",
+    timeline_days: details?.timeline_days || "",
+    category: details?.category || "",
   });
 
   const assignFamilyTask = () => {
@@ -81,30 +81,28 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
         title,
       } = formState;
 
-      const requiredFields = [
+      const requiredFields = {
         banner,
-        category,
+        // 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;
+      for (let field in requiredFields) {
+        if (requiredFields[field] == "") {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: `${field} is empty`,
+          });
+          return setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+          }, 3000);
+        }
       }
 
       reqData = {
@@ -117,7 +115,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
         timeline_days,
         title,
         assign_mode: 110055,
-        family_uid: familyDetails.uid,
+        family_uid: details?.family_uid || familyDetails?.uid,
       };
     }
 
@@ -156,6 +154,8 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
       });
   };
 
+  console.log("state >>--<<", familyDetails);
+
   useEffect(() => {
     const reqData = {
       limit: 30,
@@ -180,14 +180,17 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
       });
   }, []);
 
-  console.log("Trying to see form data >>", formState);
   return (
     <>
-      <ModalCom action={action} situation={situation} className="assign-task-popup">
+      <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">
-              Assign task to {familyDetails?.firstname}
+              Assign task to {familyDetails?.firstname || details.firstName}
             </h1>
             <button
               type="button"
@@ -367,7 +370,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
                 {requestStatus.message != "" &&
                   (!requestStatus.status ? (
                     <div
-                      className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                      className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
                     >
                       {requestStatus.message}
                     </div>
@@ -380,6 +383,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
                       </div>
                     )
                   ))}
+
                 {/* End of error or success display */}
                 <button
                   disabled={requestStatus.loading}
@@ -408,7 +412,9 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
                       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}`}
+                      {`Assign to ${
+                        familyDetails?.firstname || details.firstName
+                      }`}
                     </button>
                   )}
                 </div>