sandbox-web-ide/frontend/lib/terminal.ts

// Helper functions for terminal instances

import { createId } from "@paralleldrive/cuid2";
import { Terminal } from "@xterm/xterm";
import { Socket } from "socket.io-client";

export const createTerminal = ({
  setTerminals,
  setActiveTerminalId,
  setCreatingTerminal,
  command,
  socket,
}: {
  setTerminals: React.Dispatch<React.SetStateAction<{
    id: string;
    terminal: Terminal | null;
}[]>>;
  setActiveTerminalId: React.Dispatch<React.SetStateAction<string>>;
  setCreatingTerminal: React.Dispatch<React.SetStateAction<boolean>>;
  command?: string;
  socket: Socket;

}) => {
  setCreatingTerminal(true);
  const id = createId();
  console.log("creating terminal, id:", id);

  setTerminals((prev) => [...prev, { id, terminal: null }]);
  setActiveTerminalId(id);

  setTimeout(() => {
    socket.emit("createTerminal", id, () => {
      setCreatingTerminal(false);
      if (command) socket.emit("terminalData", id, command + "\n");
    });
  }, 1000);
};

export const closeTerminal = ({
  term,
  terminals,
  setTerminals,
  setActiveTerminalId,
  setClosingTerminal,
  socket,
  activeTerminalId,
} : {
  term: { 
    id: string; 
    terminal: Terminal | null 
  }
  terminals: { 
    id: string; 
    terminal: Terminal | null 
  }[]
  setTerminals: React.Dispatch<React.SetStateAction<{ 
    id: string; 
    terminal: Terminal | null 
  }[]>>
  setActiveTerminalId: React.Dispatch<React.SetStateAction<string>>
  setClosingTerminal: React.Dispatch<React.SetStateAction<string>>
  socket: Socket
  activeTerminalId: string
}) => {
  const numTerminals = terminals.length;
  const index = terminals.findIndex((t) => t.id === term.id);
  if (index === -1) return;

  setClosingTerminal(term.id);

  socket.emit("closeTerminal", term.id, () => {
    setClosingTerminal("");

    const nextId =
      activeTerminalId === term.id
        ? numTerminals === 1
          ? null
          : index < numTerminals - 1
          ? terminals[index + 1].id
          : terminals[index - 1].id
        : activeTerminalId;

    setTerminals((prev) => prev.filter((t) => t.id !== term.id));

    if (!nextId) {
      setActiveTerminalId("");
    } else {
      const nextTerminal = terminals.find((t) => t.id === nextId);
      if (nextTerminal) {
        setActiveTerminalId(nextTerminal.id);
      }
    }
  });
};