implemented api and fixed interface bug

src/components/jobPopout/EditJobPopout.jsx

@@ -1,11 +1,13 @@
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ModalCom from "../Helpers/ModalCom";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import usersService from "../../services/UsersService";
+import { useNavigate } from "react-router-dom";
 
-const EditJobPopOut = ({ details, onClose, situation }) => {
+const EditJobPopOut = ({ details, onClose, situation, country }) => {
   let [requestStatus, setRequestStatus] = useState({
     loading: false,
     status: false,
@@ -41,7 +43,7 @@ const EditJobPopOut = ({ details, onClose, situation }) => {
 
   let initialValues = {
     // initial values for formik
-    country: details?.country,
+    country: country,
     price: details?.price,
     title: details?.title,
     description: details?.description,
@@ -49,7 +51,34 @@ const EditJobPopOut = ({ details, onClose, situation }) => {
     timeline_days: details?.timeline_days,
   };
 
-  console.log(details);
+  const jobApi = useMemo(() => new usersService(), []);
+  const navigate = useNavigate();
+
+  const handleEditJob = useCallback(
+    async (values) => {
+      setRequestStatus({ loading: true, message: "" });
+      let reqData = {
+        job_id: details.job_id,
+        job_uid: details.job_uid,
+        ...values,
+      };
+      try {
+        let res = await jobApi.jobManagerUpdateJob(reqData);
+        let { data } = await res;
+        if (data?.internal_return < 0) return;
+        setRequestStatus({ loading: false, message: null });
+        setTimeout(() => {
+          navigate("/myjobs", { replace: true });
+          onClose();
+        }, 1000);
+      } catch (error) {
+        setRequestStatus({ loading: false, message: error });
+        throw new Error(error);
+      }
+    },
+    [jobApi, navigate, onClose, details]
+  );
+
   return (
     <ModalCom action={onClose} situation={situation} className="edit-popup">
       <div className="logout-modal-wrapper lg:w-[600px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
@@ -87,6 +116,7 @@ const EditJobPopOut = ({ details, onClose, situation }) => {
           <Formik
             initialValues={initialValues}
             validationSchema={validationSchema}
+            onSubmit={handleEditJob}
           >
             {(props) => (
               <Form className="w-full">
@@ -94,26 +124,19 @@ const EditJobPopOut = ({ details, onClose, situation }) => {
                   <div className="fields w-full">
                     <div className="xl:flex xl:space-x-7 mb-6">
                       <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 block"
-                        >
-                          Country
-                        </label>
-                        <select
-                          id="country"
+                        <InputCom
+                          fieldClass="px-6 cursor-default"
+                          label="Country"
+                          labelClass="tracking-wide"
+                          inputBg="bg-slate-100"
+                          inputClass="input-curve lg border border-light-purple"
+                          type="text"
                           name="country"
                           value={props.values.country}
-                          className={`input-field py-2 px-6 mt-3 rounded-[50px] 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}
-                          onBlur={props.handleBlur}
-                          disabled
-                        >
-                          <option
-                            className="text-slate-500 text-lg"
-                            value={props.values.country}
-                          />
-                        </select>
+                          inputHandler={props.handleChange}
+                          blurHandler={props.handleBlur}
+                          disable={true}
+                        />
                         {props.errors.country && props.touched.country && (
                           <p className="text-sm text-red-500">
                             {props.errors.country}