feat: implement global error states and toast notifications

webapp/package.json

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

webapp/src/App.jsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Route, Routes } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import Debug from "./pages/Debug/Debug";
 import Threads from "./components/GdbComponents/Threads/Threads";
 import LocalVariable from "./components/GdbComponents/LocalVariable/LocalVariable";
@@ -40,6 +42,7 @@ const App = () => {
         {/* You can add more routes here */}
       </Routes>
       <Footer />
+      <ToastContainer theme={isDarkMode} />
     </div>
   );
 };

webapp/src/components/Breakpoint/Breakpoint.jsx

@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 import "./Breakpoint.css";
-
-import { ToastContainer, toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
+import { toast } from "react-toastify";
 import axios from "axios";
 
 const Breakpoint = () => {
@@ -60,18 +58,6 @@ const Breakpoint = () => {
           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

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { DataState } from "./../../context/DataContext";
 import "./Functions.css";
 import axios from "axios";
+import { toast } from "react-toastify";
 
 const data = [
   "sub.KERNEL32.dll_DeleteCritical_231",
@@ -28,7 +29,7 @@ const Functions = () => {
       console.log(data.data.result);
       setFunctions(data.data.result);
     } catch (error) {
-      console.log(error);
+      toast.error("Failed to fetch Functions symbols");
     }
   };
 

webapp/src/components/Stack/Stack.jsx

@@ -2,20 +2,21 @@ import React, { useEffect } from "react";
 import { DataState } from "./../../context/DataContext";
 import "./Stack.css";
 import axios from "axios";
+import { toast } from "react-toastify";
 
 const Stack = () => {
-  const { refresh, stack, setStack } = DataState();
+  const { refresh, stack, setStack, fileName } = 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",
+        name: fileName || "program",
       });
       console.log(data.data.result);
       setStack(data.data.result);
     } catch (error) {
-      console.log(error);
+      toast.error("Failed to fetch Stack trace data");
     }
   };
   useEffect(() => {

webapp/src/components/Terminal/TerminalComp.jsx

@@ -1,24 +1,26 @@
 import React, { useState, useEffect, useRef } from "react";
 import { ReactTerminal } from "react-terminal";
+import { toast } from "react-toastify";
 import axios from "axios";
 import "./Terminal.css";
 import { DataState } from "../../context/DataContext";
 
 const TerminalComp = () => {
-  const { terminalOutput, commandPress } = DataState();
+  const { terminalOutput, commandPress, fileName } = DataState();
   const [output, setOutput] = useState("");
-  const terminalRef = useRef("null");
+  const terminalRef = useRef(null);
 
   const handleCommand = async (command, ...args) => {
     const fullCommand = [command, ...args].join(" ");
     console.log("Full Command:", fullCommand);
     try {
       const { data } = await axios.post("http://127.0.0.1:10000/gdb_command", {
         command: fullCommand,
-        name: "program",
+        name: fileName || "program",
       });
       return data["result"];
     } catch (error) {
+      toast.error("Terminal command failed");
       return "Error executing command";
     }
   };

webapp/src/context/DataContext.jsx

@@ -1,10 +1,5 @@
-import React, {
-  createContext,
-  useState,
-  useEffect,
-  useCallback,
-  useContext,
-} from "react";
+import React, { createContext, useContext, useCallback, useState, useEffect } from "react";
+import { toast } from "react-toastify";
 
 export const DataContext = createContext();
 
@@ -24,7 +19,7 @@ export const DataProvider = ({ children }) => {
       try {
         setRefresh(false);
       } catch (error) {
-        console.error("Error fetching data:", error);
+        toast.error("Failed to establish backend sync");
         setRefresh(false);
       }
     }