feat: added transfer ticket option on frontend

frontend/src/components/TicketOptionsMenu/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { toast } from "react-toastify";
 
@@ -12,7 +12,14 @@ import TransferTicketModal from "../TransferTicketModal";
 
 const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 	const [confirmationOpen, setConfirmationOpen] = useState(false);
-	const [TicketOpen, setTicketOpen] = useState(false);
+	const [transferTicketModalOpen, setTransferTicketModalOpen] = useState(false);
+	const isMounted = useRef(true);
+
+	useEffect(() => {
+		return () => {
+			isMounted.current = false;
+		};
+	}, []);
 
 	const handleDeleteTicket = async () => {
 		try {
@@ -36,6 +43,17 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 		handleClose();
 	};
 
+	const handleOpenTransferModal = e => {
+		setTransferTicketModalOpen(true);
+		handleClose();
+	};
+
+	const handleCloseTransferTicketModal = () => {
+		if (isMounted.current) {
+			setTransferTicketModalOpen(false);
+		}
+	};
+
 	return (
 		<>
 			<Menu
@@ -57,9 +75,9 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 				<MenuItem onClick={handleOpenConfirmationModal}>
 					{i18n.t("ticketOptionsMenu.delete")}
 				</MenuItem>
-				<MenuItem
-				onClick={e => setTicketOpen(true)}
-				>{i18n.t("ticketOptionsMenu.transfer")}</MenuItem>
+				<MenuItem onClick={handleOpenTransferModal}>
+					{i18n.t("ticketOptionsMenu.transfer")}
+				</MenuItem>
 			</Menu>
 			<ConfirmationModal
 				title={`${i18n.t("ticketOptionsMenu.confirmationModal.title")}${
@@ -74,20 +92,10 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 				{i18n.t("ticketOptionsMenu.confirmationModal.message")}
 			</ConfirmationModal>
 			<TransferTicketModal
-				title={`${i18n.t("ticketOptionsMenu.confirmationModal.title")}${
-					ticket.id
-				} ${i18n.t("ticketOptionsMenu.confirmationModal.titleFrom")} ${
-					ticket.contact.name
-				}?`}
-				modalOpen={TicketOpen}
-				onClose={e => setTicketOpen(false)}
-				contactId = {ticket.contactId}
-				ticketid = {ticket.id}
-
-			>
-
-			</TransferTicketModal>
-
+				modalOpen={transferTicketModalOpen}
+				onClose={handleCloseTransferTicketModal}
+				ticketid={ticket.id}
+			/>
 		</>
 	);
 };