feat: added functionality of terminal output.

webapp/src/components/Terminal/TerminalComp.jsx

@@ -1,22 +1,43 @@
-import React from "react";
+import React, { useState } from "react";
 import { ReactTerminal } from "react-terminal";
-
+import axios from "axios";
 import "./Terminal.css";
 
 const TerminalComp = () => {
+  const [output, setOutput] = useState("");
+
+  const handleCommand = async (command) => {
+    try {
+      const { data } = await axios.post("http://127.0.0.1:10000/gdb_command", {
+        command: command,
+        name: "program",
+      });
+      return data["result"];
+    } catch (error) {
+      return "Error executing command";
+    }
+  };
+
   return (
     <div className="terminal">
-      TerminalComp
       <ReactTerminal
         themes={{
           "my-custom-theme": {
             themeBGColor: "#000",
             themeToolbarColor: "#000",
-            themeColor: "#FFFEFC",
+            themeColor: "#00FF00",
             themePromptColor: "#a917a8",
           },
         }}
         theme="my-custom-theme"
+        commands={{
+          myCommand: async (command) => {
+            return await handleCommand(command);
+          },
+        }}
+        defaultHandler={async (command) => {
+          return await handleCommand(command);
+        }}
       />
     </div>
   );

webapp/src/main.jsx

@@ -3,15 +3,18 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
 import { DataProvider } from "./context/DataContext";
+import { TerminalContextProvider } from "react-terminal";
 import App from "./App";
 import "./index.css";
 
 ReactDOM.render(
   <BrowserRouter>
     <DataProvider>
-      <React.StrictMode>
-        <App />
-      </React.StrictMode>
+      <TerminalContextProvider>
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>
+      </TerminalContextProvider>
     </DataProvider>
   </BrowserRouter>,
   document.getElementById("root")