Added context Api in webapp for state managment

webapp/package.json

@@ -13,6 +13,7 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",

webapp/src/components/DebugHeader/DebugHeader.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import {
   FaArrowLeft,
   FaArrowRight,
@@ -8,10 +8,13 @@ import {
 import { IoReload } from "react-icons/io5";
 import { MdSkipNext, MdSkipPrevious } from "react-icons/md";
 import { BsArrowRightSquareFill } from "react-icons/bs";
+import { DataContext } from "../../context/DataContext";
 
 import "./DebugHeader.css";
 
 const DebugHeader = () => {
+  const { refresh, setRefresh } = useContext(DataContext);
+
   return (
     <div className="parent-debug-header">
       <div className="debug-header">
@@ -33,7 +36,9 @@ const DebugHeader = () => {
           <div className="filename-content">filename</div>
         </div>
         <div className="save">
-          <button className="save-button">Save</button>
+          <button className="save-button" onClick={() => setRefresh(!refresh)}>
+            {refresh ? "Saving.." : "Save"}
+          </button>
         </div>
       </div>
     </div>

webapp/src/context/DataContext.jsx

@@ -0,0 +1,30 @@
+import React, { createContext, useState, useEffect, useCallback } from "react";
+import axios from "axios";
+
+export const DataContext = createContext();
+
+export const DataProvider = ({ children }) => {
+  const [refresh, setRefresh] = useState(false);
+  const [stack, setStack] = useState([]);
+  const [functions, setFunctions] = useState([]);
+
+  const fetchData = useCallback(async () => {
+    if (refresh) {
+      try {
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        setRefresh(!refresh);
+      }
+    }
+  });
+
+  useEffect(() => {
+    fetchData();
+  }, [refresh]);
+
+  return (
+    <DataContext.Provider value={{ refresh, setRefresh, stack, functions }}>
+      {children}
+    </DataContext.Provider>
+  );
+};

webapp/src/main.jsx

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