ExternalVendorCode/chirpstack
1
0
Fork 0
mirror of https://github.com/chirpstack/chirpstack.git synced 2025-02-21 01:21:21 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix gRPC stream handling after UI refactor.

Browse Source 
This moves the onMessage handler out of useEffect and it fixes
appending the the array. The .unshift() method does not work
well using React.useState. It would prepend, but since it would not
change the array (it adds an item to the array), the update would
not propagate.
This commit is contained in:
Orne Brocaar 2023-07-27 16:38:20 +01:00
parent 6f1638e87a
commit 651fcfce43
4 changed files with 36 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/stores/InternalStore.ts
View File

@ -101,6 +101,7 @@ class InternalStore extends EventEmitter {
return () => {
if (stream) {
console.log("Cancelling gRPC stream");
stream.cancel();
}
};

23
ui/src/views/devices/DeviceEvents.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useCallback } from "react";
import { Device } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
import { StreamDeviceEventsRequest, LogItem } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
@ -13,17 +13,16 @@ interface IProps {
function DeviceEvents(props: IProps) {
const [events, setEvents] = useState<LogItem[]>([]);
const onMessage = useCallback((l: LogItem) => {
setEvents(e => {
if (e.length === 0 || parseInt(l.getId().replace("-", "")) > parseInt(e[0].getId().replace("-", ""))) {
return [l, ...e];
}
return e;
});
}, []);
useEffect(() => {
const onMessage = (l: LogItem) => {
setEvents(e => {
if (e.length === 0 || parseInt(l.getId().replace("-", "")) > parseInt(e[0].getId().replace("-", ""))) {
e.unshift(l);
}
return e;
});
};
let req = new StreamDeviceEventsRequest();
req.setDevEui(props.device.getDevEui());
@ -32,7 +31,7 @@ function DeviceEvents(props: IProps) {
return () => {
cancelFunc();
};
}, [props]);
}, [props, onMessage]);
return <LogTable logs={events} />;
}

30
ui/src/views/devices/DeviceFrames.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useCallback } from "react";
import { Device } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
import { StreamDeviceFramesRequest, LogItem } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
@ -13,26 +13,20 @@ interface IProps {
function DeviceFrames(props: IProps) {
const [frames, setFrames] = useState<LogItem[]>([]);
const onMessage = useCallback((l: LogItem) => {
setFrames(f => {
if (f.length === 0 || parseInt(l.getId().replace("-", "")) > parseInt(f[0].getId().replace("-", ""))) {
return [l, ...f];
}
return f;
});
}, []);
useEffect(() => {
const onMessage = (l: LogItem) => {
setFrames(f => {
if (f.length === 0 || parseInt(l.getId().replace("-", "")) > parseInt(f[0].getId().replace("-", ""))) {
f.unshift(l);
}
return f;
});
};
let req = new StreamDeviceFramesRequest();
req.setDevEui(props.device.getDevEui());
let cancelFunc = InternalStore.streamDeviceFrames(req, onMessage);
return () => {
cancelFunc();
};
}, [props]);
return InternalStore.streamDeviceFrames(req, onMessage);
}, [props, onMessage]);
return <LogTable logs={frames} />;
}

29
ui/src/views/gateways/GatewayFrames.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useCallback } from "react";
import { Gateway } from "@chirpstack/chirpstack-api-grpc-web/api/gateway_pb";
import { StreamGatewayFramesRequest, LogItem } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
@ -13,25 +13,20 @@ interface IProps {
function GatewayFrames(props: IProps) {
const [frames, setFrames] = useState<LogItem[]>([]);
useEffect(() => {
const onMessage = (l: LogItem) => {
setFrames(f => {
if (f.length === 0 || parseInt(l.getId().replace("-", "")) > parseInt(f[0].getId().replace("-", ""))) {
f.unshift(l);
}
return f;
});
};
const onMessage = useCallback((l: LogItem) => {
setFrames(f => {
if (f.length === 0 || parseInt(l.getId().replace("-", "")) > parseInt(f[0].getId().replace("-", ""))) {
return [l, ...f];
}
return f;
});
}, []);
useEffect(() => {
let req = new StreamGatewayFramesRequest();
req.setGatewayId(props.gateway.getGatewayId());
let cancelFunc = InternalStore.streamGatewayFrames(req, onMessage);
return () => {
cancelFunc();
};
}, [props]);
return InternalStore.streamGatewayFrames(req, onMessage);
}, [props, onMessage]);
return <LogTable logs={frames} />;
}