cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-20 04:39:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

improvement: clicking on desktop notification push to ticket without rendering

Browse Source
This commit is contained in:
canove
2020-09-25 20:22:36 -03:00
parent 72c3332401
commit 6c63abf29c
1 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/NotificationsPopOver/index.js
View File

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