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,16 +108,9 @@ const NotificationsPopOver = () => {
 					(data.ticket.userId !== userId && data.ticket.userId)
 				)
 					return;
-				showDesktopNotification(data);
+				else {
-			}
+					// show desktop notification
-		});
+					const { message, contact, ticket } = data;
-
-		return () => {
-			socket.disconnect();
-		};
-	}, [userId]);
-
-	const showDesktopNotification = ({ message, contact, ticket }) => {
 					const options = {
 						body: `${message.body} - ${format(new Date(), "HH:mm")}`,
 						icon: contact.profilePicUrl,
@@ -130,6 +123,7 @@ const NotificationsPopOver = () => {
 
 					notification.onclick = function (event) {
 						event.preventDefault(); //
+						window.focus();
 						history.push(`/tickets/${ticket.id}`);
 					};
 
@@ -140,7 +134,14 @@ const NotificationsPopOver = () => {
 					});
 
 					soundAlert.current.play();
+				}
+			}
+		});
+
+		return () => {
+			socket.disconnect();
 		};
+	}, [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 {