Implemented hello message on join

refactored typedefs

src/Chat/Chat.tsx

@@ -9,6 +9,11 @@ import { renderToStaticMarkup } from 'react-dom/server';
 const domain = window.location.hostname
 const port = "8080"
 const connectionAddress = `ws://${domain}:${port}/ws`
+const endpoints = {
+    destination: "/app/chat",
+    subscription: "/sub/chat",
+    history: "/api/v1/chat/history/"
+}
 const ChatWrapper = (
     {
         user,
@@ -22,14 +27,12 @@ const ChatWrapper = (
     const stompClient = new Client({
         brokerURL: connectionAddress
     })
-    const destination = "/app/chat"
-    const subscribe = "/sub/chat"
     // TODO solve issue with non-static markup
     stompClient.onConnect = (frame) => {
-        stompClient.subscribe(subscribe, (message) => {
+        stompClient.subscribe(endpoints.subscription, (message) => {
             console.log(`Collected new message: ${message.body}`);
-            const {from, to, content} = JSON.parse(message.body) as MessageType
-            const messageElement = <Message sender={from} text={content} />
+            const {fromUserId, toUserId, content, timeMillis} = JSON.parse(message.body) as MessageType
+            const messageElement = <Message sender={fromUserId} text={content} />
             console.log(messageElement);
 
             // Temporary solution
@@ -38,6 +41,15 @@ const ChatWrapper = (
             
             // Truly horrible and disgusting
             container.innerHTML += renderToStaticMarkup(messageElement)
+        });
+        stompClient.publish({
+            body: JSON.stringify({
+                fromUserId: user,
+                toUserId: "everyone",
+                content: `${user} has joined the server!`,
+                timeMillis: Date.now()
+            }),
+            destination: endpoints.destination
         })
     }
 
@@ -52,24 +64,25 @@ const ChatWrapper = (
     };
     
     // Button press event handler.
-    const sendDataButtonHandler = (ev: React.MouseEvent) => {
+    const sendData = () => {
         console.log("WebSockets handler invoked.")
-        
         // There must be a react-native and non-document-getElementById way to do this
         // TODO Explore
         const entryElement: HTMLInputElement = document.getElementById("data-entry") as HTMLInputElement
-        const messageData = 
+        if (!entryElement.value) {alert("Message cannot be empty!"); return;}
+        const messageData: MessageType = 
         {
-            from: user,
-            to: "everyone",
-            content: entryElement.value
+            fromUserId: user,
+            toUserId: "everyone",
+            content: entryElement.value,
+            timeMillis: Date.now()
         }
         console.log(`STOMP connection status: ${stompClient.connected}`); 
         stompClient.publish({
             body: JSON.stringify(messageData),
-            destination: destination
-        })
-        ev.preventDefault()
+            destination: endpoints.destination
+        });
+        entryElement.value = "";
     }
     useEffect(() => {
         // Stomp client is disconnected after each re-render
@@ -78,12 +91,18 @@ const ChatWrapper = (
         return () => {
             stompClient.deactivate()
         }
-    }, [])
+    }, [stompClient])
+    // https://www.w3schools.com/jsref/obj_keyboardevent.asp
+    document.addEventListener("keypress", (ev: KeyboardEvent) => {
+        if (ev.key == "Enter") {
+            sendData();
+        }
+    })
     return (
         <div className="chat">
             <div id="chat-inner">
             </div>
-            <span><input id="data-entry"></input><button onClick={ev => sendDataButtonHandler(ev)}>Send</button></span>
+            <span><input id="data-entry"></input><button onClick={() => sendData()}>Send</button></span>
         </div>
     )
 }

src/Chat/types.tsx

@@ -1,5 +1,6 @@
 export type MessageType = {
-    from: string,
-    to: string,
-    content: string
+    fromUserId: string,
+    toUserId: string,
+    content: string,
+    timeMillis: number
 }