From 94a9ff343c8a661420909bf4226aeba863f720fc Mon Sep 17 00:00:00 2001 From: vee1e Date: Sun, 8 Mar 2026 19:31:08 +0530 Subject: [PATCH] Refactor state management and fix refresh race condition --- webapp/.gitignore | 4 ++ webapp/src/components/Functions/Functions.jsx | 23 +-------- .../GdbComponents/BreakPoints/BreakPoints.jsx | 23 ++------- .../GdbComponents/MemoryMap/MemoryMap.jsx | 22 ++------ webapp/src/components/Stack/Stack.jsx | 19 +------ webapp/src/context/DataContext.jsx | 51 +++++++++++++++++++ 6 files changed, 65 insertions(+), 77 deletions(-) diff --git a/webapp/.gitignore b/webapp/.gitignore index a547bf3..13c6194 100644 --- a/webapp/.gitignore +++ b/webapp/.gitignore @@ -22,3 +22,7 @@ dist-ssr *.njsproj *.sln *.sw? + +# Coverage and lockfiles +coverage/ +bun.lock diff --git a/webapp/src/components/Functions/Functions.jsx b/webapp/src/components/Functions/Functions.jsx index 308571b..abdb6a9 100644 --- a/webapp/src/components/Functions/Functions.jsx +++ b/webapp/src/components/Functions/Functions.jsx @@ -1,8 +1,6 @@ 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", @@ -17,26 +15,7 @@ const data = [ ]; 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]); + const { functions } = DataState(); return (
diff --git a/webapp/src/components/GdbComponents/BreakPoints/BreakPoints.jsx b/webapp/src/components/GdbComponents/BreakPoints/BreakPoints.jsx index 70aff64..cfab590 100644 --- a/webapp/src/components/GdbComponents/BreakPoints/BreakPoints.jsx +++ b/webapp/src/components/GdbComponents/BreakPoints/BreakPoints.jsx @@ -1,8 +1,6 @@ import React, { useEffect, useState } from "react"; import { DataState } from "./../../../context/DataContext"; import "./BreakPoints.css"; -import axios from "axios"; - const data = [ { offset: "0x2fffa36f603112ffff34", @@ -23,21 +21,8 @@ const data = [ ]; const BreakPoints = () => { - const { refresh, setInfoBreakpointData, infoBreakpointData } = DataState(); + const { 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 (
{/* BreakPoints */} @@ -45,7 +30,7 @@ const BreakPoints = () => { {infoBreakpointData ? infoBreakpointData : data?.length > 0 - ? data.map((obj) => { + ? data.map((obj) => { return (
{obj.offset}
@@ -53,8 +38,8 @@ const BreakPoints = () => {
); }) - : infoBreakpointData} - {} + : infoBreakpointData} + { }
); diff --git a/webapp/src/components/GdbComponents/MemoryMap/MemoryMap.jsx b/webapp/src/components/GdbComponents/MemoryMap/MemoryMap.jsx index ef52249..3fa352e 100644 --- a/webapp/src/components/GdbComponents/MemoryMap/MemoryMap.jsx +++ b/webapp/src/components/GdbComponents/MemoryMap/MemoryMap.jsx @@ -2,8 +2,6 @@ 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", "0x7fffffffe270: 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00", @@ -14,21 +12,9 @@ const data = [ "0x7fffffffe270: 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00", "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]); + const { memoryMap } = DataState(); return (
@@ -37,10 +23,10 @@ const MemoryMap = () => { {memoryMap ? memoryMap : data?.length > 0 - ? data.map((obj) => { + ? data.map((obj) => { return {obj}; }) - : ""} + : ""}
); diff --git a/webapp/src/components/Stack/Stack.jsx b/webapp/src/components/Stack/Stack.jsx index 654f527..9407f99 100644 --- a/webapp/src/components/Stack/Stack.jsx +++ b/webapp/src/components/Stack/Stack.jsx @@ -1,26 +1,9 @@ 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 { stack } = 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 (
Stack
diff --git a/webapp/src/context/DataContext.jsx b/webapp/src/context/DataContext.jsx index 7bb7f7f..09ea876 100644 --- a/webapp/src/context/DataContext.jsx +++ b/webapp/src/context/DataContext.jsx @@ -5,6 +5,7 @@ import React, { useCallback, useContext, } from "react"; +import axios from "axios"; export const DataContext = createContext(); @@ -19,9 +20,59 @@ export const DataProvider = ({ children }) => { const [terminalOutput, setTerminalOutput] = useState(""); const [commandPress, setCommandPress] = useState(true); + const fetchStackData = async () => { + try { + const data = await axios.post("http://127.0.0.1:10000/stack_trace", { + name: "program", + }); + setStack(data.data.result); + } catch (error) { + console.error("Error fetching stack data:", error); + } + }; + + const fetchFunctionsData = async () => { + try { + const data = await axios.post("http://127.0.0.1:10000/get_locals", { + name: "program", + }); + setFunctions(data.data.result); + } catch (error) { + console.error("Error fetching functions data:", error); + } + }; + + const fetchInfoBreakpoints = async () => { + try { + const data = await axios.post("http://127.0.0.1:10000/info_breakpoints", { + name: "program", + }); + setInfoBreakpointData(data.data.result); + } catch (error) { + console.error("Error fetching breakpoints data:", error); + } + }; + + const fetchMemoryMap = async () => { + try { + const data = await axios.post("http://127.0.0.1:10000/memory_map", { + name: "program", + }); + setMemoryMap(data.data.result); + } catch (error) { + console.error("Error fetching memory map data:", error); + } + }; + const fetchData = useCallback(async () => { if (refresh) { try { + await Promise.all([ + fetchStackData(), + fetchFunctionsData(), + fetchInfoBreakpoints(), + fetchMemoryMap(), + ]); setRefresh(false); } catch (error) { console.error("Error fetching data:", error);