Skip to content

Commit

Permalink
chat incoming messages
Browse files Browse the repository at this point in the history
  • Loading branch information
@Samyak-SH
Samyak-SH committed Sep 14, 2024
1 parent 0ad10a8 commit 1bea664
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 124 deletions.
246 changes: 125 additions & 121 deletions client/src/components/Negotiate/Chat.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,88 +25,110 @@ export default function Chat() {
const [prevRoomID, setPrevRoomID] = useState(null);
const [userType, setUserType] = useState('buyers');
const [contacts, setContacts] = useState(null);
const [message,setmessage]=useState();
const[messages, setMessages] = useState();
const [message, setmessage] = useState();
const [messages, setMessages] = useState([]);
const navigate = useNavigate();
const [currperson,setperson]=useState();
const [currperson, setperson] = useState();
const [loading, setLoading] = useState(true);

useEffect(()=>{
if(!currentUser){
const chatDisplayRef = useRef(null); // Ref to chat display container
const bottomRef = useRef(null); // Ref to the last message to scroll into view

useEffect(() => {
if (!currentUser) {
return;
}
//establish new socket connection
const newSocket = io.connect(`http://localhost:${SERVER_PORT}`);
setSocket(newSocket);

loadContacts(currentUser.uid, userType).then((result)=>{
loadContacts(currentUser.uid, userType).then((result) => {
setContacts(result);
setLoading(false);
})

console.log("current user id ", currentUser.uid);
// console.log("current user id ", currentUser.uid);

return () => {
console.log("disconnected");
// console.log("disconnected");
newSocket.disconnect();
};
},[currentUser])
}, [currentUser])

Check warning on line 56 in client/src/components/Negotiate/Chat.jsx

View workflow job for this annotation

GitHub Actions / Lint Client Code 

React Hook useEffect has a missing dependency: 'userType'. Either include it or remove the dependency array

useEffect(()=>{
if(contacts!=null){
useEffect(() => {
if (contacts != null) {
// console.log("contacts ", contacts);
}
},[contacts])
}, [contacts])

useEffect(()=>{
useEffect(() => {

//monitor events
if(socket){
if (socket) {
socket.on("connect", () => {
console.log("current socket ID:", socket.id); // Now it's guaranteed to be defined
// console.log("current socket ID:", socket.id); // Now it's guaranteed to be defined
});
socket.on("recieve-message", (received_message) => {
console.log("recieved message ", received_message.message, " from room ,", received_message.room);
setMessages((prevMessages) => [...prevMessages, received_message]);
socket.on("recieve-message", (data) => {
// console.log(data);
const newMessage = { user: data.user, text: data.text, room : data.room };
setMessages((prevMessages) => [...prevMessages, newMessage]);
});
socket.on("joined-room", (room)=>{
console.log(`${socket.id} joined room ${room}`);
socket.on("joined-room", (room) => {
// console.log(`${socket.id} joined room ${room}`);
})
socket.on("left-room", (room)=>{
console.log(`${socket.id} left room ${room}`);
socket.on("left-room", (room) => {
// console.log(`${socket.id} left room ${room}`);
})
}
return ()=>{
if(socket){
return () => {
if (socket) {
socket.off("connect");
socket.off("recieve-message");
socket.off("joined-room");
socket.off("left-room");
}
}
}, [socket])
}, [socket, messages])

useEffect(()=>{
useEffect(() => {
//switch rooms/contacts
if(socket){
switchRooms(socket, prevRoomID, currentRoomID);
loadMessage(currentRoomID).then((result)=>{setMessages(result)});
}
if (socket) {
switchRooms(socket, prevRoomID, currentRoomID);
loadMessage(currentRoomID).then((result) => { setMessages(result) });
}
}, [currentRoomID])

Check warning on line 99 in client/src/components/Negotiate/Chat.jsx

View workflow job for this annotation

GitHub Actions / Lint Client Code 

React Hook useEffect has missing dependencies: 'prevRoomID' and 'socket'. Either include them or remove the dependency array

useEffect(()=>{
console.log(messages);

useEffect(() => {
// console.log("messages array updated");
if (bottomRef.current) {
bottomRef.current.scrollIntoView({ behavior: 'smooth' });
}
}, [messages])


const handleClick = async ()=>{
//broadcast message
await socket.emit("send-message", {message : `message from ${socket.id}`, room:currentRoomID});
const handleClick = async (event) => {
if (message.trim()){
if(currentRoomID){
// Optimistically add the message to the messages state
const newMessage = { user: currentUser.uid, text: message, room : currentRoomID };

setMessages((prevMessages) => [...prevMessages, newMessage]);
// Clear input
event.target.value="";
setmessage('');
// Emit the message to the server
await socket.emit("send-message", newMessage);
// console.log("Sent message:", message);

// Upload message to Firebase
uploadMessage(currentRoomID, message, currentUser.uid);
}else{
console.log("select room");
}
}

//upload message to database
uploadMessage(currentRoomID,message,currentUser.uid);
}
};

const handleChange = (event) => {
setmessage(event.target.value);
};
Expand All @@ -120,67 +142,48 @@ export default function Chat() {
}

return (
<div className={styles.chitchat}>
<div className={styles.chatui}>
<div className={styles.cntlist}>
<div className={styles.profileinfo}>
<a onClick={()=>navigate()}><IoArrowBackOutline /></a>
<h1>Chats</h1>
</div>
<div className={styles.list}>
{/* <div className={styles.cnt1}>
<LuUserCircle2 />
<span>lavi</span>
<div className={styles.chitchat}>
<div className={styles.chatui}>
<div className={styles.cntlist}>
<div className={styles.profileinfo}>
<a onClick={() => navigate()}><IoArrowBackOutline /></a>
<h1>Chats</h1>
</div>
<div className={styles.cnt1}>
<LuUserCircle2 />
<span>supreeth</span>
</div>
<div className={styles.cnt1}>
<LuUserCircle2 />
<span>dilip</span>
</div>
<div className={styles.cnt1}>
<LuUserCircle2 />
<span>isha</span>
<div className={styles.list}>
{Object.keys(contacts).map((key) => {
const contact = contacts[key];
return (
<button
key={key}
onClick={() => {
// loadMessage(contact.roomID)
setPrevRoomID(currentRoomID);
setRoomID(contact.roomID);
setperson(`${contact.farmer_name}`)
}}
style={{ marginBottom: '10px', cursor: 'pointer', textAlign: 'center' }}
className={styles.cnt1}
>
<LuUserCircle2 />
<span>{contact.farmer_name}</span>
</button>
);
})}
</div>
<div className={styles.cnt1}>
<LuUserCircle2 />
<span>samyak</span>
</div> */}
{Object.keys(contacts).map((key) => {
const contact = contacts[key];
return (
<button
key={key}
onClick={() => {
// loadMessage(contact.roomID)
setPrevRoomID(currentRoomID);
setRoomID(contact.roomID);
setperson(`${contact.farmer_name}`)}}
style={{ marginBottom: '10px', cursor: 'pointer',textAlign:'center' }}
className={styles.cnt1}
>
<LuUserCircle2 />
<span>{contact.farmer_name}</span>
</button>
);
})}
</div>
</div>
<div className={styles.chat}>
<div className={styles.clientpfp}>
<span style={{display:'flex',gap:'15px'}}>
<span style={{position:'relative',top:'1vh'}}><LuUserCircle2 /></span>
{currperson}
<div className={styles.chat}>
<div className={styles.clientpfp}>
<span style={{ display: 'flex', gap: '15px' }}>
<span style={{ position: 'relative', top: '1vh' }}><LuUserCircle2 /></span>
{currperson}
</span>
<div className={styles.icons}>
<MdCall />
<IoVideocam />
<IoMdMore />
<div className={styles.icons}>
<MdCall />
<IoVideocam />
<IoMdMore />
</div>
</div>
</div>
<div className={styles.display}>
<div className={styles.display} ref={chatDisplayRef}>
{messages && messages.length > 0 ? (
messages.map((msg, index) => (
<div
Expand All @@ -193,46 +196,47 @@ export default function Chat() {
) : (
<div>No messages yet.</div>
)}
<div ref={bottomRef} /> {/* Scroll target */}
</div>
<div className={styles.send}>
<textarea
name="negotiate"
id="chat"
placeholder="Send a message"
onChange={handleChange}
/>
<Recorder />
<button onClick={handleClick}>Send</button>
</div>
<div className={styles.send}>
<textarea
name="negotiate"
id="chat"
placeholder="Send a message"
onChange={handleChange}
/>
<Recorder/>
<button onClick={handleClick}>Send</button>
</div>
</div>
</div>
</div>
);
}

const switchRooms = async (socket, prevRoomID, currentRoomID)=>{
const switchRooms = async (socket, prevRoomID, currentRoomID) => {
await socket.emit('leave-room', prevRoomID)
await socket.emit('join-room', currentRoomID);
}

const uploadMessage = async (currentRoomID,mess,userId)=>{
if(currentRoomID){
const uploadMessage = async (currentRoomID, mess, userId) => {
if (currentRoomID) {
try {
await addDoc(collection(db, 'chats', `${currentRoomID}`, 'messages'), {
message: `${mess}`,
timeStamp: new Date(),
// user: currentUser.uid,
user:`${userId}`
}).then(console.log("message sent"));
user: `${userId}`
})
// .then(console.log("message sent"));
} catch (error) {
console.error("Error uploading message:", error);
}
}else{
}
} else {
console.log("select room");
}
}

const loadContacts = async (currentUserID, userType)=>{
const loadContacts = async (currentUserID, userType) => {
try {
const userDocRef = doc(db, userType, currentUserID);
const userDoc = await getDoc(userDocRef);
Expand All @@ -249,24 +253,24 @@ const loadContacts = async (currentUserID, userType)=>{
}
};

const loadMessage = async (currentRoomID)=>{
console.log(`fetching messages from ${currentRoomID}`);
const loadMessage = async (currentRoomID) => {
// console.log(`fetching messages from ${currentRoomID}`);
try {
const messagesCollectionRef = collection(db, "chats", `${currentRoomID}`, "messages");
const q = query(messagesCollectionRef, orderBy('timeStamp', 'asc'));

const querySnapshot = await getDocs(q);
const fetchedMessages = querySnapshot.docs.map(doc=>{
const fetchedMessages = querySnapshot.docs.map(doc => {
const data = doc.data();
return{
user:data.user,
text:data.message
return {
user: data.user,
text: data.message
}
})
// console.log(fetchedMessages);
return fetchedMessages;
} catch (error) {
console.error("Error fetching messages: ", error);
}

}
17 changes: 14 additions & 3 deletions server/server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,20 @@ const io = new Server(server, {
io.on("connection", (socket)=>{
console.log(socket.id);

socket.on("send-message", (data)=>{
console.log('sending message');
socket.broadcast.emit("recieve-message", data.message);
socket.on('join-room', (room)=>{
console.log(`${socket.id} joined ${room}`);
socket.emit("joined-room", room);
socket.join(room);
})
socket.on('leave-room', (room)=>{
console.log(`${socket.id} left ${room}`);
socket.emit("left-room", room);
socket.leave(room);
})


socket.on('send-message', (data)=>{
socket.to(data.room).emit("recieve-message", data);
})
})

Expand Down

0 comments on commit 1bea664

Please sign in to comment.