Skip to content

Commit f56f513

Browse files
davegarthsimpsondavegarthsimpson
committed
correct and clean up config update procedure
1 parent df04712 commit f56f513

File tree

4 files changed

+118
-55
lines changed

4 files changed

+118
-55
lines changed

‎src/App.tsx

+106-17
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,25 @@ import { EOL, isEOL, MonitorSettings, PluggableMonitor } from "./utils";
55

66
export default function App() {
77
const [config, setConfig] = useState<Partial<MonitorSettings | null>>(null);
8+
9+
const [webSocketPort, setWebsocketPort] = useState<number>();
10+
const [serialPort, setSerialPort] = useState<string>();
11+
812
const [websocketIsConnected, setWebsocketIsConnected] = useState(false);
913

1014
const websocket = useRef<WebSocket | null>(null);
1115

1216
const chartRef = useRef<any>();
1317

18+
const wsSend = useCallback(
19+
(clientCommand: PluggableMonitor.Protocol.ClientCommandMessage) => {
20+
if (websocket.current?.readyState === WebSocket.OPEN) {
21+
websocket.current.send(JSON.stringify(clientCommand));
22+
}
23+
},
24+
[]
25+
);
26+
1427
const onMiddlewareMessage = useCallback(
1528
(message: PluggableMonitor.Protocol.Message) => {
1629
// if there is no command
@@ -20,13 +33,22 @@ export default function App() {
2033
}
2134

2235
if (PluggableMonitor.Protocol.isMiddlewareCommandMessage(message)) {
23-
const { darkTheme, serialPort, connected } =
24-
message.data.monitorUISettings || {};
36+
const {
37+
autoscroll,
38+
timestamp,
39+
lineEnding,
40+
interpolate,
41+
darkTheme,
42+
wsPort,
43+
serialPort: serialPortExtracted,
44+
connected,
45+
generate,
46+
} = message.data.monitorUISettings || {};
2547

2648
let updateTitle = false;
27-
let serialNameTitle = config?.monitorUISettings?.serialPort;
28-
if (typeof serialPort !== "undefined") {
29-
serialNameTitle = serialPort;
49+
let serialNameTitle = serialPort;
50+
if (typeof serialPortExtracted !== "undefined") {
51+
serialNameTitle = serialPortExtracted;
3052
updateTitle = true;
3153
}
3254

@@ -45,32 +67,99 @@ export default function App() {
4567
? document.body.classList.add("dark")
4668
: document.body.classList.remove("dark");
4769
}
48-
setConfig((c) => ({ ...c, ...message.data }));
70+
71+
// ** we should not set a "setting" as undefined FROM THE IDE,
72+
// ** more specifically we will not overwrite a given "setting" if we receive a message from the IDE that doesn't include it,
73+
// ** we only overwrite a given "setting" if we recieve a value for it (that's not undefined) from the IDE
74+
75+
const { id, label, type, values, selectedValue } =
76+
message.data.pluggableMonitorSettings?.baudrate || {};
77+
78+
setConfig((prevConfig) => ({
79+
pluggableMonitorSettings: {
80+
baudrate: {
81+
id:
82+
typeof id === "undefined"
83+
? prevConfig?.pluggableMonitorSettings?.baudrate?.id
84+
: id,
85+
label:
86+
typeof label === "undefined"
87+
? prevConfig?.pluggableMonitorSettings?.baudrate?.label
88+
: label,
89+
type:
90+
typeof type === "undefined"
91+
? prevConfig?.pluggableMonitorSettings?.baudrate?.type
92+
: type,
93+
values:
94+
typeof values === "undefined"
95+
? prevConfig?.pluggableMonitorSettings?.baudrate?.values
96+
: values,
97+
selectedValue:
98+
typeof selectedValue === "undefined"
99+
? prevConfig?.pluggableMonitorSettings?.baudrate
100+
?.selectedValue || "9600"
101+
: selectedValue,
102+
},
103+
},
104+
monitorUISettings: {
105+
autoscroll:
106+
typeof autoscroll === "undefined"
107+
? prevConfig?.monitorUISettings?.autoscroll
108+
: autoscroll,
109+
timestamp:
110+
typeof timestamp === "undefined"
111+
? prevConfig?.monitorUISettings?.timestamp
112+
: timestamp,
113+
lineEnding:
114+
typeof lineEnding === "undefined"
115+
? prevConfig?.monitorUISettings?.lineEnding
116+
: lineEnding,
117+
interpolate:
118+
typeof interpolate === "undefined"
119+
? prevConfig?.monitorUISettings?.interpolate
120+
: interpolate,
121+
darkTheme:
122+
typeof darkTheme === "undefined"
123+
? prevConfig?.monitorUISettings?.darkTheme
124+
: darkTheme,
125+
connected:
126+
typeof connected === "undefined"
127+
? prevConfig?.monitorUISettings?.connected
128+
: connected,
129+
generate:
130+
typeof generate === "undefined"
131+
? prevConfig?.monitorUISettings?.generate
132+
: generate,
133+
},
134+
}));
135+
136+
if (typeof serialPortExtracted !== "undefined") {
137+
setSerialPort(serialPortExtracted);
138+
}
139+
if (typeof wsPort !== "undefined") {
140+
setWebsocketPort(wsPort);
141+
}
49142
}
50143
},
51-
[config?.monitorUISettings?.serialPort]
144+
[serialPort]
52145
);
53146

54147
// as soon as the wsPort is set, create a websocket connection
55148
useEffect(() => {
56-
if (!config?.monitorUISettings?.wsPort) {
149+
if (!webSocketPort) {
57150
return;
58151
}
59152

60-
console.log(
61-
`opening ws connection on localhost:${config?.monitorUISettings?.wsPort}`
62-
);
63-
websocket.current = new WebSocket(
64-
`ws://localhost:${config?.monitorUISettings?.wsPort}`
65-
);
153+
console.log(`opening ws connection on localhost:${webSocketPort}`);
154+
websocket.current = new WebSocket(`ws://localhost:${webSocketPort}`);
66155
setWebsocketIsConnected(true);
67156

68157
const wsCurrent = websocket.current;
69158
return () => {
70159
console.log("closing ws connection");
71160
wsCurrent.close();
72161
};
73-
}, [config?.monitorUISettings?.wsPort]);
162+
}, [webSocketPort]);
74163

75164
useEffect(() => {
76165
if (websocketIsConnected && websocket.current) {
@@ -93,7 +182,7 @@ export default function App() {
93182
label: "Baudrate",
94183
type: "enum",
95184
values: (urlParams.get("baudrates") || "").split(","),
96-
selectedValue: urlParams.get("baudrate") || "9600",
185+
selectedValue: urlParams.get("currentBaudrate") || "9600",
97186
},
98187
},
99188
monitorUISettings: {
@@ -132,7 +221,7 @@ export default function App() {
132221

133222
return (
134223
(config && (
135-
<ChartPlotter config={config} ref={chartRef} websocket={websocket} />
224+
<ChartPlotter config={config} wsSend={wsSend} ref={chartRef} />
136225
)) ||
137226
null
138227
);

‎src/ChartPlotter.tsx

+5-11
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import "chartjs-adapter-luxon";
1515
import ChartStreaming from "chartjs-plugin-streaming";
1616

1717
import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
18-
import { MessageToBoard } from "./MessageToBoard";
18+
import MessageToBoard from "./MessageToBoard";
1919

2020
// eslint-disable-next-line
2121
import Worker from "worker-loader!./msgAggregatorWorker";
@@ -27,10 +27,12 @@ const worker = new Worker();
2727
function _Chart(
2828
{
2929
config,
30-
websocket,
30+
wsSend,
3131
}: {
3232
config: Partial<MonitorSettings>;
33-
websocket: React.MutableRefObject<WebSocket | null>;
33+
wsSend: (
34+
clientCommand: PluggableMonitor.Protocol.ClientCommandMessage
35+
) => void;
3436
},
3537
ref: React.ForwardedRef<any>
3638
): React.ReactElement {
@@ -217,14 +219,6 @@ function _Chart(
217219
};
218220
}, [cubicInterpolationMode, opts, dataPointThreshold]);
219221

220-
const wsSend = (
221-
clientCommand: PluggableMonitor.Protocol.ClientCommandMessage
222-
) => {
223-
if (websocket && websocket?.current?.readyState === WebSocket.OPEN) {
224-
websocket.current.send(JSON.stringify(clientCommand));
225-
}
226-
};
227-
228222
return (
229223
<>
230224
<div className="chart-container">

‎src/MessageToBoard.tsx

+6-26
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { useEffect, useState } from "react";
1+
import React, { useState } from "react";
22
import Select from "react-select";
33
import { isEOL, MonitorSettings, PluggableMonitor } from "./utils";
44

5-
export function MessageToBoard({
5+
export default React.memo(function MessageToBoard({
66
config,
77
wsSend,
88
}: {
@@ -13,27 +13,9 @@ export function MessageToBoard({
1313
}): React.ReactElement {
1414
const [message, setMessage] = useState("");
1515

16-
const [baudRate, setBaudrate] = useState(
17-
config?.pluggableMonitorSettings?.baudrate?.selectedValue
18-
);
19-
const [lineEnding, setLineEnding] = useState(
20-
config?.monitorUISettings?.lineEnding
21-
);
22-
const [disabled, setDisabled] = useState(
23-
!config?.monitorUISettings?.connected
24-
);
25-
26-
useEffect(() => {
27-
setBaudrate(config?.pluggableMonitorSettings?.baudrate?.selectedValue);
28-
}, [config.pluggableMonitorSettings]);
29-
30-
useEffect(() => {
31-
setLineEnding(config?.monitorUISettings?.lineEnding);
32-
}, [config?.monitorUISettings?.lineEnding]);
33-
34-
useEffect(() => {
35-
setDisabled(!config?.monitorUISettings?.connected);
36-
}, [config?.monitorUISettings?.connected]);
16+
const baudRate = config?.pluggableMonitorSettings?.baudrate?.selectedValue;
17+
const disabled = !config?.monitorUISettings?.connected;
18+
const lineEnding = config?.monitorUISettings?.lineEnding;
3719

3820
const lineendings = [
3921
{ value: "", label: "No Line Ending" },
@@ -91,7 +73,6 @@ export function MessageToBoard({
9173
menuPlacement="top"
9274
onChange={(event) => {
9375
if (event && isEOL(event.value)) {
94-
setLineEnding(event.value);
9576
wsSend({
9677
command:
9778
PluggableMonitor.Protocol.ClientCommand.CHANGE_SETTINGS,
@@ -121,7 +102,6 @@ export function MessageToBoard({
121102
menuPlacement="top"
122103
onChange={(val) => {
123104
if (val) {
124-
setBaudrate(val.value);
125105
wsSend({
126106
command:
127107
PluggableMonitor.Protocol.ClientCommand.CHANGE_SETTINGS,
@@ -142,4 +122,4 @@ export function MessageToBoard({
142122
</div>
143123
</div>
144124
);
145-
}
125+
});

‎src/utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export interface PluggableMonitorSetting {
1313
// The selected value
1414
selectedValue: string;
1515
}
16-
type PluggableMonitorSettings = Record<string, PluggableMonitorSetting>;
16+
type PluggableMonitorSettings = Record<"baudrate", PluggableMonitorSetting>;
1717

1818
export type EOL = "" | "\n" | "\r" | "\r\n";
1919

0 commit comments

Comments
 (0)