Merge pull request #146 from agiledev-students-spring2024/UpdateSockets

added time for chat messages

front-end/src/ChatPage.js

@@ -4,24 +4,22 @@ import './ChatPage.css';
 import axios from 'axios'
 import Header from "./Header";
 import { socket } from './sockets/ReactSocket';
-import { ConnectionState } from './sockets/ConnectionState';
 import { ChatBoxSender, ChatBoxReceiver } from './sockets/ChatBox';
 import InputTxt from './sockets/InputTxt';
 
 function ChatPage() {
   const [messagesarray, setMessages2] = useState([]);
-  const [socketConnected, setIsConnected] = useState(socket.connected);
 
   const [user, setUser] = useState('')
   const [chats, setChats] = useState([]);
 
   useEffect(() => {
     function onConnect() {
-      setIsConnected(true);
+      //setIsConnected(true);
     }
 
     function onDisconnect() {
-      setIsConnected(false);
+      //setIsConnected(false);
     }
 
     socket.on('connect', onConnect);
@@ -31,7 +29,19 @@ function ChatPage() {
       socket.off('connect', onConnect);
       socket.off('disconnect', onDisconnect);
     }
-  }, [])
+  }, []);
+
+  useEffect(() => {
+    getUser();
+
+    axios.get('http://localhost:3001/chatpage')
+      .then(response => {
+        setMessages2(response.data);
+      })
+      .catch(error => {
+        console.error('Error fetching messages:', error);
+      });
+  }, []);
 
   //listen for chat_message event from the socket
   useEffect(() => {
@@ -62,16 +72,16 @@ function ChatPage() {
   //called everytime message is sent/received
   //the post request to the backend with the new message should probably go here
   function sendMessage(msg) {
-    //get the current time here
-    const newMsg = { ...msg, user}; //this will eventually also have info about the user that send the message
-    console.log(`Sending message as ${user}`); //this is how you extract the message out of newMsg
+    const msgTime = new Date().toLocaleTimeString();
+    const newMsg = { ...msg, user, msgTime};
+    console.log(`Sending message as ${user}`); 
     setChats([...chats, newMsg]);
     sendToSocket([...chats, newMsg]);
 
     let messagestring = newMsg.message;
     const currentTime = new Date().toISOString(); //This should be formatted eventually (go see what it looks like in the database messages collection)
     const msg_post = {
-      sender: "current_user_test", //CHNAGE THIS LATER TO ACTUAL CURRENT USERNAME!!!!
+      sender: newMsg.user, //CHNAGE THIS LATER TO ACTUAL CURRENT USERNAME!!!!
       recipient: "recipient_test", //CHANGE THIS LATER TO ACTUAL RECIPIENT!!!
       timestamp: currentTime,
       messagetext: messagestring
@@ -90,51 +100,20 @@ function ChatPage() {
   }
 
   //displays the chat messages to the user
-  //this will ultimately need to be updated when we get login working
   function ChatExchange() {
     return chats.map((chat, index) => {
-      if(chat.user === user) return <ChatBoxSender key={index} message={chat.message} user={chat.user} />
-      return <ChatBoxReceiver key={index} message={chat.message} user={chat.user} />
+      if(chat.user === user) return <ChatBoxSender key={index} message={chat.message} user={chat.user} time={chat.msgTime} />
+      return <ChatBoxReceiver key={index} message={chat.message} user={chat.user} time={chat.msgTime} />
     });
   }
 
-  useEffect(() => {
-    getUser();
-
-    axios.get('http://localhost:3001/chatpage')
-      .then(response => {
-        setMessages2(response.data);
-      })
-      .catch(error => {
-        console.error('Error fetching messages:', error);
-      });
-  }, []);
-
   return (
     <div>
       <Header />
       <ChatExchange />
       <InputTxt sendMessage={sendMessage} />
     </div>
   );
-
-  /*
-  return (
-    <div>
-      <ConnectionState isConnected={socketConnected}/>
-      <Header />
-      {messagesarray.map((msg, index) => (
-        <div key={index}>
-          <p><strong>{msg.sender} [{msg.timestamp}]:</strong> {msg.messagetext}</p>
-        </div>
-      ))}
-      <form onSubmit={onSubmit}>
-            <input onChange={ e => setValue(e.target.value)} />
-            <button type='submit' disabled={isLoading}> Submit </button>
-        </form>
-    </div>
-  );
-  */
 }
 
 export default ChatPage;

front-end/src/sockets/ChatBox.js

@@ -1,12 +1,12 @@
 import React from "react";
 import './ChatBox.css'
 
-export function ChatBoxSender({user, message}) {
+export function ChatBoxSender({user, time, message}) {
     return (
         <div className="SenderBox">
             <p className="SenderChat">
                 <strong className="ChatUsername">
-                    {user} [10:00 AM]
+                    {user} [{time}]
                 </strong>
                 <br/>
                 {message}
@@ -15,12 +15,12 @@ export function ChatBoxSender({user, message}) {
     );
 }
 
-export function ChatBoxReceiver({user, message}) {
+export function ChatBoxReceiver({user, time, message}) {
     return (
         <div className="ReceiverBox">
             <p className="ReceiverChat">
                 <strong className="ChatUsername">
-                    {user} [10:00 AM]
+                    {user} [{time}]
                 </strong>
                 <br/>
                 {message}