testeranto/src/app/frontend/useTerminalWebSocket.ts

the AI powered BDD test framework for typescript projects

import { useState, useEffect, useCallback } from "react";

import { Process } from "./components/pure/ProcessManagerViewTypes";

export const useTerminalWebSocket = (
  ws: WebSocket | null,
  selectedProcess: Process | null
) => {
  const [processLogs, setProcessLogs] = useState<string[]>([]);

  // Handle WebSocket messages for the selected process
  const handleMessage = useCallback(
    (event: MessageEvent) => {
      try {
        const data = JSON.parse(event.data);
        // Handle process data response
        if (
          data.type === "processData" &&
          selectedProcess &&
          data.processId === selectedProcess.processId
        ) {
          setProcessLogs(data.logs || []);
        }
        // Handle new log messages
        else if (
          (data.type === "processStdout" || data.type === "processStderr") &&
          selectedProcess &&
          data.processId === selectedProcess.processId
        ) {
          setProcessLogs((prev) => [...prev, data.data]);
        }
      } catch (error) {
        console.error("Error parsing WebSocket message:", error);
      }
    },
    [selectedProcess]
  );

  // Reset logs when selected process changes
  useEffect(() => {
    setProcessLogs(selectedProcess?.logs || []);
  }, [selectedProcess]);

  useEffect(() => {
    if (!ws) return;

    ws.addEventListener("message", handleMessage);
    return () => {
      ws.removeEventListener("message", handleMessage);
    };
  }, [ws, handleMessage]);

  return {
    processLogs,
  };
};