added type compatibility layer

added text data entry for sending new messages
added websockets connection
added type annots
UNTESTED interop between TSX and Java backend

src/App.tsx

@@ -1,9 +1,11 @@
 import React from "react";
+import Chat from "./Chat/Chat";
 const App = (): React.ReactElement => {
     return (
         <div className="App">
             <h1>Local Area Network Chat Application</h1>
             <pre>This web application was built for the purposes of an EPQ project.</pre>
+            <Chat user="testuser" />
         </div>
     )
 }

src/Chat/Chat.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { Attachment, Avatar, ChatMessage, ServerMsgType, User } from "./ChatMessage";
+import { connect } from "http2";
 const domain = "localhost"
 const port = "8080"
 const connectionAddress = `ws://${domain}:${port}`
@@ -6,20 +8,37 @@ const Message = (
     {
         sender,
         text,
-        objects,
     }:
     {
-        sender: string, // TODO Create specific sender object type
+        sender: string
         text: string,
-        objects?: Array<any>,
     }
-    ): React.ReactElement => {
+    ): React.ReactElement<{sender: string, text: string}> => {
     
-    return (<></>)
+    return (<p>Message from {sender}: {text}</p>)
 }
-const Chat = (): React.ReactElement => {
+const Chat = (
+    {
+        user
+    }:
+    {
+        user: string,
+    }
+): React.ReactElement => {
+    var messageElementsArray: JSX.Element[] = [];
     const msgWrapperClassName = "msg-wrapper"
     const connection = new WebSocket(connectionAddress)
+    const sendDataButtonHandler = (ev: React.MouseEvent) => {
+        ev.preventDefault()
+        const entryElement: HTMLInputElement = document.getElementById("data-entry") as HTMLInputElement
+        const messageData = 
+        {
+            from: user,
+            to: "everyone",
+            content: entryElement.value
+        }
+        connection.send(JSON.stringify(messageData))
+    }
     connection.addEventListener("open", (ev: Event) => {
         ev.preventDefault()
         connection.send("Hello world!")
@@ -27,20 +46,27 @@ const Chat = (): React.ReactElement => {
     connection.addEventListener("message", (ev: MessageEvent) => {
         ev.preventDefault()
         const wrappers = document.getElementsByClassName(msgWrapperClassName)
-        const data = JSON.parse(ev.data)
+
+        // Matches data from JSON data input against ChatMessage datatype for processing
+        const data = JSON.parse(ev.data) as ChatMessage
         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
             }
+            messageElementsArray.push(<Message sender={data.from} text={data.message} />)
+            // TODO Create new message 
+            // DDL 20 DEC
         }
     })
     return (
         <div className="chat">
             <div className={msgWrapperClassName}>
+            {messageElementsArray}
             </div>
-            <input></input>
+            <span><input id="data-entry"></input><button onClick={ev => sendDataButtonHandler}></button></span>
         </div>
     )
 }
+export default Chat;

src/Chat/ChatMessage.tsx

@@ -6,6 +6,14 @@ enum FileType {
     EXEC_BINARY,
     UNKNOWN,
 }
+export type User = {
+    name: string,
+    userId: string,
+    avatar: Avatar
+} 
+export type Avatar = {
+    pictureUri: string,
+}
 export type Attachment = {
     name: string,
     uri: string,
@@ -21,3 +29,6 @@ export type ChatMessage = {
     message: string,
     attachments: Attachment
 }
+export type ServerMsgType = {
+    
+}