Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f56f513

Browse files
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‎

Lines changed: 106 additions & 17 deletions
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‎

Lines changed: 5 additions & 11 deletions
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‎

Lines changed: 6 additions & 26 deletions
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 defaultReact.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‎

Lines changed: 1 addition & 1 deletion
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)

AltStyle によって変換されたページ (->オリジナル) /