marco.pms.web/src/components/master/MasterModal.jsx

import React, { useState, useEffect } from "react";

import CreateRole from "./CreateRole";
import DeleteMaster from "./DeleteMaster";
import EditRole from "./EditRole";
import CreateJobRole from "./CreateJobRole";
import EditJobRole from "./EditJobRole";
import CreateActivity from "./CreateActivity";
import EditActivity from "./EditActivity";
import ConfirmModal from "../common/ConfirmModal";
import {MasterRespository} from "../../repositories/MastersRepository";
import {cacheData, getCachedData} from "../../slices/apiDataManager";
import showToast from "../../services/toastService";
import CreateWorkCategory from "./CreateWorkCategory";
import EditWorkCategory from "./EditWorkCategory";
import CreateCategory from "./CreateContactCategory";
import CreateContactTag from "./CreateContactTag";
import EditContactTag from "./EditContactTag";


const MasterModal = ({ modaldata, closeModal }) => {
  const [ isDeleteModalOpen, setIsDeleteModalOpen ] = useState( false );

  const handleSelectedMasterDeleted = async () =>
  { 
    const deleteFn = MasterRespository[modaldata.masterType];
    if (!deleteFn) {
      showToast(`No delete strategy defined for master type`,"error");
      return false;
    }
     try
     {  
       const response = await deleteFn( modaldata?.item?.id ); 
       const selected_cachedData = getCachedData( modaldata?.masterType );
       const updated_master =  selected_cachedData?.filter(item => item.id !== modaldata?.item.id);
       cacheData( modaldata?.masterType, updated_master )

       showToast(`${modaldata?.masterType} is deleted successfully`, "success");
       handleCloseDeleteModal()
       
     } catch ( error )
     {
       const message = error.response.data.message || error.message || "Error occured api during call"
       showToast(message, "success");
    }
  }


  useEffect(() => {
    if (modaldata?.modalType === "delete") {
      setIsDeleteModalOpen(true);
    }
  }, [modaldata]);

  const handleCloseDeleteModal = () => {
    setIsDeleteModalOpen(false);
    closeModal(); 
  };

  if (modaldata?.modalType === "delete" && isDeleteModalOpen) {
    return (
      <div
        className="modal fade show"
        tabIndex="-1"
        role="dialog"
        style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}
        aria-hidden="false"
      >
        <ConfirmModal
          type="delete"
          header={`Delete ${modaldata.masterType}`}
          message={"Are you sure you want delete?"}
          onSubmit={handleSelectedMasterDeleted}
          onClose={handleCloseDeleteModal}
        />
      </div>
    );
  }
  return (
    <div
      className="modal fade"
      id="master-modal"
      tabIndex="-1"
      aria-hidden="true"
      role="dialog"
      aria-labelledby="modalToggleLabel"
    >
      <div
        className={`modal-dialog mx-sm-auto mx-1 ${
          ["Application Role", "Edit-Application Role"].includes(modaldata?.modalType)
            ? "modal-lg"
            : "modal-md"
        } modal-simple`}
      >
        <div className="modal-content">
          <div className="modal-body p-sm-4 p-0">
            <div className="d-flex justify-content-between">
              <h6>{ `${modaldata?.modalType} `}</h6>
               <button
              type="button"
              className="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
              onClick={closeModal}
            ></button>
           </div>

            {modaldata.modalType === "Application Role" && (
              <CreateRole masmodalType={modaldata.masterType} onClose={closeModal} />
            )}
            {modaldata.modalType === "Edit-Application Role" && (
              <EditRole master={modaldata} onClose={closeModal} />
            )}
            {modaldata.modalType === "Job Role" && (
              <CreateJobRole onClose={closeModal} />
            )}
            {modaldata.modalType === "Edit-Job Role" && (
              <EditJobRole data={modaldata.item} onClose={closeModal} />
            )}
            {modaldata.modalType === "Activity" && (
              <CreateActivity onClose={closeModal} />
            )}
            {modaldata.modalType === "Edit-Activity" && (
              <EditActivity activityData={modaldata.item} onClose={closeModal} />
            )}
            {modaldata.modalType === "Work Category" && (
              <CreateWorkCategory onClose={closeModal} />
            )}
            {modaldata.modalType === "Edit-Work Category" && (
              <EditWorkCategory data={modaldata.item} onClose={closeModal} />
            )}
            {modaldata.modalType === "Contact Category" && (
              <CreateCategory data={modaldata.item} onClose={closeModal} />
            )}
             {modaldata.modalType === "Contact Tag" && (
              <CreateContactTag data={modaldata.item} onClose={closeModal} />
            )}
            {modaldata.modalType === "Edit-Contact Tag" && (
              <EditContactTag data={modaldata.item} onClose={closeModal} />
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default MasterModal;