error display name for timeline_days changed

src/components/AddJob/AddJob.jsx

@@ -10,10 +10,10 @@ import { Form, Formik } from "formik";
 import * as Yup from "yup";
 
 const validationSchema = Yup.object().shape({
-  country: Yup.string()
+  // country: Yup.string()
-    .min(1, "Minimum 3 characters")
+  //   .min(1, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
+  //   .max(25, "Maximum 25 characters")
-    .required("Country is required"),
+  //   .required("Country is required"),
   price: Yup.number()
     .typeError("you must specify a number")
     .min(1, "Price must be greater than 0")
@@ -36,15 +36,15 @@ const validationSchema = Yup.object().shape({
     .required("Timeline is required"),
 });
 
-// let initialValues = {
+let initialValues = {
-//   // initial values for formik
+  // initial values for formik
-//   country: "NG",
+  // country: "",
-//   price: 0,
+  price: 0,
-//   title: "",
+  title: "",
-//   description: "",
+  description: "",
-//   job_detail: "",
+  job_detail: "",
-//   timeline_days: "",
+  timeline_days: "",
-// };
+};
 
 function AddJob() {
   const ApiCall = new usersService();
@@ -57,19 +57,9 @@ function AddJob() {
   let [country, setCountry] = useState({
     loading: true,
     status: false,
-    data: [],
+    data: '',
   }); // To Hold the array of country getUserCountry returns
 
-  let initialValues = {
-    // initial values for formik
-    country: userDetails.country,
-    price: "",
-    title: "",
-    description: "",
-    job_detail: "",
-    timeline_days: "",
-  };
-
   let [requestStatus, setRequestStatus] = useState({
     loading: false,
     status: false,
@@ -82,24 +72,24 @@ function AddJob() {
     ApiCall.getSignupCountryData()
       .then((res) => {
         if (res.data.internal_return < 1) {
-          setCountry({ loading: false, status: true, data: [] });
+          setCountry({ loading: false, status: true, data: '' });
           return;
         }
         setCountry({
           loading: false,
           status: true,
-          data: res.data.signup_country,
+          data: res.data.signup_country?.find(item => item[0]==userDetails.country)[1],
         });
       })
       .catch((err) => {
-        setCountry({ loading: false, status: false, data: [] });
+        setCountry({ loading: false, status: false, data: '' });
       });
   };
 
   // FUNCTION TO HANDLE ADD JOB FORM
   const handleAddJob = (values, helpers) => {
     setRequestStatus({ loading: true, status: false, message: "" });
-    ApiCall.jobManagerCreateJob(values)
+    ApiCall.jobManagerCreateJob({...values, country:userDetails.country})
       .then((res) => {
         if (res.data.internal_return < 1) {
           setRequestStatus({
@@ -133,8 +123,8 @@ function AddJob() {
   };
 
   useEffect(() => {
-    getUserCountry();
     setPageLoading(false);
+    getUserCountry();
   }, []);
 
   return pageLoading.loading ? (
@@ -162,7 +152,7 @@ function AddJob() {
                   {/* country */}
                   <div className="xl:flex xl:space-x-7 mb-6">
                     <div className="field w-full mb-6 xl:mb-0">
-                      {/* <InputCom
+                      <InputCom
                           fieldClass="px-6 cursor-not-allowed"
                           label="Country"
                           labelClass='tracking-wide'
@@ -171,10 +161,10 @@ function AddJob() {
                           name="country"
                           disable={true}
                           value={country.loading ? 'loading' : country.data ? country.data : 'no country found!'}
-                          inputHandler={(e)=> setCountry((prev) => ({...prev, data:e.target.value}))}
+                          // inputHandler={(e)=> setCountry((prev) => ({...prev, data:e.target.value}))}
 
-                      /> */}
+                      />
-                      <label
+                      {/* <label
                         htmlFor="country"
                         className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
                       >
@@ -183,7 +173,6 @@ function AddJob() {
                       <select
                         id="country"
                         name="country"
-                        disabled
                         value={props.values.country}
                         className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
                         onChange={props.handleChange}
@@ -198,31 +187,27 @@ function AddJob() {
                             <option className="text-slate-500 text-lg" value="">
                               Select...
                             </option>
-                            {country.data.map((item, index) => {
+                            {country.data.map((item, index) => (
-                              if(item[0] == userDetails.country){
+                              <option
-                                return (
+                                key={index}
-                                  <option
+                                className="text-slate-500 text-lg"
-                                    key={index}
+                                value={item[0]}
-                                    className="text-slate-500 text-lg"
+                              >
-                                    value={item[0]}
+                                {item[1]}
-                                  >
+                              </option>
-                                    {item[1]}
+                            ))}
-                                  </option>
-                                )
-                              }
-                            })}
                           </>
                         ) : (
                           <option className="text-slate-500 text-lg" value="">
                             No Options Found! Try Again
                           </option>
                         )}
-                      </select>
+                      </select> */}
-                      {props.errors.country && props.touched.country && (
+                      {/* {props.errors.country && props.touched.country && (
                         <p className="text-sm text-red-500">
                           {props.errors.country}
                         </p>
-                      )}
+                      )} */}
                     </div>
 
                     {/* Price */}
@@ -234,7 +219,7 @@ function AddJob() {
                         inputBg="bg-slate-100"
                         type="number"
                         name="price"
-                        placeholder="0"
+                        // placeholder="Please Enter Amount"
                         value={props.values.price}
                         inputHandler={props.handleChange}
                         blurHandler={props.handleBlur}