All files / src/components/Terminal TerminalComp.jsx

94.28% Statements 66/70
62.5% Branches 5/8
100% Functions 3/3
94.28% Lines 66/70

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 711x 1x 1x 1x 1x 1x 1x 1x 10x 10x 10x 10x 10x 10x 1x 1x 1x 1x 1x 1x 1x 1x     1x 10x 10x 1x 1x 1x 1x 10x 10x 8x     10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 1x 1x  
import React, { useState, useEffect, useRef } from "react";
import { ReactTerminal } from "react-terminal";
import axios from "axios";
import "./Terminal.css";
import { DataState } from "../../context/DataContext";
import { useTheme } from "../../context/ThemeContext";
 
const TerminalComp = () => {
  const { terminalOutput, commandPress } = DataState();
  const { isDark } = useTheme();
  const [output, setOutput] = useState("");
  const terminalRef = useRef(null);
 
  const handleCommand = async (command, ...args) => {
    const fullCommand = [command, ...args].join(" ");
    try {
      const { data } = await axios.post("http://127.0.0.1:10000/gdb_command", {
        command: fullCommand,
        name: "program",
      });
      return data["result"];
    } catch (error) {
      return "Error executing command";
    }
  };
 
  const defaultHandler = async (command, ...args) => {
    const result = await handleCommand(command, ...args);
    setOutput(result);
    return result;
  };
 
  useEffect(() => {
    if (terminalOutput) {
      defaultHandler(terminalOutput);
    }
  }, [commandPress]);
 
  // Terminal themes that match the UI mode
  const darkTerminal = {
    themeBGColor: "#0a0a0f",
    themeToolbarColor: "#111118",
    themeColor: "#e4e4ef",
    themePromptColor: "#00e5ff",
  };
 
  const lightTerminal = {
    themeBGColor: "#ffffff",
    themeToolbarColor: "#ece6db",
    themeColor: "#2d2d2d",
    themePromptColor: "#c45d3e",
  };
 
  return (
    <div className="terminal">
      <ReactTerminal
        ref={terminalRef}
        themes={{
          "gdb-dark": darkTerminal,
          "gdb-light": lightTerminal,
        }}
        theme={isDark ? "gdb-dark" : "gdb-light"}
        showControlButtons={false}
        defaultHandler={defaultHandler}
      />
    </div>
  );
};
 
export default TerminalComp;