I'm currently building a chat application in React JS and I've been going crazy with this problem for the past two days. I want to make it so that whenever there is a new message, a browser notification appears.
The problem is that I only receive notifications when I send a message, not when someone else sends a message. The actual situation should be the opposite.
I'm using the react-push-notification npm package to achieve this.
Chat.js:
import { useEffect, useState } from "react"; import { addDoc, collection, serverTimestamp, onSnapshot, query, where, orderBy } from "firebase/firestore"; import { auth, db } from "../firebase-config"; import "../styles/Chat.css"; import IDLogo from "../images/IDLogo.png"; import notificationSound from "../sounds/message_sound.mp3"; import addNotification from "react-push-notification"; import DefaultProfilePicture from "../images/default_pfp.jpeg"; export const Chat = props => { const { room } = props; const [newMessage, setNewMessage] = useState(); const [messages, setMessages] = useState([]); const messagesRef = collection(db, "messages"); useEffect(() => { const queryMessages = query(messagesRef, where("room", "==", room), orderBy("createdAt")); const unsubscribe = onSnapshot(queryMessages, snapshot => { let messages = []; snapshot.forEach(doc => { messages.push({ ...doc.data(), id: doc.id }); }); setMessages(messages); }); return () => unsubscribe(); }, []); useEffect(() => { const messagesContainer = messagesRef.current; messagesContainer.scrollTop = messagesContainer.scrollHeight; }, [messagesRef]); const handleSubmit = async e => { e.preventDefault(); if (newMessage === "") return; const currentUser = auth.currentUser; await addDoc(messagesRef, { text: newMessage, createdAt: serverTimestamp(), user: currentUser.displayName, profilePicture: currentUser.photoURL, room, }); if (newMessage && newMessage.user !== auth.currentUser.displayName) { addNotification({ title: "New Message", message: newMessage.text, duration: 5000, native: true, icon: IDLogo, }); } setNewMessage(""); }; useEffect(() => { const audio = new Audio(notificationSound); const lastMessage = messages[messages.length - 1]; if (lastMessage && lastMessage.user !== auth.currentUser.displayName) { audio.play(); } }, [messages]); return ( <div className='chat'> <div className='header'> <h1> Welcome to: <span className='Chat__room--title'>{room.toUpperCase()}</span> </h1> </div> <div ref={messagesRef} className='messages'> {messages.map(message => ( <p className='Chat__message'> {message.profilePicture ? ( <img className='profile__picture' referrerpolicy='no-referrer' src={message.profilePicture} alt={message.user} /> ) : ( <img className='profile__picture' src={DefaultProfilePicture} alt={message.user}></img> )} {message.user} : {message.text} </p> ))} </div> <div className='send__message__container'> <form onSubmit={handleSubmit} className='new__message__form'> <input spellCheck='false' onChange={e => setNewMessage(e.target.value)} className='new__message__input' placeholder='Type a message here...' value={newMessage} /> <button type='submit' className='signOut--sendMessage__button'> Send </button> </form> </div> </div> ); };
Just move the add notification function out of the handle submission function:
Take it to the next useEffect: