handle modal visibility with React state instead of Bootstrap

src/components/Project/Infrastructure/WorkItem.jsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from "react";
 import { useModal } from "../../../ModalContext";
 import AssignRoleModel from "../AssignRole";
 import { useParams } from "react-router-dom";
-import GlobalModel from "../../common/GlobalModel";
 
 const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
   const { projectId } = useParams();
@@ -22,7 +21,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
 
   useEffect(() => {
     setNewWorkItem(workItem);
-  }, [workItem]); // This hook will run whenever the workItem prop changes
+  }, [workItem]);
 
   let assigndata = {
     building: forBuilding,
@@ -33,22 +32,24 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
 
   const hasWorkItem = NewWorkItem && NewWorkItem;
   useEffect(() => {
-    const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    const tooltipTriggerList = Array.from(
+      document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    );
     tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
   }, []);
-  
 
   return (
     <>
-      <GlobalModel
-        isOpen={isModalOpen}
-        closeModal={closeModal}
-        dialogClass="modal-dialog-centered"
-        role="document"
-        size="lg"
+      <div
+        className={`modal fade ${isModalOpen ? "show" : ""}`}
+        tabIndex="-1"
+        role="dialog"
+        style={{ display: isModalOpen ? "block" : "none" }}
+        aria-hidden={!isModalOpen}
       >
         <AssignRoleModel assignData={assigndata} onClose={closeModal} />
-      </GlobalModel>
+      </div>
+
       <tr>
         <td className="text-start table-cell-small">
           <i className="bx bx-right-arrow-alt"></i>
@@ -75,7 +76,6 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         <td className="text-center d-none d-md-table-cell">
           {NewWorkItem?.workItem?.completedWork}
         </td>
-        {/* ************************************************ */}
         <td className="text-center" style={{ width: "15%" }}>
           <div className="progress p-0">
             <div
@@ -99,7 +99,6 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
             ></div>
           </div>
         </td>
-        {/* for greather than mobile view */}
         <td className="d-none d-md-table-cell">
           <div className="dropdown">
             {!projectId && (
@@ -134,14 +133,16 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
               type="button"
               className="btn p-0 dropdown-toggle hide-arrow"
             >
-              <i className="bx bx-trash me-1 text-danger"    data-bs-toggle="tooltip"
+              <i
+                className="bx bx-trash me-1 text-danger"
+                data-bs-toggle="tooltip"
                 data-bs-placement="top"
                 title="Delete Activity"
-                data-bs-original-title="Delete Activity"></i>
+                data-bs-original-title="Delete Activity"
+              ></i>
             </button>
           </div>
         </td>
-        {/* for mobile view */}
         <td className="text-end d-sm-none d-sm-table-cell">
           <div className="d-flex align-items-center justify-content-center ">
             <a
@@ -159,14 +160,19 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
               </a>
               <a className="dropdown-item">
                 {" "}
-                <i className="bx bx-trash me-1 text-danger" ></i>Delete
+                <i className="bx bx-trash me-1 text-danger"></i>Delete
               </a>
-              {!projectId && ( <a className="dropdown-item"  data-bs-toggle="modal"
-                data-bs-target="#project-modal"
-                onClick={openModal}>
-                {" "}
-                <i className="bx bx-task me-1 text-info" ></i>Assign
-              </a> )}
+              {!projectId && (
+                <a
+                  className="dropdown-item"
+                  data-bs-toggle="modal"
+                  data-bs-target="#project-modal"
+                  onClick={openModal}
+                >
+                  {" "}
+                  <i className="bx bx-task me-1 text-info"></i>Assign
+                </a>
+              )}
             </div>
           </div>
         </td>