i think chat is working

client/package.json

@@ -25,7 +25,8 @@
     "react-icons": "^5.3.0",
     "react-phone-number-input": "^3.4.5",
     "react-router-dom": "^6.26.1",
-    "react-toastify": "^10.0.5"
+    "react-toastify": "^10.0.5",
+    "socket.io-client": "^4.7.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

client/src/components/Negotiate/Chat.jsx

@@ -1,7 +1,42 @@
 import './chat.css';
-import { useState, useRef, useEffect } from 'react';
+import io from 'socket.io-client'
+import { useState, useRef, useEffect, useContext } from 'react';
+import { addDoc, collection, doc, getDoc } from 'firebase/firestore';
+import {db} from '../../../firebase'
+import { AuthContext } from '../context/Authcontext';
 
 export default function Chat() {
+  //current user context
+  const { currentUser } = useContext(AuthContext);  
+  const [userType, setUserType] = useState("buyers"); //change depending upon the type of user(buyer or farmer)
+  const [contacts, setContacts] = useState({});
+  // console.log(currentUser);
+  console.log(contacts);
+  //testing values, to be removed later
+  const roomID = 'room1';
+  const SERVER_PORT = import.meta.env.VITE_SERVER_PORT;
+
+  const [socket, setSocket]= useState(null);
+
+  useEffect(()=>{
+    //establish new socket connection
+    const newSocket = io.connect(`http://localhost:${SERVER_PORT}`);
+    setSocket(newSocket);
+
+    //monitor messages
+    newSocket.on("recieve-message", (recieved_message)=>{
+      setMessages(prevMessages => [...prevMessages, recieved_message]);
+    })
+
+    //get all contacts when u load the page
+    getContacts(currentUser.uid, userType).then((result)=>{
+      setContacts(result);
+    });
+    return () => {
+      newSocket.disconnect();
+    };
+  },[])
+
   // State for the input text and messages
   const [text, setText] = useState('');
   const [messages, setMessages] = useState([]);
@@ -15,8 +50,25 @@
   }, [messages]);
 
   // Handle the click event to add a new message
-  const handleClick = () => {
+  const handleClick = async () => {
+    //send message to server through websocket
     if (text.trim()) {
+
+      if (socket) {
+        socket.emit("send-message", { message: text});
+      }
+
+      //add message to database
+      try {
+        await addDoc(collection(db, 'chats', roomID, 'messages'), {
+          message: text,
+          timeStamp: new Date(),
+          user: currentUser.uid,
+        });
+      } catch (error) {
+        console.error("Error uploading message:", error);
+      }
+
       setMessages([...messages, text]);
       setText('');
     }
@@ -56,3 +108,24 @@
     </div>
   );
 }
+
+const getContacts = async (userID, userType)=>{
+  try {
+    const userDocRef = doc(db, userType, userID);
+    const userDoc = await getDoc(userDocRef);
+    if (userDoc.exists()) {
+      const userData = userDoc.data();
+      return userData.Contacts
+      // const contacts = userData.contacts || [];
+
+      // console.log("Contacts:", contacts);
+      // return contacts;
+    } else {
+      console.log("No such user!");
+      return [];
+    }
+  } catch (error) {
+    console.error("Error fetching contacts:", error);
+    return [];
+  }
+}

client/src/main.jsx

@@ -14,7 +14,6 @@ import FDashboard from './components/Farmer/FDashboard';
 import Profilesetup from './components/ProfileSetup/Profilesetup';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
     <AuthProvider >
     <BrowserRouter>
       <Routes>
@@ -32,5 +31,4 @@ ReactDOM.createRoot(document.getElementById('root')).render(
     </BrowserRouter>
     </AuthProvider>
 
-  </React.StrictMode>
 );