From 06600a26bfbbbe221ab2cc7c9ae404ff0c1ee46f Mon Sep 17 00:00:00 2001
From: Shubh942 <93862397+Shubh942@users.noreply.github.com>
Date: Sun, 11 Aug 2024 14:43:07 +0530
Subject: [PATCH] feat: added functionality of terminal output.

---
 .../src/components/Terminal/TerminalComp.jsx  | 29 ++++++++++++++++---
 webapp/src/main.jsx                           |  9 ++++--
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/Terminal/TerminalComp.jsx b/webapp/src/components/Terminal/TerminalComp.jsx
index 7fa2b1f..6b1c745 100644
--- a/webapp/src/components/Terminal/TerminalComp.jsx
+++ b/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>
   );
diff --git a/webapp/src/main.jsx b/webapp/src/main.jsx
index 446bd5f..76403de 100644
--- a/webapp/src/main.jsx
+++ b/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")