Avoid calling UserRoles and Employess api multiple times from Infra page

src/components/Project/Infrastructure/WorkItem.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useModal } from "../../../ModalContext";
 import AssignRoleModel from "../AssignRole";
 import { useParams } from "react-router-dom";
-import EditActivityModal from "./EditActivityModal";
+//import EditActivityModal from "./EditActivityModal";
 import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
 import { MANAGE_TASK } from "../../../utils/constants";
 
@@ -46,29 +46,33 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
   const closeModal1 = () => setShowModal(false);
   return (
     <>
-      <div
-        className={`modal fade ${isModalOpen ? "show" : ""}`}
-        tabIndex="-1"
-        role="dialog"
-        style={{ display: isModalOpen ? "block" : "none" }}
-        aria-hidden={!isModalOpen}
-      >
-        <AssignRoleModel assignData={assigndata} onClose={closeModal} />
-      </div>
+      {showModal && (
+        <div
+          className={`modal fade ${isModalOpen ? "show" : ""}`}
+          tabIndex="-1"
+          role="dialog"
+          style={{ display: isModalOpen ? "block" : "none" }}
+          aria-hidden={!isModalOpen}
+        >
+          <AssignRoleModel assignData={assigndata} onClose={closeModal} />
+        </div>
+      )}
 
-      <div
+      {/* <div
         className={`modal fade ${showModal ? "show" : ""}`}
         tabIndex="-1"
         role="dialog"
         style={{ display: showModal ? "block" : "none" }}
         aria-hidden={!showModal}
       >
-        <EditActivityModal workItem={workItem}
+        <EditActivityModal
+          workItem={workItem}
           workArea={forWorkArea}
           building={forBuilding}
           floor={forFloor}
-          onClose={ closeModal1} />
-      </div>
+          onClose={closeModal1}
+        />
+      </div> */}
 
       <tr>
         <td className="text-start table-cell-small">
@@ -121,7 +125,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         </td>
         <td className="d-none d-md-table-cell">
           <div className="dropdown">
-          {!projectId && ManageTasks && (
+            {!projectId && ManageTasks && (
               <button
                 aria-label="Modify"
                 type="button"