Feat: Connected adding breakpoints with server and toast feature to inform user.

webapp/package.json

@@ -19,6 +19,7 @@
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
     "react-terminal": "^1.4.4",
+    "react-toastify": "^10.0.5",
     "react-toggle-dark-mode": "^1.1.1",
     "terminal-in-react": "^4.3.1"
   },

webapp/src/components/Breakpoint/Breakpoint.css

@@ -28,3 +28,13 @@
   align-items: center;
   gap: 28px;
 }
+
+.save-button {
+  display: flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 2px;
+  background: var(--primary-orange, #e88f40);
+}

webapp/src/components/Breakpoint/Breakpoint.jsx

@@ -1,20 +1,77 @@
-import React from "react";
+import React, { useState } from "react";
 import "./Breakpoint.css";
 
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import axios from "axios";
+
 const Breakpoint = () => {
+  const [breakLine, setBreakLine] = useState("");
+  const [breakFunction, setBreakFunction] = useState("");
+
+  const handleBreakSave = async (e) => {
+    e.preventDefault();
+    if (!breakLine && !breakFunction) {
+      toast.error("Enter any of the field", {
+        autoClose: 1000,
+      });
+      return;
+    }
+    try {
+      const data = await axios.post("http://127.0.0.1:10000/set_breakpoint", {
+        location: breakLine,
+        name: "program",
+      });
+      console.log(data);
+      toast.success("Added breakpoint", {
+        autoClose: 1000,
+      });
+    } catch (error) {
+      toast.error("Something went Wrong", {
+        autoClose: 1000,
+      });
+    }
+  };
   return (
     <div className="breakpoint-container">
       <div className="add-breakpoint">Add Breakpoint</div>
       <div className="lower-breakpoint">
         <div className="line-breakpoint">
           <a>Line</a>
-          <input type="text" name="" id="" />
+          <input
+            type="text"
+            name=""
+            id=""
+            value={breakLine}
+            onChange={(e) => setBreakLine(e.target.value)}
+          />
         </div>
         <div className="line-breakpoint">
           <a>Function</a>
-          <input type="text" name="" id="" />
+          <input
+            type="text"
+            name=""
+            id=""
+            value={breakFunction}
+            onChange={(e) => setBreakFunction(e.target.value)}
+          />
         </div>
+        <button className="save-button" onClick={handleBreakSave}>
+          Add
+        </button>
       </div>
+      <ToastContainer
+        position="bottom-right"
+        autoClose={1000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="light"
+      />
     </div>
   );
 };

webapp/src/components/Functions/Functions.jsx

@@ -1,29 +1,53 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { DataState } from "./../../context/DataContext";
 import "./Functions.css";
+import axios from "axios";
+
+const data = [
+  "sub.KERNEL32.dll_DeleteCritical_231",
+  "sub.KERNEL32.dll_DeleteCritical_231",
+  "sub.KERNEL32.dll_DeleteCritical_231",
+  "sub.KERNEL32.dll_DeleteCritical_231",
+  "sub.KERNEL32.dll_DeleteCritical_231",
+  "sub.KERNEL32.dll_DeleteCritical_231",
+  "sub.KERNEL32.dll_DeleteCritical_231",
+  "sub.KERNEL32.dll_DeleteCritical_231",
+  "sub.KERNEL32.dll_DeleteCritical_231",
+  "sub.KERNEL32.dll_DeleteCritical_231",
+];
 
 const Functions = () => {
+  const { refresh, functions, setFunctions } = DataState();
+
+  const fetchFunctionsData = async () => {
+    try {
+      console.log("click from functions");
+      const data = await axios.post("http://127.0.0.1:10000/get_locals", {
+        name: "program",
+      });
+      console.log(data.data.result);
+      setFunctions(data.data.result);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    if (refresh) {
+      fetchFunctionsData();
+    }
+  }, [refresh]);
+
   return (
     <div className="functions-parent">
       <a className="functions-heading"> Functions</a>
       offset
       <div className="functions">
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
-        <a>sub.KERNEL32.dll_DeleteCritical_231</a>
+        {functions}
+        {data.map((obj) => {
+          return <a>{obj}</a>;
+        })}
+        {/* <a>sub.KERNEL32.dll_DeleteCritical_231</a> */}
       </div>
     </div>
   );

webapp/src/components/Functions/__tests__/Functions.test.jsx

@@ -1,11 +1,22 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import Functions from "../Functions.jsx"; // Adjust the import path as per your project structure
+import Functions from "../Functions.jsx";
+import { vi } from "vitest";
 
-test("renders Functions component with correct heading and function names", () => {
+vi.mock("../../../context/DataContext.jsx", () => ({
+  DataState: () => ({
+    refresh: false,
+    functions: [],
+    setFunctions: vi.fn(),
+  }),
+}));
+
+test("renders Functions component with correct heading", () => {
   render(<Functions />);
 
-  // Assert the presence of the heading
   const headingElement = screen.getByText(/Functions/i);
   expect(headingElement).toBeInTheDocument();
+
+  const functionElements = screen.queryAllByRole("link");
+  expect(functionElements).toHaveLength(0);
 });

webapp/src/components/GdbComponents/BreakPoints/BreakPoints.jsx

@@ -1,5 +1,7 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { DataState } from "./../../../context/DataContext";
 import "./BreakPoints.css";
+import axios from "axios";
 
 const data = [
   {
@@ -21,11 +23,28 @@ const data = [
 ];
 
 const BreakPoints = () => {
+  const { refresh, setInfoBreakpointData, infoBreakpointData } = DataState();
+
+  const fetchInfoBreakpoints = async () => {
+    const data = await axios.post("http://127.0.0.1:10000/info_breakpoints", {
+      name: "program",
+    });
+    console.log(data.data["result"]);
+    setInfoBreakpointData(data.data["result"]);
+  };
+  useEffect(() => {
+    if (refresh) {
+      console.log("click from breakpoint in GdbComponents");
+      fetchInfoBreakpoints();
+    }
+  }, [refresh]);
   return (
     <div>
       {/* BreakPoints */}
       <div className="breakpoints">
-        {data?.length > 0
+        {infoBreakpointData
+          ? infoBreakpointData
+          : data?.length > 0
           ? data.map((obj) => {
               return (
                 <div>
@@ -34,7 +53,8 @@ const BreakPoints = () => {
                 </div>
               );
             })
-          : ""}
+          : infoBreakpointData}
+        {}
       </div>
     </div>
   );

webapp/src/components/GdbComponents/MemoryMap/MemoryMap.jsx

@@ -1,5 +1,8 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { DataState } from "./../../../context/DataContext";
+
 import "./MemoryMap.css";
+import axios from "axios";
 
 const data = [
   "0x7fffffffe270: 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00",
@@ -12,11 +15,28 @@ const data = [
   "0x7fffffffe270: 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00",
 ];
 const MemoryMap = () => {
+  const { refresh, memoryMap, setMemoryMap } = DataState();
+
+  const fetchMemoryMap = async () => {
+    console.log("Click form memory map");
+    const data = await axios.post("http://127.0.0.1:10000/memory_map", {
+      name: "program",
+    });
+    console.log(data.data.result);
+    setMemoryMap(data.data.result);
+  };
+
+  useEffect(() => {
+    if (refresh) fetchMemoryMap();
+  }, [refresh]);
+
   return (
     <div>
       {/* MemoryMap */}
       <div className="memoryMap">
-        {data?.length > 0
+        {memoryMap
+          ? memoryMap
+          : data?.length > 0
           ? data.map((obj) => {
               return <a>{obj}</a>;
             })

webapp/src/components/Stack/Stack.jsx

@@ -1,16 +1,32 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { DataState } from "./../../context/DataContext";
 import "./Stack.css";
+import axios from "axios";
 
 const Stack = () => {
+  const { refresh, stack, setStack } = DataState();
+
+  const fetStackData = async () => {
+    try {
+      console.log("click from stack");
+      const data = await axios.post("http://127.0.0.1:10000/stack_trace", {
+        name: "program",
+      });
+      console.log(data.data.result);
+      setStack(data.data.result);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  useEffect(() => {
+    if (refresh) fetStackData();
+  }, [refresh]);
   return (
     <div className="stack-parent">
       <div className="stack-heading">Stack</div>
       Offset
       <div className="stack">
-        <div>0x001780c8 0x001780c8 0x001780c8 0x001780c8</div>
-        <div>0x001780c8 0x001780c8 0x001780c8 0x001780c8</div>
-        <div>0x001780c8 0x001780c8 0x001780c8 0x001780c8</div>
-        <div>0x001780c8 0x001780c8 0x001780c8 0x001780c8</div>
+        <div>{stack}</div>
         <div>0x001780c8 0x001780c8 0x001780c8 0x001780c8</div>
         <div>0x001780c8 0x001780c8 0x001780c8 0x001780c8</div>
         <div>0x001780c8 0x001780c8 0x001780c8 0x001780c8</div>