started work on frontend message handlers

added type annots to reinforce data structure robustness
started creating Chat.tsx event handlers

2 files changed, 69 insertions, 1 deletions

diff --git a/src/Chat/Chat.tsx b/src/Chat/Chat.tsx
index 4eee36c..be57614 100644
--- a/src/Chat/Chat.tsx
+++ b/src/Chat/Chat.tsx
@@ -1 +1,46 @@
-import React from "react";
\ No newline at end of file
+import React from "react";
+const domain = "localhost"
+const port = "8080"
+const connectionAddress = `ws://${domain}:${port}`
+const Message = (
+    {
+        sender,
+        text,
+        objects,
+    }:
+    {
+        sender: string, // TODO Create specific sender object type
+        text: string,
+        objects?: Array<any>,
+    }
+    ): React.ReactElement => {
+    
+    return (<></>)
+}
+const Chat = (): React.ReactElement => {
+    const msgWrapperClassName = "msg-wrapper"
+    const connection = new WebSocket(connectionAddress)
+    connection.addEventListener("open", (ev: Event) => {
+        ev.preventDefault()
+        connection.send("Hello world!")
+    })
+    connection.addEventListener("message", (ev: MessageEvent) => {
+        ev.preventDefault()
+        const wrappers = document.getElementsByClassName(msgWrapperClassName)
+        const data = JSON.parse(ev.data)
+        for (let index = 0; index < wrappers.length; index++) {
+            const element: Element | null = wrappers.item(index);
+            if (!element) {
+                console.error("msgWrapper class cannot be found! Message not delivered.")
+                return
+            }
+        }
+    })
+    return (
+        <div className="chat">
+            <div className={msgWrapperClassName}>
+            </div>
+            <input></input>
+        </div>
+    )
+}
diff --git a/src/Chat/ChatMessage.tsx b/src/Chat/ChatMessage.tsx
new file mode 100644
index 0000000..5d8069c
--- /dev/null
+++ b/src/Chat/ChatMessage.tsx
@@ -0,0 +1,23 @@
+enum FileType {
+    FILE_TXT,
+    DOCUMENT_WORD,
+    DOCUMENT_PDF,
+    IMAGE,
+    EXEC_BINARY,
+    UNKNOWN,
+}
+export type Attachment = {
+    name: string,
+    uri: string,
+    sizeBytes: number,
+    filetype: FileType
+}
+export type ChatMessage = {
+    from: string,
+    fromIP: string,
+    to: Array<string>,
+    toIPs: Array<string>,
+    timestampPosted: number,
+    message: string,
+    attachments: Attachment
+}