Changed add job to modal

src/components/AddJob/AddJob.jsx

@@ -38,7 +38,7 @@ const validationSchema = Yup.object().shape({
     .required("Timeline is required"),
 });
 
-function AddJob() {
+function AddJob({popUpHandler}) {
   const ApiCall = new usersService();
   const navigate = useNavigate();
 
@@ -46,7 +46,7 @@ function AddJob() {
 
   let { userDetails } = useSelector((state) => state.userDetails);
 
-  let [pageLoading, setPageLoading] = useState(true); // State used for knowing when the page is mounting
+  // let [pageLoading, setPageLoading] = useState(true); // State used for knowing when the page is mounting
 
   let [country, setCountry] = useState({
     loading: true,
@@ -129,16 +129,9 @@ function AddJob() {
 
   useEffect(() => {
     getUserCountry();
-    setPageLoading(false);
   }, []);
 
-  return pageLoading.loading ? (
-    <div className="personal-info-tab w-full flex flex-col justify-between">
-      <div className="p-3">
-        <LoadingSpinner size="32" color="sky-blue" />
-      </div>
-    </div>
-  ) : (
+  return (
     <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
       <Formik
         initialValues={initialValues}
@@ -148,27 +141,15 @@ function AddJob() {
         {(props) => {
           return (
             <Form>
-              <h1 className="py-2 my-4 text-lg md:text-xl font-bold tracking-wide">
+              {/* <h1 className="py-2 my-4 text-lg md:text-xl font-bold tracking-wide">
                 Create New Job
-              </h1>
+              </h1> */}
               <div className="flex flex-col-reverse sm:flex-row">
                 <div className="fields w-full">
                   {/* inputs starts here */}
                   {/* country */}
                   <div className="xl:flex xl:space-x-7 mb-6">
                     <div className="field w-full mb-6 xl:mb-0">
-                      {/* <InputCom
-                          fieldClass="px-6 cursor-not-allowed"
-                          label="Country"
-                          labelClass='tracking-wide'
-                          inputBg = 'bg-slate-100'
-                          type="text"
-                          name="country"
-                          disable={true}
-                          value={country.loading ? 'loading' : country.data ? country.data : 'no country found!'}
-                          inputHandler={(e)=> setCountry((prev) => ({...prev, data:e.target.value}))}
-
-                      /> */}
                       <label
                         htmlFor="country"
                         className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
@@ -419,3 +400,11 @@ const publicArray = [
   { duration: 21, name: "3 weeks" },
   { duration: 28, name: "4 weeks" },
 ];
+
+// pageLoading.loading ? (
+//   <div className="personal-info-tab w-full flex flex-col justify-between">
+//     <div className="p-3">
+//       <LoadingSpinner size="32" color="sky-blue" />
+//     </div>
+//   </div>
+// ) :