How to Make Notification System Using React and Firebase? - reactjs

Question

I'm using React and Firebase to create chat web app.
And I don't know how user can get notofications, when another user sent him a message in the chat.
Can someone tell me how to do it?
If you want to look at the whole project, here is github: https://github.com/PHILLyaHI/diplom-work/tree/main/React-Frontend/frontend
But for now, I’ll show the files below that I think are important for creating a notification system.
Input.js File with sending system
import React, { useContext, useState } from "react";
import Img from "../../static/chat/add-img.png";
import Attach from "../../static/chat/attach.png";
import { AuthContext } from "./AuthContext";
import { ChatContext } from "./ChatContext";
import {
arrayUnion,
doc,
serverTimestamp,
Timestamp,
updateDoc,
} from "firebase/firestore";
import { db, storage } from "../../firebase";
import { v4 as uuid } from "uuid";
import { getDownloadURL, ref, uploadBytesResumable } from "firebase/storage";
const Input = () => {
const [text, setText] = useState("");
const [img, setImg] = useState(null);
const { currentUser } = useContext(AuthContext);
const { data } = useContext(ChatContext);
const handleSend = async () => {
if (img) {
const storageRef = ref(storage, uuid());
const uploadTask = uploadBytesResumable(storageRef, img);
uploadTask.on(
(error) => {
//TODO:Handle Error
},
() => {
getDownloadURL(uploadTask.snapshot.ref).then(async (downloadURL) => {
await updateDoc(doc(db, "chats", data.chatId), {
messages: arrayUnion({
id: uuid(),
text,
senderId: currentUser.uid,
date: Timestamp.now(),
img: downloadURL,
}),
});
});
}
);
} else {
await updateDoc(doc(db, "chats", data.chatId), {
messages: arrayUnion({
id: uuid(),
text,
senderId: currentUser.uid,
date: Timestamp.now(),
}),
});
}
await updateDoc(doc(db, "userChats", currentUser.uid), {
[data.chatId + ".lastMessage"]: {
text,
},
[data.chatId + ".date"]: serverTimestamp(),
});
await updateDoc(doc(db, "userChats", data.user.uid), {
[data.chatId + ".lastMessage"]: {
text,
},
[data.chatId + ".date"]: serverTimestamp(),
});
setText("");
setImg(null);
};
return (
<div className="input">
<input
type="text"
placeholder="Type something..."
onChange={(e) => setText(e.target.value)}
value={text}
/>
<div className="send">
<img src={Attach} alt="" />
<input
type="file"
style={{ display: "none" }}
id="file"
onChange={(e) => setImg(e.target.files[0])}
/>
<label title="IMAGE SUPPOSE TO BE LESS THAN 250KB" htmlFor="file">
<img src={Img} alt="" />
</label>
<button onClick={handleSend}>Send</button>
</div>
</div>
);
};
export default Input;
Chats.js The sidebar with users.
import React, { useContext, useEffect, useState } from "react";
import { doc, onSnapshot } from "firebase/firestore";
import { AuthContext } from "./AuthContext";
import { db } from "../../firebase";
import { ChatContext } from "./ChatContext";
import addNotification from "react-push-notification";
const Chats = () => {
const [chats, setChats] = useState([]);
const {currentUser} = useContext(AuthContext);
const { dispatch } = useContext(ChatContext)
useEffect(() => {
const getChats = () => {
const unsub = onSnapshot(doc(db, "userChats", currentUser.uid), (doc) => {
setChats(doc.data())
});
return () => {
unsub();
};
};
currentUser.uid && getChats()
}, [currentUser.uid]);
const handleSelect = (u) => {
dispatch({type: "CHANGE_USER", payload: u})
}
return (
<div className="chats">
{Object.entries(chats)?.map((chat) => (
<div className="userChat" key={chat[0]} onClick={()=>handleSelect(chat[1].userInfo)}>
{chats?.unread && (
<small className="unread">New</small>
)}
<img src={chat[1].userInfo.photoURL} alt=""/>
<div className="userChatInfo">
<span>{chat[1].userInfo.displayName}</span>
<p>{chat[1].lastMessage?.text}</p>
</div>
</div>
))};
</div>
);
};
export default Chats;
AuthContext.js
import { createContext, useEffect, useState } from "react";
import { auth } from "../../firebase";
import { onAuthStateChanged } from "firebase/auth";
export const AuthContext = createContext();
export const AuthContextProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState({});
useEffect(() => {
const unsub = onAuthStateChanged(auth, (user) => {
setCurrentUser(user);
console.log(user);
});
return () => {
unsub();
};
}, []);
return (
<AuthContext.Provider value={{ currentUser }}>
{children}
</AuthContext.Provider>
);
};
import { createContext, useEffect, useState } from "react";
import { auth } from "../../firebase";
import { onAuthStateChanged } from "firebase/auth";
export const AuthContext = createContext();
export const AuthContextProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState({});
useEffect(() => {
const unsub = onAuthStateChanged(auth, (user) => {
setCurrentUser(user);
console.log(user);
});
return () => {
unsub();
};
}, []);
return (
<AuthContext.Provider value={{ currentUser }}>
{children}
</AuthContext.Provider>
);
};
ChatContext.js
import {
createContext,
useContext,
useReducer,
} from "react";
import { AuthContext } from "./AuthContext";
export const ChatContext = createContext();
export const ChatContextProvider = ({ children }) => {
const { currentUser } = useContext(AuthContext);
const INITIAL_STATE = {
chatId: "null",
user: {},
};
const chatReducer = (state, action) => {
switch (action.type) {
case "CHANGE_USER":
return {
user: action.payload,
chatId:
currentUser.uid > action.payload.uid
? currentUser.uid + action.payload.uid
: action.payload.uid + currentUser.uid,
};
default:
return state;
}
};
const [state, dispatch] = useReducer(chatReducer, INITIAL_STATE);
return (
<ChatContext.Provider value={{ data:state, dispatch }}>
{children}
</ChatContext.Provider>
);
};