Refactor state management and fix refresh race condition

This commit is contained in:
vee1e 2026-03-08 19:31:08 +05:30
parent 309d872210
commit 94a9ff343c
6 changed files with 65 additions and 77 deletions

4
webapp/.gitignore vendored
View file

@ -22,3 +22,7 @@ dist-ssr
*.njsproj
*.sln
*.sw?
# Coverage and lockfiles
coverage/
bun.lock

View file

@ -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 (
<div className="functions-parent">

View file

@ -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 (
<div>
{/* BreakPoints */}
@ -45,7 +30,7 @@ const BreakPoints = () => {
{infoBreakpointData
? infoBreakpointData
: data?.length > 0
? data.map((obj) => {
? data.map((obj) => {
return (
<div>
<div>{obj.offset}</div>
@ -53,8 +38,8 @@ const BreakPoints = () => {
</div>
);
})
: infoBreakpointData}
{}
: infoBreakpointData}
{ }
</div>
</div>
);

View file

@ -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 (
<div>
@ -37,10 +23,10 @@ const MemoryMap = () => {
{memoryMap
? memoryMap
: data?.length > 0
? data.map((obj) => {
? data.map((obj) => {
return <a>{obj}</a>;
})
: ""}
: ""}
</div>
</div>
);

View file

@ -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 (
<div className="stack-parent">
<div className="stack-heading">Stack</div>

View file

@ -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);