Fix ESLint issues

matrixgw_frontend/src/routes/MatrixLinkRoute.tsx

@@ -257,7 +257,7 @@ function SyncThreadStatus(): React.ReactElement {
     const interval = setInterval(loadStatus, 1000);
 
     return () => clearInterval(interval);
-  }, []);
+  });
 
   return (
     <>

matrixgw_frontend/src/routes/WSDebugRoute.tsx

@@ -1,64 +1,34 @@
 import React from "react";
 import { JsonView, darkStyles } from "react-json-view-lite";
 import "react-json-view-lite/dist/index.css";
-import { WsApi, type WsMessage } from "../api/WsApi";
-import { useSnackbar } from "../hooks/contexts_provider/SnackbarProvider";
-import { time } from "../utils/DateUtils";
+import { type WsMessage } from "../api/WsApi";
 import { useUserInfo } from "../widgets/dashboard/BaseAuthenticatedPage";
 import { MatrixGWRouteContainer } from "../widgets/MatrixGWRouteContainer";
+import { MatrixWS, WSState } from "../widgets/messages/MatrixWS";
 import { NotLinkedAccountMessage } from "../widgets/NotLinkedAccountMessage";
 
-const State = {
-  Closed: "Closed",
-  Connected: "Connected",
-  Error: "Error",
-} as const;
-
 type TimestampedMessages = WsMessage & { time: number };
 
 export function WSDebugRoute(): React.ReactElement {
   const user = useUserInfo();
-  if (!user.info.matrix_account_connected) return <NotLinkedAccountMessage />;
-
-  const snackbar = useSnackbar();
-
-  const [state, setState] = React.useState<string>(State.Closed);
-  const wsRef = React.useRef<WebSocket | undefined>(undefined);
 
+  const [state, setState] = React.useState<string>(WSState.Closed);
   const [messages, setMessages] = React.useState<TimestampedMessages[]>([]);
 
-  React.useEffect(() => {
-    const ws = new WebSocket(WsApi.WsURL);
-    wsRef.current = ws;
+  const handleMessage = (msg: WsMessage) => {
+    setMessages((l) => [...l, msg]);
+  };
 
-    ws.onopen = () => setState(State.Connected);
-    ws.onerror = (e) => {
-      console.error(`WS Debug error!`, e);
-      snackbar(`WebSocket error! ${e}`);
-      setState(State.Error);
-    };
-    ws.onclose = () => {
-      setState(State.Closed);
-      wsRef.current = undefined;
-    };
-
-    ws.onmessage = (msg) => {
-      const dec = JSON.parse(msg.data);
-      setMessages((l) => {
-        return [{ time: time(), ...dec }, ...l];
-      });
-    };
-
-    return () => ws.close();
-  }, []);
+  if (!user.info.matrix_account_connected) return <NotLinkedAccountMessage />;
 
   return (
     <MatrixGWRouteContainer label={"WebSocket Debug"}>
       <div>
         State:{" "}
-        <span style={{ color: state == State.Connected ? "green" : "red" }}>
+        <span style={{ color: state == WSState.Connected ? "green" : "red" }}>
           {state}
         </span>
+        <MatrixWS onStateChange={setState} onMessage={handleMessage} />
       </div>
       {messages.map((msg, id) => (
         <div style={{ margin: "10px", backgroundColor: "black" }}>