improvement: focus app when clicking desktop notification

frontend/src/components/MessagesList/index.js

@@ -338,7 +338,7 @@ const MessagesList = () => {
 			}
 
 			if (data.action === "delete") {
-				toast.success("The deleted sucessfully.");
+				toast.success("Ticket deleted sucessfully.");
 				history.push("/tickets");
 			}
 		});

frontend/src/components/NotificationsPopOver/index.js

@@ -108,39 +108,40 @@ const NotificationsPopOver = () => {
 					(data.ticket.userId !== userId && data.ticket.userId)
 				)
 					return;
-				showDesktopNotification(data);
+				else {
+					// show desktop notification
+					const { message, contact, ticket } = data;
+					const options = {
+						body: `${message.body} - ${format(new Date(), "HH:mm")}`,
+						icon: contact.profilePicUrl,
+						tag: ticket.id,
+					};
+					let notification = new Notification(
+						`${i18n.t("tickets.notification.message")} ${contact.name}`,
+						options
+					);
+
+					notification.onclick = function (event) {
+						event.preventDefault(); //
+						window.focus();
+						history.push(`/tickets/${ticket.id}`);
+					};
+
+					document.addEventListener("visibilitychange", () => {
+						if (document.visibilityState === "visible") {
+							notification.close();
+						}
+					});
+
+					soundAlert.current.play();
+				}
 			}
 		});
 
 		return () => {
 			socket.disconnect();
 		};
-	}, [userId]);
-
-	const showDesktopNotification = ({ message, contact, ticket }) => {
-		const options = {
-			body: `${message.body} - ${format(new Date(), "HH:mm")}`,
-			icon: contact.profilePicUrl,
-			tag: ticket.id,
-		};
-		let notification = new Notification(
-			`${i18n.t("tickets.notification.message")} ${contact.name}`,
-			options
-		);
-
-		notification.onclick = function (event) {
-			event.preventDefault(); //
-			history.push(`/tickets/${ticket.id}`);
-		};
-
-		document.addEventListener("visibilitychange", () => {
-			if (document.visibilityState === "visible") {
-				notification.close();
-			}
-		});
-
-		soundAlert.current.play();
-	};
+	}, [history, userId]);
 
 	const handleClick = useCallback(() => {
 		setIsOpen(!isOpen);

frontend/src/components/TicketOptionsMenu/index.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { useHistory } from "react-router-dom";
 
 import { toast } from "react-toastify";
 
@@ -12,7 +11,6 @@ import ConfirmationModal from "../ConfirmationModal";
 
 const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 	const [confirmationOpen, setConfirmationOpen] = useState(false);
-	const history = useHistory();
 
 	const handleDeleteTicket = async () => {
 		try {