improvement: change notifications logic

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")}`,

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];
 	}