Skip to content

Commit 8efec3b

Browse files
1Blademaster1Blademaster
authored
Fix activeTab state not updating bug (#625)
* Fix activeTab state not updating bug * Move getFrameName function into dataFormatters file
1 parent 6e2434f commit 8efec3b

5 files changed

Lines changed: 75 additions & 71 deletions

File tree

‎gcs/src/components/missions/fenceItemsTableRow.jsx‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,12 @@ import {
1111
} from "@mantine/core"
1212
import { IconArrowDown, IconArrowUp, IconTrash } from "@tabler/icons-react"
1313
import { useEffect, useState } from "react"
14-
import { coordToInt, intToCoord } from "../../helpers/dataFormatters"
1514
import {
16-
FENCE_ITEM_COMMANDS_LIST,
17-
MAV_FRAME_LIST,
18-
} from "../../helpers/mavlinkConstants"
15+
coordToInt,
16+
getPositionFrameName,
17+
intToCoord,
18+
} from "../../helpers/dataFormatters"
19+
import { FENCE_ITEM_COMMANDS_LIST } from "../../helpers/mavlinkConstants"
1920

2021
const coordsFractionDigits = 9
2122

@@ -38,16 +39,6 @@ function getAvailableCommands() {
3839
}))
3940
}
4041

41-
function getFrameName(frameId) {
42-
var frameName = MAV_FRAME_LIST[frameId]
43-
44-
if (frameName.startsWith("MAV_FRAME_")) {
45-
frameName = frameName.replace("MAV_FRAME_", "")
46-
}
47-
48-
return frameName || "UNKNOWN"
49-
}
50-
5142
export default function FenceItemsTableRow({
5243
index,
5344
fenceItem,
@@ -120,7 +111,7 @@ export default function FenceItemsTableRow({
120111
hideControls
121112
/>
122113
</TableTd>
123-
<TableTd>{getFrameName(fenceItemData.frame)}</TableTd>
114+
<TableTd>{getPositionFrameName(fenceItemData.frame)}</TableTd>
124115
<TableTd className="flex flex-row gap-2">
125116
<ActionIcon
126117
onClick={() => updateMissionItemOrder(fenceItemData.id, -1)}

‎gcs/src/components/missions/missionItemsTableRow.jsx‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,13 @@ import {
1111
} from "@mantine/core"
1212
import { IconArrowDown, IconArrowUp, IconTrash } from "@tabler/icons-react"
1313
import { useEffect, useState } from "react"
14-
import { coordToInt, intToCoord } from "../../helpers/dataFormatters"
14+
import {
15+
coordToInt,
16+
getPositionFrameName,
17+
intToCoord,
18+
} from "../../helpers/dataFormatters"
1519
import {
1620
COPTER_MISSION_ITEM_COMMANDS_LIST,
17-
MAV_FRAME_LIST,
1821
PLANE_MISSION_ITEM_COMMANDS_LIST,
1922
} from "../../helpers/mavlinkConstants"
2023

@@ -60,16 +63,6 @@ export default function MissionItemsTableRow({
6063
}))
6164
}
6265

63-
function getFrameName(frameId) {
64-
var frameName = MAV_FRAME_LIST[frameId]
65-
66-
if (frameName.startsWith("MAV_FRAME_")) {
67-
frameName = frameName.replace("MAV_FRAME_", "")
68-
}
69-
70-
return frameName || "UNKNOWN"
71-
}
72-
7366
function updateMissionItemData(key, newVal) {
7467
setMissionItemData({
7568
...missionItemData,
@@ -139,7 +132,7 @@ export default function MissionItemsTableRow({
139132
hideControls
140133
/>
141134
</TableTd>
142-
<TableTd>{getFrameName(missionItemData.frame)}</TableTd>
135+
<TableTd>{getPositionFrameName(missionItemData.frame)}</TableTd>
143136
<TableTd className="flex flex-row gap-2">
144137
<ActionIcon
145138
onClick={() => updateMissionItemOrder(missionItemData.id, -1)}

‎gcs/src/components/missions/rallyItemsTableRow.jsx‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@ import {
1111
} from "@mantine/core"
1212
import { IconTrash } from "@tabler/icons-react"
1313
import { useEffect, useState } from "react"
14-
import { coordToInt, intToCoord } from "../../helpers/dataFormatters"
15-
import { MAV_FRAME_LIST } from "../../helpers/mavlinkConstants"
14+
import {
15+
coordToInt,
16+
getPositionFrameName,
17+
intToCoord,
18+
} from "../../helpers/dataFormatters"
1619
const coordsFractionDigits = 9
1720

1821
export default function RallyItemsTableRow({
@@ -31,16 +34,6 @@ export default function RallyItemsTableRow({
3134
updateRallyItem(rallyItemData)
3235
}, [rallyItemData])
3336

34-
function getFrameName(frameId) {
35-
var frameName = MAV_FRAME_LIST[frameId]
36-
37-
if (frameName.startsWith("MAV_FRAME_")) {
38-
frameName = frameName.replace("MAV_FRAME_", "")
39-
}
40-
41-
return frameName || "UNKNOWN"
42-
}
43-
4437
function updateRallyItemData(key, newVal) {
4538
setRallyItemData({
4639
...rallyItemData,
@@ -92,7 +85,7 @@ export default function RallyItemsTableRow({
9285
hideControls
9386
/>
9487
</TableTd>
95-
<TableTd>{getFrameName(rallyItemData.frame)}</TableTd>
88+
<TableTd>{getPositionFrameName(rallyItemData.frame)}</TableTd>
9689
<TableTd>
9790
<ActionIcon
9891
onClick={() => deleteRallyItem(rallyItemData.id)}

‎gcs/src/helpers/dataFormatters.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { MAV_FRAME_LIST } from "./mavlinkConstants"
2+
13
function radToDeg(val) {
24
return (val * 180) / Math.PI
35
}
@@ -16,3 +18,17 @@ export const dataFormatters = {
1618
"ATTITUDE.roll": radToDeg,
1719
"ATTITUDE.yaw": radToDeg,
1820
}
21+
22+
export function getPositionFrameName(frameId) {
23+
if (frameId === undefined || frameId === null) {
24+
return "UNKNOWN"
25+
}
26+
27+
var frameName = MAV_FRAME_LIST[frameId]
28+
29+
if (frameName.startsWith("MAV_FRAME_")) {
30+
frameName = frameName.replace("MAV_FRAME_", "")
31+
}
32+
33+
return frameName || "UNKNOWN"
34+
}

‎gcs/src/missions.jsx‎

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ export default function Missions() {
6565

6666
const [activeTab, setActiveTab] = useState("mission")
6767

68+
// Need to keep a reference to the active tab to avoid stale closures
69+
const activeTabRef = useRef(activeTab)
70+
6871
// Mission data
6972
const [missionItems, setMissionItems] = useSessionStorage({
7073
key: "missionItems",
@@ -258,6 +261,10 @@ export default function Missions() {
258261
}
259262
}, [importFile])
260263

264+
useEffect(() => {
265+
activeTabRef.current = activeTab
266+
}, [activeTab])
267+
261268
function resetMissionProgressModalData() {
262269
setMissionProgressModalData({
263270
message: "",
@@ -304,11 +311,15 @@ export default function Missions() {
304311
z: newMissionItemAltitude,
305312
frame: parseInt(
306313
Object.keys(MAV_FRAME_LIST).find(
307-
(key) => MAV_FRAME_LIST[key] === "MAV_FRAME_GLOBAL_RELATIVE_ALT",
314+
(key) =>
315+
MAV_FRAME_LIST[key] ===
316+
(activeTabRef.current === "fence"
317+
? "MAV_FRAME_GLOBAL"
318+
: "MAV_FRAME_GLOBAL_RELATIVE_ALT"),
308319
),
309320
),
310321
command: null,
311-
param1: activeTab === "fence" ? 5 : 0,
322+
param1: activeTabRef.current === "fence" ? 5 : 0,
312323
param2: 0,
313324
param3: 0,
314325
param4: 0,
@@ -320,19 +331,19 @@ export default function Missions() {
320331
mavpackettype: "MISSION_ITEM_INT",
321332
}
322333

323-
if (activeTab === "mission") {
334+
if (activeTabRef.current === "mission") {
324335
newMissionItem.seq = missionItems.length
325336
newMissionItem.command = 16 // MAV_CMD_NAV_WAYPOINT
326337
newMissionItem.mission_type = 0 // Mission type
327338

328339
setMissionItems((prevItems) => [...prevItems, newMissionItem])
329-
} else if (activeTab === "fence") {
340+
} else if (activeTabRef.current === "fence") {
330341
newMissionItem.seq = fenceItems.length
331342
newMissionItem.command = 5004 // MAV_CMD_NAV_FENCE_CIRCLE_EXCLUSION
332343
newMissionItem.mission_type = 1 // Fence type
333344

334345
setFenceItems((prevItems) => [...prevItems, newMissionItem])
335-
} else if (activeTab === "rally") {
346+
} else if (activeTabRef.current === "rally") {
336347
newMissionItem.seq = rallyItems.length
337348
newMissionItem.command = 5100 // MAV_CMD_NAV_RALLY_POINT
338349
newMissionItem.mission_type = 2 // Rally type
@@ -368,11 +379,11 @@ export default function Missions() {
368379
target_component: targetInfo.target_component,
369380
target_system: targetInfo.target_system,
370381
mission_type:
371-
activeTab === "mission"
382+
activeTabRef.current === "mission"
372383
? 0
373-
: activeTab === "fence"
384+
: activeTabRef.current === "fence"
374385
? 1
375-
: activeTab === "rally"
386+
: activeTabRef.current === "rally"
376387
? 2
377388
: 0, // Default to 0 (Mission type) if activeTab is unrecognized,
378389
mavpackettype: "MISSION_ITEM_INT",
@@ -390,11 +401,11 @@ export default function Missions() {
390401
)
391402
}
392403

393-
if (activeTab === "mission") {
404+
if (activeTabRef.current === "mission") {
394405
setMissionItems((prevItems) => getUpdatedItems(prevItems))
395-
} else if (activeTab === "fence") {
406+
} else if (activeTabRef.current === "fence") {
396407
setFenceItems((prevItems) => getUpdatedItems(prevItems))
397-
} else if (activeTab === "rally") {
408+
} else if (activeTabRef.current === "rally") {
398409
setRallyItems((prevItems) => getUpdatedItems(prevItems))
399410
}
400411
}
@@ -409,11 +420,11 @@ export default function Missions() {
409420
}))
410421
}
411422

412-
if (activeTab === "mission") {
423+
if (activeTabRef.current === "mission") {
413424
setMissionItems((prevItems) => getUpdatedItems(prevItems))
414-
} else if (activeTab === "fence") {
425+
} else if (activeTabRef.current === "fence") {
415426
setFenceItems((prevItems) => getUpdatedItems(prevItems))
416-
} else if (activeTab === "rally") {
427+
} else if (activeTabRef.current === "rally") {
417428
setRallyItems((prevItems) => getUpdatedItems(prevItems))
418429
}
419430
}
@@ -451,39 +462,39 @@ export default function Missions() {
451462
return updatedItems
452463
}
453464

454-
if (activeTab === "mission") {
465+
if (activeTabRef.current === "mission") {
455466
setMissionItems((prevItems) => updateItemOrder(prevItems))
456-
} else if (activeTab === "fence") {
467+
} else if (activeTabRef.current === "fence") {
457468
setFenceItems((prevItems) => updateItemOrder(prevItems))
458469
}
459470
}
460471

461472
function readMissionFromDrone() {
462-
socket.emit("get_current_mission", { type: activeTab })
463-
setMissionProgressModalTitle(`Reading ${activeTab} from drone`)
473+
socket.emit("get_current_mission", { type: activeTabRef.current })
474+
setMissionProgressModalTitle(`Reading ${activeTabRef.current} from drone`)
464475
resetMissionProgressModalData()
465476
openMissionProgressModal()
466477
}
467478

468479
function writeMissionToDrone() {
469-
if (activeTab === "mission") {
480+
if (activeTabRef.current === "mission") {
470481
socket.emit("write_current_mission", {
471482
type: "mission",
472483
items: missionItems,
473484
})
474-
} else if (activeTab === "fence") {
485+
} else if (activeTabRef.current === "fence") {
475486
socket.emit("write_current_mission", { type: "fence", items: fenceItems })
476-
} else if (activeTab === "rally") {
487+
} else if (activeTabRef.current === "rally") {
477488
socket.emit("write_current_mission", { type: "rally", items: rallyItems })
478489
}
479-
setMissionProgressModalTitle(`Writing ${activeTab} to drone`)
490+
setMissionProgressModalTitle(`Writing ${activeTabRef.current} to drone`)
480491
resetMissionProgressModalData()
481492
openMissionProgressModal()
482493
}
483494

484495
function importMissionFromFile(filePath) {
485496
socket.emit("import_mission_from_file", {
486-
type: activeTab,
497+
type: activeTabRef.current,
487498
file_path: filePath,
488499
})
489500

@@ -506,9 +517,9 @@ export default function Missions() {
506517

507518
if (!result.canceled) {
508519
let items = []
509-
if (activeTab === "mission") {
520+
if (activeTabRef.current === "mission") {
510521
items = [...missionItems]
511-
} else if (activeTab === "fence") {
522+
} else if (activeTabRef.current === "fence") {
512523
items = [...fenceItems]
513524

514525
const newHomeItem = createHomePositionItem()
@@ -521,7 +532,7 @@ export default function Missions() {
521532
...item,
522533
seq: index,
523534
}))
524-
} else if (activeTab === "rally") {
535+
} else if (activeTabRef.current === "rally") {
525536
items = [...rallyItems]
526537

527538
const newHomeItem = createHomePositionItem()
@@ -537,7 +548,7 @@ export default function Missions() {
537548
}
538549

539550
socket.emit("export_mission_to_file", {
540-
type: activeTab,
551+
type: activeTabRef.current,
541552
file_path: result.filePath,
542553
items: items,
543554
})
@@ -592,7 +603,7 @@ export default function Missions() {
592603
}
593604

594605
function clearMissionItems() {
595-
if (activeTab === "mission") {
606+
if (activeTabRef.current === "mission") {
596607
// Clear all mission items except the first if the first is a home position
597608
if (
598609
missionItems.length > 0 &&
@@ -602,9 +613,9 @@ export default function Missions() {
602613
} else {
603614
setMissionItems([])
604615
}
605-
} else if (activeTab === "fence") {
616+
} else if (activeTabRef.current === "fence") {
606617
setFenceItems([])
607-
} else if (activeTab === "rally") {
618+
} else if (activeTabRef.current === "rally") {
608619
setRallyItems([])
609620
}
610621
}

0 commit comments

Comments
 (0)