Get browser notifications from anyone except the current authenticator. user

Question

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

Answer 1

Just move the add notification function out of the handle submission function:

if (newMessage && newMessage.user !== auth.currentUser.displayName) {
  addNotification({
    title: "New Message",
    message: newMessage.text,
    duration: 5000,
    native: true,
    icon: IDLogo,
  });
}

Take it to the next useEffect:

useEffect(() => {
const audio = new Audio(notificationSound);
const lastMessage = messages[messages.length - 1];

if (lastMessage && lastMessage.user !== auth.currentUser.displayName) {
  audio.play();
  addNotification({
   title: "New Message",
   message: newMessage.text,
   duration: 5000,
   native: true,
   icon: IDLogo,
  });
}}, [messages]);