TERMINALS WORK!!!!

frontend/components/editor/terminal/index.tsx

@@ -13,19 +13,19 @@ export default function EditorTerminal({
   id,
   term,
   setTerm,
+  visible,
 }: {
   socket: Socket;
   id: string;
   term: Terminal | null;
   setTerm: (term: Terminal) => void;
+  visible: boolean;
 }) {
   const terminalRef = useRef(null);
 
   useEffect(() => {
     if (!terminalRef.current) return;
-    console.log("new terminal", id, term ? "reusing" : "creating");
-
-    if (term) return;
+    // console.log("new terminal", id, term ? "reusing" : "creating");
 
     const terminal = new Terminal({
       cursorBlink: true,
@@ -40,22 +40,19 @@ export default function EditorTerminal({
 
     setTerm(terminal);
 
-    // return () => {
-    //   if (terminal) terminal.dispose();
-    // };
-  }, [id]);
+    return () => {
+      if (terminal) terminal.dispose();
+    };
+  }, []);
 
   useEffect(() => {
     if (!term) return;
 
-    console.log("A");
     if (terminalRef.current) {
       const fitAddon = new FitAddon();
       term.loadAddon(fitAddon);
       term.open(terminalRef.current);
-      console.log("B");
       fitAddon.fit();
-      // setTerm(term);
     }
     const disposable = term.onData((data) => {
       console.log("terminalData", id, data);
@@ -69,7 +66,11 @@ export default function EditorTerminal({
 
   return (
     <>
-      <div ref={terminalRef} className="w-full h-full text-left">
+      <div
+        ref={terminalRef}
+        style={{ display: visible ? "block" : "none" }}
+        className="w-full h-full text-left"
+      >
         {term === null ? (
           <div className="flex items-center text-muted-foreground p-2">
             <Loader2 className="animate-spin mr-2 h-4 w-4" />