diff --git a/frontend/src/components/NotificationsPopOver/index.js b/frontend/src/components/NotificationsPopOver/index.js index b1ee0d3..2b90b3e 100644 --- a/frontend/src/components/NotificationsPopOver/index.js +++ b/frontend/src/components/NotificationsPopOver/index.js @@ -49,7 +49,9 @@ const NotificationsPopOver = () => { const ticketId = +history.location.pathname.split("/")[2]; const anchorEl = useRef(); const [isOpen, setIsOpen] = useState(false); - // const [notifications, setNotifications] = useState([]); + const [notifications, setNotifications] = useState([]); + + const { tickets } = useTickets({ withUnreadMessages: "true" }); useEffect(() => { if (!("Notification" in window)) { @@ -59,12 +61,41 @@ const NotificationsPopOver = () => { } }, []); + useEffect(() => { + setNotifications(tickets); + }, [tickets]); + useEffect(() => { const socket = openSocket(process.env.REACT_APP_BACKEND_URL); socket.emit("joinNotification"); + socket.on("ticket", data => { + if (data.action === "updateUnread") { + setNotifications(prevState => { + const ticketIndex = prevState.findIndex(t => t.id === data.ticketId); + if (ticketIndex !== -1) { + prevState.splice(ticketIndex, 1); + return [...prevState]; + } + return prevState; + }); + } + }); + socket.on("appMessage", data => { - if (data.action === "create") { + if ( + (data.action === "create" && data.ticket.userId === userId) || + !data.ticket.userId + ) { + setNotifications(prevState => { + const ticketIndex = prevState.findIndex(t => t.id === data.ticket.id); + if (ticketIndex !== -1) { + prevState[ticketIndex] = data.ticket; + return [...prevState]; + } + return [data.ticket, ...prevState]; + }); + if ( (ticketId && data.message.ticketId === +ticketId && @@ -81,8 +112,6 @@ const NotificationsPopOver = () => { }; }, [history, ticketId, userId]); - const { tickets: notifications } = useTickets({ withUnreadMessages: "true" }); - const showDesktopNotification = ({ message, contact, ticket }) => { const options = { body: `${message.body} - ${format(new Date(), "HH:mm")}`, diff --git a/frontend/src/components/TicketsList/index.js b/frontend/src/components/TicketsList/index.js index ed922e6..da436d2 100644 --- a/frontend/src/components/TicketsList/index.js +++ b/frontend/src/components/TicketsList/index.js @@ -96,6 +96,7 @@ const reducer = (state, action) => { if (ticketIndex !== -1) { state[ticketIndex].unreadMessages = 0; } + return [...state]; } @@ -108,6 +109,7 @@ const reducer = (state, action) => { } else { state.unshift(ticket); } + return [...state]; } @@ -119,6 +121,7 @@ const reducer = (state, action) => { state[ticketIndex] = ticket; state.unshift(state.splice(ticketIndex, 1)[0]); } + return [...state]; } @@ -128,6 +131,7 @@ const reducer = (state, action) => { if (ticketIndex !== -1) { state.splice(ticketIndex, 1); } + return [...state]; }