active jobs popout implemented

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -4,6 +4,7 @@ import dataImage2 from "../../assets/images/data-table-user-2.png";
 import dataImage3 from "../../assets/images/data-table-user-3.png";
 import dataImage4 from "../../assets/images/data-table-user-4.png";
 import SelectBox from "../Helpers/SelectBox";
+import ActiveJobsPopout from "../jobPopout/ActiveJobsPopout";
 
 import PaginatedList from "../Pagination/PaginatedList";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
@@ -12,6 +13,8 @@ export default function MyActiveJobTable({MyJobList, className }) {
     const filterCategories = ["All Categories", "Explore", "Featured"];
     const [selectedCategory, setCategory] = useState(filterCategories[0]);
 
+    let [jobPopout,setJobPopout] = useState({show:false, data:{}}) // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
+
     const [currentPage, setCurrentPage] = useState(0);
     const indexOfFirstItem = Number(currentPage);
     const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
@@ -79,6 +82,7 @@ export default function MyActiveJobTable({MyJobList, className }) {
                                             <td className="text-right py-4 px-2">
                                                 <button
                                                     type="button"
+                                                    onClick={()=>{setJobPopout({show:true, data:value})}}
                                                     className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                                                 >
                                                     View
@@ -97,6 +101,9 @@ export default function MyActiveJobTable({MyJobList, className }) {
                 {/* END OF PAGINATION BUTTON */}
             </div>
             }
+            {jobPopout.show &&
+                <ActiveJobsPopout details={jobPopout.data} onClose={()=>{setJobPopout({show:false, data:{}})}} />
+            }
         </div>
     );
 }