Still completely broken terminal...

resources/scripts/components/server/Console.tsx

@@ -1,10 +1,8 @@
-import React, { createRef } from 'react';
+import React, { createRef, useEffect } from 'react';
 import { Terminal } from 'xterm';
 import * as TerminalFit from 'xterm/lib/addons/fit/fit';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { connect } from 'react-redux';
-import { Websocket } from '@/plugins/Websocket';
-import { ServerStore } from '@/state/server';
+import { ServerContext } from '@/state/server';
 
 const theme = {
     background: 'transparent',
@@ -27,14 +25,7 @@ const theme = {
     brightWhite: '#ffffff',
 };
 
-interface Props {
-    connected: boolean;
-    instance: Websocket | null;
-}
-
-class Console extends React.PureComponent<Readonly<Props>> {
-    ref = createRef<HTMLDivElement>();
-    terminal = new Terminal({
+const terminal = new Terminal({
     disableStdin: true,
     cursorStyle: 'underline',
     allowTransparency: true,
@@ -44,54 +35,46 @@ class Console extends React.PureComponent<Readonly<Props>> {
     theme: theme,
 });
 
-    componentDidMount () {
-        if (this.ref.current) {
-            this.terminal.open(this.ref.current);
-            this.terminal.clear();
+export default () => {
+    const ref = createRef<HTMLDivElement>();
+    const connected = ServerContext.useStoreState(state => state.socket.connected);
+    const instance = ServerContext.useStoreState(state => state.socket.instance);
+
+    const handleConsoleOutput = (line: string) => terminal.writeln(
+        line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m',
+    );
+
+    useEffect(() => {
+        if (ref.current) {
+            terminal.open(ref.current);
 
             // @see https://github.com/xtermjs/xterm.js/issues/2265
             // @see https://github.com/xtermjs/xterm.js/issues/2230
-            TerminalFit.fit(this.terminal);
+            TerminalFit.fit(terminal);
         }
+    }, [ ref.current ]);
 
-        if (this.props.connected && this.props.instance) {
-            this.listenForEvents();
-        }
-    }
+    useEffect(() => {
+        if (connected && instance) {
+            terminal.clear();
 
-    componentDidUpdate (prevProps: Readonly<Readonly<Props>>) {
-        if (!prevProps.connected && this.props.connected) {
-            this.listenForEvents();
-        }
-    }
+            instance
+                .addListener('stats', data => console.log(JSON.parse(data)))
+                .addListener('console output', handleConsoleOutput);
 
-    componentWillUnmount () {
-        if (this.props.instance) {
-            this.props.instance.removeListener('server log', this.handleServerLog);
-            this.props.instance.removeListener('server log', this.handleConsoleOutput);
-        }
-    }
-
-    listenForEvents () {
-        const instance = this.props.instance!;
-
-        instance.addListener('server log', this.handleServerLog);
-        instance.addListener('console output', this.handleConsoleOutput);
             instance.send('send logs');
         }
 
-    handleServerLog = (lines: string[]) => lines.forEach(data => {
-        return data.split(/\n/g).forEach(line => this.terminal.writeln(line + '\u001b[0m'));
-    });
+        return () => {
+            instance && instance
+                .removeListener('console output', handleConsoleOutput)
+                .removeAllListeners('stats');
+        };
+    }, [ connected, instance ]);
 
-    handleConsoleOutput = (line: string) => this.terminal.writeln(
-        line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m'
-    );
-
-    render () {
     return (
         <div className={'text-xs font-mono relative'}>
-                <SpinnerOverlay visible={!this.props.connected} size={'large'}/>
+            <SpinnerOverlay visible={!connected} size={'large'}/>
             <div
                 className={'rounded-t p-2 bg-black overflow-scroll w-full'}
                 style={{
@@ -99,7 +82,7 @@ class Console extends React.PureComponent<Readonly<Props>> {
                     maxHeight: '64rem',
                 }}
             >
-                    <div id={'terminal'} ref={this.ref}/>
+                <div id={'terminal'} ref={ref}/>
             </div>
             <div className={'rounded-b bg-neutral-900 text-neutral-100 flex'}>
                 <div className={'flex-no-shrink p-2 font-bold'}>$</div>
@@ -109,12 +92,4 @@ class Console extends React.PureComponent<Readonly<Props>> {
             </div>
         </div>
     );
-    }
-}
-
-export default connect(
-    (state: ServerStore) => ({
-        connected: state.socket.connected,
-        instance: state.socket.instance,
-    }),
-)(Console);
+};