popup closes

src/components/AddJob/AddJob.jsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import usersService from "../../services/UsersService";
 
 import { useSelector, useDispatch } from "react-redux";
 
-import { tableReload } from '../../store/TableReloads'
+import { tableReload } from "../../store/TableReloads";
 
 import { Field, Form, Formik } from "formik";
 import * as Yup from "yup";
@@ -38,16 +38,12 @@ const validationSchema = Yup.object().shape({
     .required("Timeline is required"),
 });
 
-function AddJob() {
+function AddJob({ popUpHandler }) {
   const ApiCall = new usersService();
-  const navigate = useNavigate();
-
-  let dispatch = useDispatch()
+  let dispatch = useDispatch();
 
   let { userDetails } = useSelector((state) => state.userDetails);
 
-  let [pageLoading, setPageLoading] = useState(true); // State used for knowing when the page is mounting
-
   let [country, setCountry] = useState({
     loading: true,
     status: false,
@@ -109,8 +105,8 @@ function AddJob() {
           message: "Job Added Successfully",
         });
         setTimeout(() => {
-          dispatch(tableReload({type:'JOBTABLE'}))
-          navigate("/myjobs", { replace: true });
+          dispatch(tableReload({ type: "JOBTABLE" }));
+          popUpHandler()
         }, 1000);
       })
       .catch((err) => {
@@ -129,16 +125,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 +137,12 @@ function AddJob() {
         {(props) => {
           return (
             <Form>
-              <h1 className="py-2 my-4 text-lg md:text-xl font-bold tracking-wide">
-                Create New Job
-              </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"

src/components/MyJobs/index.jsx

@@ -3,11 +3,12 @@ import { Link } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
+import AddJobPage from "../../views/AddJobPage";
 
 export default function MyJobs(props) {
-  const [selectTab, setValue] = useState("today");
-  const filterHandler = (value) => {
-    setValue(value);
+  const [popUp, setPopUp] = useState(false);
+  const popUpHandler = () => {
+    setPopUp((prev) => !prev);
   };
 
   return (
@@ -16,33 +17,27 @@ export default function MyJobs(props) {
       <div className="notification-page w-full mb-10">
         <div className="notification-wrapper w-full">
           {/* heading */}
-          <div className="sm:flex justify-between items-center mb-6">
+          <div className="sm:flex items-center mb-6">
             <div className="mb-5 sm:mb-0">
               <h1 className="text-26 font-bold flex items-center space-x-1  text-dark-gray dark:text-white gap-2">
-                <span
-                  className={`${selectTab === "today" ? "block" : "hidden"}`}
-                >
-                  My Jobs
-                </span>
+                <span>My Jobs</span>
 
-                <Link
-                  to="/add-job"
+                <button
                   className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
+                  onClick={popUpHandler}
                 >
                   Add Job
-                </Link>
+                </button>
               </h1>
             </div>
-            <div className="slider-btns flex space-x-4">
-              <div
-                onClick={() => filterHandler("today")}
-                className="relative"
-              ></div>
-            </div>
           </div>
           <MyJobTable MyJobList={props.MyJobList} />
         </div>
       </div>
+
+      {/* Add Job List Popout */}
+      {popUp && <AddJobPage action={popUpHandler} situation={popUp} />}
+      {/* End of Add Job List Popout */}
     </Layout>
   );
 }

src/index.css

@@ -883,4 +883,9 @@ TODO: Responsive ===========================
 
 .job-popup{
   top: 55px;
+}
+
+.addJob-popup{
+  top: 30px;
+  height: 55rem !important;
 }

src/views/AddJobPage.jsx

@@ -1,14 +1,40 @@
-import React from 'react'
-import AddJob from '../components/AddJob/AddJob'
-import Layout from '../components/Partials/Layout'
+import React from "react";
+import AddJob from "../components/AddJob/AddJob";
+import ModalCom from "../components/Helpers/ModalCom";
 
-
-function AddJobPage() {
+function AddJobPage({ action, situation }) {
   return (
-    <Layout>
-        <AddJob />
-    </Layout>
-  )
+    <ModalCom action={action} situation={situation} className="addJob-popup">
+      <div className="lg:w-[600px] w-full h-full lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white  ">
+        <div className="heading flex justify-between items-center py-6  md:px-[30px] px-[23px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
+          <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+            Create New Job
+          </p>
+          <button type="button" onClick={action}>
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 32 32"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M32 14.3645C32 15.5022 32 16.6399 32 17.7779C31.8143 17.8408 31.8787 18.0048 31.8565 18.1334C30.6952 24.8402 26.8853 29.2664 20.4091 31.362C19.4672 31.6668 18.4669 31.7917 17.4935 31.9997C16.3558 31.9997 15.2181 31.9997 14.0801 31.9997C13.8574 31.741 13.5279 31.7984 13.2475 31.7416C6.90872 30.4552 2.74424 26.7311 0.684152 20.6107C0.386668 19.7268 0.396442 18.7733 0 17.9199C0 16.6399 0 15.3598 0 14.0798C0.259 13.884 0.190585 13.5694 0.240675 13.3162C1.52285 6.84244 5.35655 2.66392 11.5936 0.623067C12.4549 0.34116 13.3785 0.343909 14.2221 0C15.3125 0 16.4029 0 17.4932 0C17.525 0.110258 17.6111 0.120948 17.7089 0.130417C24.2666 0.77242 29.8064 5.52819 31.449 11.9351C31.6552 12.739 31.8174 13.5542 32 14.3645ZM29.3431 16.0699C29.3718 8.68538 23.4154 2.66942 16.0684 2.66178C8.69759 2.65445 2.66972 8.58489 2.65353 15.8601C2.63704 23.2563 8.52319 29.2979 15.7868 29.3404C23.2862 29.3846 29.3144 23.4832 29.3431 16.0699Z"
+                fill="#374557"
+                fillOpacity="0.6"
+              />
+              <path
+                d="M14.1604 16.0221C12.3843 14.2567 10.6724 12.5534 8.95837 10.8525C8.53353 10.431 8.23421 9.97162 8.46175 9.34031C8.83956 8.29209 9.95101 8.07371 10.794 8.906C12.3611 10.4536 13.9344 11.9963 15.4529 13.5909C15.9202 14.0817 16.1447 14.0005 16.5662 13.5643C18.0961 11.9804 19.6617 10.4307 21.2282 8.88248C22.0596 8.06058 23.208 8.30064 23.5522 9.35008C23.7584 9.97865 23.459 10.4383 23.0336 10.8619C21.489 12.3991 19.9531 13.9443 18.4088 15.4815C18.2421 15.6476 18.0408 15.779 17.8188 15.9558C19.629 17.7563 21.366 19.4676 23.0831 21.1987C23.934 22.0567 23.6875 23.2106 22.6072 23.556C21.9658 23.761 21.5223 23.4186 21.1067 23.0023C19.5502 21.444 17.9757 19.9031 16.448 18.3171C16.0616 17.9157 15.8854 17.9811 15.5375 18.3378C13.9835 19.9318 12.399 21.4956 10.8242 23.0692C10.4015 23.4916 9.94887 23.7768 9.30961 23.516C8.27819 23.0948 8.06073 22.0814 8.87591 21.2418C10.0307 20.0528 11.2118 18.8891 12.3895 17.7221C12.9588 17.1577 13.5462 16.6106 14.1604 16.0221Z"
+                fill="#374557"
+                fillOpacity="0.6"
+              />
+            </svg>
+          </button>
+        </div>
+        <AddJob popUpHandler={action} />
+      </div>
+    </ModalCom>
+  );
 }
 
-export default AddJobPage
+export default AddJobPage;

src/views/MyJobsPage.jsx

@@ -4,7 +4,6 @@ import { useSelector } from "react-redux";
 export default function MyJobsPage() {
   let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
   const { userJobList } = useSelector((state) => state.userJobList);
-
   return (
     <>
       <MyJobs
@@ -13,4 +12,4 @@ export default function MyJobsPage() {
       />
     </>
   );
-}
+}