Implemented hello message on join

refactored typedefs
author: Zhongheng Liu <z.liu@outlook.com.gr> 2024-01-02 19:10:32 +0200
committer: Zhongheng Liu <z.liu@outlook.com.gr> 2024-01-02 19:10:32 +0200
commit: 4a7c3fbeda8bc9f1dbca151678f09db84e1a8b8e (patch)
tree: ec35c26b32f54bdc2691631e814f77b15d05ad5b
parent: 91da28f1fb8b48d67979c0299b48f5c2455c8d80 (diff)
download: epq-web-4a7c3fbeda8bc9f1dbca151678f09db84e1a8b8e.tar.gz
epq-web-4a7c3fbeda8bc9f1dbca151678f09db84e1a8b8e.tar.bz2
epq-web-4a7c3fbeda8bc9f1dbca151678f09db84e1a8b8e.zip
7 files changed, 44 insertions, 31 deletions
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index a11777c..0000000
--- a/public/favicon.ico
+++ /dev/null
diff --git a/public/index.html b/public/index.html
index aa069f2..3fd63e5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,11 +24,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>IRC application instance</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="copyright">
+      <pre>Copyright 2024-2025 Zhongheng Liu @ Byron College</pre>
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a..0000000
--- a/public/logo192.png
+++ /dev/null
diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a6..0000000
--- a/public/logo512.png
+++ /dev/null
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c7..1f2f141 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",
diff --git a/src/Chat/Chat.tsx b/src/Chat/Chat.tsx
index 41e03ca..6cb2e2d 100644
--- a/src/Chat/Chat.tsx
+++ b/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>
     )
 }
diff --git a/src/Chat/types.tsx b/src/Chat/types.tsx
index 5ab5af7..93edcc4 100644
--- a/src/Chat/types.tsx
+++ b/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
 }
 \ No newline at end of file
author	Zhongheng Liu <z.liu@outlook.com.gr>	2024-01-02 19:10:32 +0200
committer	Zhongheng Liu <z.liu@outlook.com.gr>	2024-01-02 19:10:32 +0200
commit	4a7c3fbeda8bc9f1dbca151678f09db84e1a8b8e (patch)
tree	ec35c26b32f54bdc2691631e814f77b15d05ad5b
parent	91da28f1fb8b48d67979c0299b48f5c2455c8d80 (diff)
download	epq-web-4a7c3fbeda8bc9f1dbca151678f09db84e1a8b8e.tar.gz epq-web-4a7c3fbeda8bc9f1dbca151678f09db84e1a8b8e.tar.bz2 epq-web-4a7c3fbeda8bc9f1dbca151678f09db84e1a8b8e.zip