Add day and time to messages

Author: drew-chen

oh_queue/static/js/components/chat_box.js

@@ -27,10 +27,11 @@ function ChatBox({ currentUser, socket, id, mode }) {
             content: typed,
             mode,
             id,
+            time: 0
         });
         setTyped("");
     };
-
+    
     const scrollDown = () => {
         $('[data-toggle="tooltip"]').tooltip()
         historyRef.current.scrollTop = historyRef.current.scrollHeight;
@@ -43,30 +44,34 @@ function ChatBox({ currentUser, socket, id, mode }) {
             if (message.mode !== mode || message.id !== id) {
                 return;
             }
-            setMessages(messages.concat([[message.sender, message.content]]));
+            setMessages(messages.concat([[
+                message.sender,
+                message.content,
+                message.time
+            ]]));
         });
         return () => socket.removeAllListeners("chat_message");
     }, [messages]);
 
-    const body = messages.map(([sender, message], i) => {
+    const body = messages.map(([sender, message, time], i) => {
         if (sender.id === currentUser.id) {
             return (
                 <div className="my-chat-bubble">
-                    <div className="chat-text">{message}</div>
+                    <div className="chat-text">{message}{time}</div>
                 </div>
             )
         } else if (messages[i + 1] && sender.id === messages[i + 1][0].id) {
             return (
                 <div className="chat-bubble">
                     <div className="chat-icon none">{sender.shortName[0]}</div>
-                    <div className="chat-text" data-toggle="tooltip" data-placement="right" title={sender.name}>{message}</div>
+                    <div className="chat-text" data-toggle="tooltip" data-placement="right" title={sender.name}>{message}{time}</div>
                 </div>
             )
         } else {
             return (
                 <div className="chat-bubble">
                     <div className="chat-icon">{sender.shortName[0]}</div>
-                    <div className="chat-text" data-toggle="tooltip" data-placement="right" title={sender.name}>{message}</div>
+                    <div className="chat-text" data-toggle="tooltip" data-placement="right" title={sender.name}>{message}{time}</div>
                 </div>
             )
         }

oh_queue/views.py

@@ -1155,6 +1155,8 @@ def send_chat_message(data):
     event_id = data["id"]
 
     data["sender"] = user_json(current_user)
+    timeStr = get_current_time().strftime("%a %-I:%M%p")
+    data["time"] = timeStr
 
     if mode == "appointment":
         appointment = Appointment.query.filter_by(course=get_course(), id=event_id).one()