Feat: Connected adding breakpoints with server

And also added toast functionality to infrom the 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,78 @@
-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();
+    console.log("click");
+    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/context/DataContext.jsx

@@ -17,18 +17,15 @@ export const DataProvider = ({ children }) => {
   const fetchData = useCallback(async () => {
     if (refresh) {
       try {
-        // Your data fetching logic here
         const stackResponse = await axios.get("/api/stack");
         const functionsResponse = await axios.get("/api/functions");
 
         setStack(stackResponse.data);
         setFunctions(functionsResponse.data);
 
-        // Reset refresh after data is fetched
         setRefresh(false);
       } catch (error) {
         console.error("Error fetching data:", error);
-        // Optional: set refresh to false on error as well
         setRefresh(false);
       }
     }