diff --git a/frontend/src/components/NotificationsPopOver/index.js b/frontend/src/components/NotificationsPopOver/index.js
index 2b90b3e..23784d0 100644
--- a/frontend/src/components/NotificationsPopOver/index.js
+++ b/frontend/src/components/NotificationsPopOver/index.js
@@ -1,5 +1,6 @@
import React, { useState, useRef, useCallback, useEffect } from "react";
+import { useHistory } from "react-router-dom";
import { format } from "date-fns";
import openSocket from "socket.io-client";
@@ -14,8 +15,6 @@ import ChatIcon from "@material-ui/icons/Chat";
import TicketListItem from "../TicketListItem";
-// import { toast } from "react-toastify";
-import { useHistory } from "react-router-dom";
import { i18n } from "../../translate/i18n";
import useTickets from "../../hooks/useTickets";
@@ -46,7 +45,8 @@ const NotificationsPopOver = () => {
const history = useHistory();
const userId = +localStorage.getItem("userId");
const soundAlert = useRef(new Audio(require("../../assets/sound.mp3")));
- const ticketId = +history.location.pathname.split("/")[2];
+ const ticketIdUrl = +history.location.pathname.split("/")[2];
+ const ticketIdRef = useRef(ticketIdUrl);
const anchorEl = useRef();
const [isOpen, setIsOpen] = useState(false);
const [notifications, setNotifications] = useState([]);
@@ -65,8 +65,13 @@ const NotificationsPopOver = () => {
setNotifications(tickets);
}, [tickets]);
+ useEffect(() => {
+ ticketIdRef.current = ticketIdUrl;
+ }, [ticketIdUrl]);
+
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+
socket.emit("joinNotification");
socket.on("ticket", data => {
@@ -84,8 +89,8 @@ const NotificationsPopOver = () => {
socket.on("appMessage", data => {
if (
- (data.action === "create" && data.ticket.userId === userId) ||
- !data.ticket.userId
+ data.action === "create" &&
+ (data.ticket.userId === userId || !data.ticket.userId)
) {
setNotifications(prevState => {
const ticketIndex = prevState.findIndex(t => t.id === data.ticket.id);
@@ -97,8 +102,8 @@ const NotificationsPopOver = () => {
});
if (
- (ticketId &&
- data.message.ticketId === +ticketId &&
+ (ticketIdRef.current &&
+ data.message.ticketId === ticketIdRef.current &&
document.visibilityState === "visible") ||
(data.ticket.userId !== userId && data.ticket.userId)
)
@@ -110,7 +115,7 @@ const NotificationsPopOver = () => {
return () => {
socket.disconnect();
};
- }, [history, ticketId, userId]);
+ }, [userId]);
const showDesktopNotification = ({ message, contact, ticket }) => {
const options = {
@@ -125,7 +130,7 @@ const NotificationsPopOver = () => {
notification.onclick = function (event) {
event.preventDefault(); //
- window.open(`/tickets/${ticket.id}`, "_self");
+ history.push(`/tickets/${ticket.id}`);
};
document.addEventListener("visibilitychange", () => {
@@ -182,8 +187,6 @@ const NotificationsPopOver = () => {
No tickets with unread messages.
) : (
- notifications &&
- notifications.length > 0 &&
notifications.map(ticket => (