FATAL FIXME No underlying STOMP connection

src/App.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import Chat from "./Chat/Chat";
+import ChatWrapper 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" />
+            <ChatWrapper user="testuser" brokerURL=""/>
         </div>
     )
 }

src/Chat/Chat.tsx

@@ -1,63 +1,96 @@
-import React from "react";
-import { Attachment, Avatar, ChatMessage, ServerMsgType, User } from "./ChatMessage";
-import { connect } from "http2";
+import React, { useState } from "react";
 import { Message } from "./Message";
 import { Client, Stomp } from "@stomp/stompjs";
+import { MessageType } from "./types";
 const domain = "localhost"
 const port = "8080"
 const connectionAddress = `ws://${domain}:${port}/ws`
-const stompClient = new Client()
-const Chat = (
+const ChatWrapper = (
     {
-        user
+        user,
+        brokerURL,
     }:
     {
         user: string,
+        brokerURL: string,
     }
 ): React.ReactElement => {
-    var messageElementsArray: JSX.Element[] = [];
-    const msgWrapperClassName = "msg-wrapper"
-    const connection = new WebSocket(connectionAddress)
+    const stompClient = new Client({
+        brokerURL: connectionAddress
+    })
+    const [destination, setDestination] = useState<string>("/app/chat")
+    const [connected, setConnected] = useState(false)
+    const [subscribe, setSubscribe] = useState("/sub/chat")
+    const [username, setUsername] = useState<string>(user)
+    const [children, setChildren] = useState<React.ReactElement[]>([])
+    stompClient.onConnect = (frame) => {
+        setConnected(true);
+        stompClient.subscribe(subscribe, (message) => {
+            const {from, to, content} = JSON.parse(message.body) as MessageType
+            const messageElement = <Message sender={from} text={content} />
+            children.push(messageElement)
+        })
+    }
+    stompClient.onWebSocketError = (error) => {
+        console.error('Error with websocket', error);
+    };
+    
+    stompClient.onStompError = (frame) => {
+        console.error('Broker reported error: ' + frame.headers['message']);
+        console.error('Additional details: ' + frame.body);
+    };
+    
     const sendDataButtonHandler = (ev: React.MouseEvent) => {
         console.log("WebSockets handler invoked.")
         ev.preventDefault()
         const entryElement: HTMLInputElement = document.getElementById("data-entry") as HTMLInputElement
         const messageData = 
         {
-            from: user,
+            from: username,
             to: "everyone",
             content: entryElement.value
         }
-        connection.send(JSON.stringify(messageData))
+        stompClient.publish({
+            body: JSON.stringify(messageData),
+            destination: destination
+        })
     }
-    connection.addEventListener("open", (ev: Event) => {
-        ev.preventDefault()
-        connection.send("Hello world!")
-    })
-    connection.addEventListener("message", (ev: MessageEvent) => {
-        ev.preventDefault()
-        const wrappers = document.getElementsByClassName(msgWrapperClassName)
+    const connect = () => {
+        stompClient.activate()
+    }
+    const disconnect = () => {
+        stompClient.deactivate()
+    }
+    // connection.addEventListener("open", (ev: Event) => {
+    //     ev.preventDefault()
+    //     connection.send("Hello world!")
+    // })
+    // connection.addEventListener("message", (ev: MessageEvent) => {
+    //     ev.preventDefault()
+    //     const wrappers = document.getElementsByClassName(msgWrapperClassName)
 
-        // 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
-        }
-    })
+    //     // 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}
+            <button onClick={ev => connect()}>Connect</button>
+            <button onClick={ev => disconnect()}>Disconnect</button>
+            <div className="chat-inner">
+            {children}
             </div>
             <span><input id="data-entry"></input><button onClick={ev => sendDataButtonHandler(ev)}>Send</button></span>
         </div>
     )
 }
-export default Chat;
+export default ChatWrapper;

src/Chat/ChatMessage.tsx

@@ -1,34 +0,0 @@
-enum FileType {
-    FILE_TXT,
-    DOCUMENT_WORD,
-    DOCUMENT_PDF,
-    IMAGE,
-    EXEC_BINARY,
-    UNKNOWN,
-}
-export type User = {
-    name: string,
-    userId: string,
-    avatar: Avatar
-} 
-export type Avatar = {
-    pictureUri: string,
-}
-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
-}
-export type ServerMsgType = {
-    
-}

src/Chat/types.tsx

@@ -0,0 +1,5 @@
+export type MessageType = {
+    from: string,
+    to: string,
+    content: string
+}