mirror of
https://github.com/vee1e/GDB-UI.git
synced 2026-09-01 18:57:18 +00:00
Refactor state management and fix refresh race condition
This commit is contained in:
parent
309d872210
commit
94a9ff343c
6 changed files with 65 additions and 77 deletions
4
webapp/.gitignore
vendored
4
webapp/.gitignore
vendored
|
|
@ -22,3 +22,7 @@ dist-ssr
|
|||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Coverage and lockfiles
|
||||
coverage/
|
||||
bun.lock
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue