From bcdeec6b3e80fdaf0e7892216c365f033bb214bf Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Mon, 27 Feb 2023 11:28:21 -0500
Subject: [PATCH] fix(linting): resolve warnings being flagged by the linter
 (#26)

---
 .eslintrc.json                                |  1 +
 .../src/components/SerialConsole/XTerm.tsx    | 71 ++++++++++---------
 .../components/SpiceConsole/SpiceConsole.tsx  | 34 ++++-----
 3 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 571e04e..d1a3773 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -50,6 +50,7 @@
     "@typescript-eslint/prefer-namespace-keyword": "error",
     "@typescript-eslint/unified-signatures": "error",
     "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-explicit-any": "off",
     "arrow-body-style": "error",
     "camelcase": [
       "error",
diff --git a/packages/module/src/components/SerialConsole/XTerm.tsx b/packages/module/src/components/SerialConsole/XTerm.tsx
index 12d8a44..2ce3e24 100644
--- a/packages/module/src/components/SerialConsole/XTerm.tsx
+++ b/packages/module/src/components/SerialConsole/XTerm.tsx
@@ -29,13 +29,13 @@ export const XTerm: React.FunctionComponent<XTermProps> = ({
   onData,
   innerRef
 }) => {
-  let terminal: Terminal;
+  const terminalRef = React.useRef<Terminal>();
   const ref = React.useRef<HTMLDivElement>();
 
   useImperativeHandle(innerRef, () => ({
     focusTerminal() {
-      if (terminal) {
-        terminal.focus();
+      if (terminalRef.current) {
+        terminalRef.current.focus();
       }
     },
     /**
@@ -44,8 +44,8 @@ export const XTerm: React.FunctionComponent<XTermProps> = ({
      * @param {string} data String content to be writen into the terminal
      */
     onDataReceived: (data: string) => {
-      if (terminal) {
-        terminal.write(data);
+      if (terminalRef.current) {
+        terminalRef.current.write(data);
       }
     },
     /**
@@ -54,16 +54,35 @@ export const XTerm: React.FunctionComponent<XTermProps> = ({
      * @param {string} reason String error to be written into the terminal
      */
     onConnectionClosed: (reason: string) => {
-      if (terminal) {
-        terminal.write(`\x1b[31m${reason || 'disconnected'}\x1b[m\r\n`);
-        terminal.refresh(terminal.rows, terminal.rows); // start to end row
+      if (terminalRef.current) {
+        terminalRef.current.write(`\x1b[31m${reason || 'disconnected'}\x1b[m\r\n`);
+        terminalRef.current.refresh(terminalRef.current.rows, terminalRef.current.rows); // start to end row
       }
     }
   }));
 
+  const onBeforeUnload = React.useCallback((event: any) => {
+    // Firefox requires this when the page is in an iframe
+    event.preventDefault();
+
+    // see "an almost cross-browser solution" at
+    // https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
+    event.returnValue = '';
+    return '';
+  }, []);
+
+
+  const onFocusIn = () => {
+    window.addEventListener('beforeunload', onBeforeUnload);
+  };
+
+  const onFocusOut = React.useCallback(() => {
+    window.removeEventListener('beforeunload', onBeforeUnload);
+  }, [onBeforeUnload]);
+
   React.useEffect(() => {
     const fitAddon = new FitAddon();
-    terminal = new Terminal({
+    terminalRef.current = new Terminal({
       cols,
       rows,
       cursorBlink: true,
@@ -75,21 +94,21 @@ export const XTerm: React.FunctionComponent<XTermProps> = ({
     const onWindowResize = () => {
       const geometry = fitAddon.proposeDimensions();
       if (geometry) {
-        terminal.resize(geometry.rows, geometry.cols);
+        terminalRef.current.resize(geometry.rows, geometry.cols);
       }
     };
 
     if (onData) {
-      terminal.onData(onData);
+      terminalRef.current.onData(onData);
     }
 
     if (onTitleChanged) {
-      terminal.onTitleChange(onTitleChanged);
+      terminalRef.current.onTitleChange(onTitleChanged);
     }
 
-    terminal.loadAddon(fitAddon);
+    terminalRef.current.loadAddon(fitAddon);
 
-    terminal.open(ref.current);
+    terminalRef.current.open(ref.current);
 
     const resizeListener = debounce(onWindowResize, 100);
 
@@ -99,34 +118,16 @@ export const XTerm: React.FunctionComponent<XTermProps> = ({
       }
       onWindowResize();
     }
-    terminal.focus();
+    terminalRef.current.focus();
 
     return () => {
-      terminal.dispose();
+      terminalRef.current.dispose();
       if (canUseDOM) {
         window.removeEventListener('resize', resizeListener);
       }
       onFocusOut();
     };
-  }, []);
-
-  const onBeforeUnload = (event: any) => {
-    // Firefox requires this when the page is in an iframe
-    event.preventDefault();
-
-    // see "an almost cross-browser solution" at
-    // https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
-    event.returnValue = '';
-    return '';
-  };
-
-  const onFocusIn = () => {
-    window.addEventListener('beforeunload', onBeforeUnload);
-  };
-
-  const onFocusOut = () => {
-    window.removeEventListener('beforeunload', onBeforeUnload);
-  };
+  }, [cols, fontFamily, fontSize, onData, onFocusOut, onTitleChanged, rows]);
 
   // ensure react never reuses this div by keying it with the terminal widget
   // Workaround for xtermjs/xterm.js#3172
diff --git a/packages/module/src/components/SpiceConsole/SpiceConsole.tsx b/packages/module/src/components/SpiceConsole/SpiceConsole.tsx
index 7fca64c..5819502 100644
--- a/packages/module/src/components/SpiceConsole/SpiceConsole.tsx
+++ b/packages/module/src/components/SpiceConsole/SpiceConsole.tsx
@@ -50,15 +50,28 @@ export const SpiceConsole: React.FunctionComponent<SpiceConsoleProps> = ({
   textCtrlAltDel
 }) => {
   let spiceStaticComponent: React.ReactNode;
-  let sc: any;
+  const scRef = React.useRef<any>();
   const [status, setStatus] = React.useState(CONNECTING);
 
+  const disconnect = React.useCallback(() => {
+    if (scRef.current) {
+      scRef.current.stop();
+      scRef.current = undefined;
+    }
+  }, [scRef]);
+
+  const onSpiceError = React.useCallback((e: any) => {
+    disconnect();
+    setStatus(DISCONNECTED);
+    onDisconnected(e);
+  }, [disconnect, setStatus, onDisconnected]);
+
   React.useEffect(() => {
     try {
       const protocol = encrypt ? 'wss' : 'ws';
       const uri = `${protocol}://${host}:${port}/${path}`;
 
-      sc = new SpiceMainConn({
+      scRef.current = new SpiceMainConn({
         uri,
         /* eslint-disable camelcase */
         screen_id: 'spice-screen',
@@ -71,27 +84,14 @@ export const SpiceConsole: React.FunctionComponent<SpiceConsoleProps> = ({
       disconnect();
     }
     return () => disconnect();
-  }, []);
-
-  const disconnect = () => {
-    if (sc) {
-      sc.stop();
-      sc = undefined;
-    }
-  };
+  }, [disconnect, encrypt, host, onInitFailed, onSpiceError, password, path, port]);
 
   const onCtrlAltDel = () => {
-    if (sc) {
+    if (scRef.current) {
       sendCtrlAltDel();
     }
   };
 
-  const onSpiceError = (e: any) => {
-    disconnect();
-    setStatus(DISCONNECTED);
-    onDisconnected(e);
-  };
-
   if (!spiceStaticComponent) {
     // create just once
     spiceStaticComponent = <div id="spice-screen" />;