From cdd998235e111698e764c9c0562bb28b8397de2b Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 18 Mar 2024 13:42:58 +0100
Subject: [PATCH 1/2] made assign job labels same style

---
 src/components/FamilyAcc/FamilyManageTabs.jsx |  1 +
 .../FamilyPopout/AssignTaskPopout.jsx         | 80 ++++++++++++-------
 .../FamilyAcc/FamilyPopout/forms/NewTasks.jsx | 21 ++---
 .../FamilyAcc/Tabs/FamilyWaitlist.jsx         |  3 +-
 .../jobPopout/popoutcomponent/Detail.jsx      |  2 +-
 src/index.css                                 |  6 ++
 6 files changed, 75 insertions(+), 38 deletions(-)

diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx
index e9ad72d..a3a3033 100644
--- a/src/components/FamilyAcc/FamilyManageTabs.jsx
+++ b/src/components/FamilyAcc/FamilyManageTabs.jsx
@@ -187,6 +187,7 @@ export default function FamilyManageTabs({
         familyData={details.familyWaitList.data}
         accountDetails={accountDetails}
         loader={details.familyWaitList.loading}
+        setUpdatePage={setUpdatePage}
       />
     ),
     Pending: (
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
index b4c2e23..b815147 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { useLocation } from "react-router-dom";
 import usersService from "../../../services/UsersService";
@@ -24,12 +24,13 @@ const AssignTaskPopout = ({
   const apiCall = new usersService();
   let { pathname, state } = useLocation();
 
-  const [selectedFamilyUid, setSelectedFamilyUid] = useState(null);
+  const [selectedFamilyUid, setSelectedFamilyUid] = useState('');
 
   const handleFamChange = (event) => {
     setSelectedFamilyUid(event.target.value);
   };
 
+
   const dispatch = useDispatch();
 
   const getFamilySession = JSON.parse(sessionStorage.getItem("family_list"));
@@ -73,6 +74,14 @@ const AssignTaskPopout = ({
 
   const assignFamilyTask = () => {
     setRequestStatus({ loading: true, status: false, message: "" });
+
+    if(!selectedFamilyUid){ // If no family found, throw error
+      setRequestStatus({ loading: false, status: false, message: "Please Select Family Member" });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 3000);
+    }
+
     let reqData = {};
     if (taskType == "select") {
       // RUNS HERE IF TASK TYPE IS SELECT
@@ -147,7 +156,9 @@ const AssignTaskPopout = ({
         timeline_days,
         title,
         assign_mode: 110055,
-        family_uid: details?.family_uid || familyDetailsData?.uid,
+        family_uid: selectedFamilyUid
+        ? selectedFamilyUid
+        : familyDetailsData?.uid || details?.family_uid,
       };
     }
 
@@ -178,7 +189,7 @@ const AssignTaskPopout = ({
           });
           console.log("Assign task 5");
 
-          // setUpdatePage(prev => !prev); // Updates family task page by calling the useeffect hook
+          setUpdatePage(prev => !prev); // Updates family task page by calling the useeffect hook
           console.log("Assign task 6");
 
           dispatch(tableReload({ type: "WALLETTABLE" })); // RELOADS USER WALLET
@@ -205,6 +216,18 @@ const AssignTaskPopout = ({
       });
   };
 
+  useEffect(()=>{ // effect to update family UID when components mounts
+    if(familyDetailsData?.uid){
+      setSelectedFamilyUid(familyDetailsData?.uid)
+    }else if(details?.family_uid){
+      setSelectedFamilyUid(details?.family_uid)
+    }else{
+      setSelectedFamilyUid('')
+    }
+  },[])
+
+  console.log('NAME', selectedFamilyUid)
+
   return (
     <>
       <ModalCom action={action} situation={situation}>
@@ -226,7 +249,7 @@ const AssignTaskPopout = ({
                       onChange={handleFamChange}
                       value={selectedFamilyUid}
                     >
-                      <option value="" disabled selected>
+                      <option value="">
                         Select a member
                       </option>
                       {familyList}
@@ -358,7 +381,7 @@ const AssignTaskPopout = ({
                           </div>
                           <div className="flex items-center">
                             <div className="my-3 w-full flex items-center gap-1">
-                              <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
+                              <label className="job-label">
                                 Price
                               </label>
                               <p className="p-1 text-sm text-slate-900 dark:text-white">
@@ -371,22 +394,23 @@ const AssignTaskPopout = ({
                             </div>
 
                             <div className="my-3 w-full flex items-center gap-1">
-                              <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
+                              <label className="job-label">
                                 Timeline
                               </label>
                               <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
                             </div>
                           </div>
-
-                          <div className="my-3 sm:flex items-center">
+                          
+                          {/* Dummy, no value found for created! thus commented*/}
+                          {/* <div className="my-3 sm:flex items-center">
                             <Detail
                               label="Created"
                               value={`Dummy, no value found for created!`}
                             />
-                          </div>
+                          </div> */}
 
                           <div className="my-3">
-                            <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
+                            <label className="w-full job-label">
                               Delivery Detail
                             </label>
                             <textarea
@@ -430,7 +454,7 @@ const AssignTaskPopout = ({
                 </div>
 
                 {/* End of error or success display */}
-                <div className="w-auto h-auto flex items-center gap-3">
+                <div className="w-auto h-auto flex items-center gap-20">
                   <button
                     disabled={requestStatus.loading}
                     onClick={action}
@@ -442,7 +466,7 @@ const AssignTaskPopout = ({
                   <div className="">
                     {requestStatus.loading ? (
                       <LoadingSpinner color="sky-blue" size="8" />
-                    ) : taskType == "select" ? (
+                    ) : (
                       <button
                         type="button"
                         disabled={requestStatus.loading}
@@ -451,20 +475,22 @@ const AssignTaskPopout = ({
                       >
                         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"
-                      >
-                        {details
-                          ? `Assign task to ${details?.firstname}`
-                          : familyDetailsData
-                          ? `Assign task to ${familyDetailsData.firstname}`
-                          : "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"
+                    //   >
+                    //     {details
+                    //       ? `Assign task to ${details?.firstname}`
+                    //       : familyDetailsData
+                    //       ? `Assign task to ${familyDetailsData.firstname}`
+                    //       : "Assign"}
+                    //   </button>
+                    // )
+                    }
                   </div>
                 </div>
               </div>
diff --git a/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx b/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
index 26341f5..50f160d 100644
--- a/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
@@ -56,7 +56,7 @@ export default function NewTasks({ formState, setFormState }) {
           <div className="field w-full mb-6 xl:mb-0">
             <label
               htmlFor="country"
-              className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
+              className="job-label"
             >
               Currency
               {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
@@ -98,10 +98,11 @@ export default function NewTasks({ formState, setFormState }) {
 
           {/* Price */}
           <div className="field w-full">
+            <label htmlFor="price" className="job-label">Price</label>
             <InputCom
               fieldClass="px-6 text-right"
-              label="Price"
-              labelClass="tracking-wide"
+              // label="Price"
+              // labelClass="tracking-wide"
               inputBg="bg-slate-100"
               type="number"
               name="price"
@@ -117,7 +118,7 @@ export default function NewTasks({ formState, setFormState }) {
           <div className="field w-full mb-6 xl:mb-0">
             <label
               htmlFor="timeline_days"
-              className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
+              className="job-label"
             >
               Timeline
               {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
@@ -151,10 +152,11 @@ export default function NewTasks({ formState, setFormState }) {
 
         {/* Title  */}
         <div className="field w-full mb-[5px]">
+          <label htmlFor="title" className="job-label">Title</label>
           <InputCom
             fieldClass="px-6"
-            label="Title"
-            labelClass="tracking-wide"
+            // label="Title"
+            // labelClass="tracking-wide"
             inputBg="bg-slate-100"
             type="text"
             name="title"
@@ -167,10 +169,11 @@ export default function NewTasks({ formState, setFormState }) {
 
         {/* Description  */}
         <div className="field w-full mb-[5px]">
+          <label htmlFor="description" className="job-label">Description</label>
           <InputCom
             fieldClass="px-6"
-            label="Description"
-            labelClass="tracking-wide"
+            // label="Description"
+            // labelClass="tracking-wide"
             inputBg="bg-slate-100"
             type="text"
             name="description"
@@ -186,7 +189,7 @@ export default function NewTasks({ formState, setFormState }) {
           <div className="w-full">
             <label
               htmlFor="Job Delivery Details"
-              className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
+              className='job-label'
             >
               Job Delivery Details
               {/* {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>} */}
diff --git a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
index fe422ba..85ee1b7 100644
--- a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
@@ -5,7 +5,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
 
 const FamilyWaitlist = memo(
-  ({ familyData, className, accountDetails, loader }) => {
+  ({ familyData, className, accountDetails, loader, setUpdatePage }) => {
     const [popUp, setPopUp] = useState({ show: false, data: {} });
     const [continueTaskPopup, setContinueTaskPopup] = useState({
       show: false,
@@ -144,6 +144,7 @@ const FamilyWaitlist = memo(
             details={continueTaskPopup.data}
             action={closeContinueTaskPopup}
             situation={continueTaskPopup.show}
+            setUpdatePage={setUpdatePage}
           />
         )}
       </div>
diff --git a/src/components/jobPopout/popoutcomponent/Detail.jsx b/src/components/jobPopout/popoutcomponent/Detail.jsx
index 9088868..21a1b92 100644
--- a/src/components/jobPopout/popoutcomponent/Detail.jsx
+++ b/src/components/jobPopout/popoutcomponent/Detail.jsx
@@ -3,7 +3,7 @@ import React from 'react'
 function Detail({label, value, bg,}) {
   return (
     <>
-        <label className='w-full md:w-1/4 text-slate-900 dark:text-white tracking-wide font-semibold'>{label}</label>
+        <label className='job-label w-full md:w-1/4'>{label}</label>
         <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white ${bg ? bg : null}`}>{value}</p>
     </>
   )
diff --git a/src/index.css b/src/index.css
index e58faf9..bab65f2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -152,6 +152,12 @@
   --toastify-color-success: #f539f8;
 }
 
+@layer components{
+  .job-label{
+    @apply text-slate-900 dark:text-white tracking-wide font-semibold
+  }
+}
+
 /* =====================  EXTRA ===================== */
 .bottomMargin {
   margin-bottom: 15px;

From 5a6b60578e89bf187b489ad1f666bc0e4bc18f8c Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 18 Mar 2024 13:44:56 +0100
Subject: [PATCH 2/2] clean up

---
 .../FamilyAcc/FamilyPopout/AssignTaskPopout.jsx       | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
index b815147..33c766c 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
@@ -165,41 +165,33 @@ const AssignTaskPopout = ({
     apiCall
       .assignFamilyTask(reqData)
       .then((res) => {
-        console.log("Assign task 1", res);
         if (res.status != 200 || res.data.internal_return < 0) {
-          console.log("Assign task 2");
           setRequestStatus({
             loading: false,
             status: false,
             message: "failed to assign task",
           });
-          console.log("Assign task 3");
 
           return setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
           }, 5000);
         }
         if (res.status === 200) {
-          console.log("Assign task 4");
 
           setRequestStatus({
             loading: false,
             status: true,
             message: "action successful",
           });
-          console.log("Assign task 5");
 
           setUpdatePage(prev => !prev); // Updates family task page by calling the useeffect hook
-          console.log("Assign task 6");
 
           dispatch(tableReload({ type: "WALLETTABLE" })); // RELOADS USER WALLET
-          console.log("Assign task 7");
 
           setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
             action(); // FUNCTION THAT CLOSES THE MODAL BOX
           }, 5000);
-          console.log("Assign task 8");
         }
       })
       .catch((err) => {
@@ -209,7 +201,6 @@ const AssignTaskPopout = ({
           message: "An Error occured, try again",
         });
 
-        console.log("This is a test error " + err);
         setTimeout(() => {
           setRequestStatus({ loading: false, status: false, message: "" });
         }, 5000);
@@ -226,8 +217,6 @@ const AssignTaskPopout = ({
     }
   },[])
 
-  console.log('NAME', selectedFamilyUid)
-
   return (
     <>
       <ModalCom action={action} situation={situation}>