Fetch recent measurements when connected

See also: #10
snu-quiqcl · Dec 7, 2024 · f9a4dc0 · f9a4dc0
1 parent 7957a83
commit f9a4dc0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/wlm-ui/src/MainPage/Channel/Channel.tsx b/wlm-ui/src/MainPage/Channel/Channel.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { AppDispatch } from '../../store';
@@ -38,9 +38,9 @@ const Channel = (props: IProps) => {
             `${process.env.REACT_APP_WEBSOCKET_URL}/measurement/${channel}/`);
 
         socket.onmessage = event => {
-            const data = JSON.parse(event.data) as MeasurementType;
-            dispatch(channelListActions.fetchMeasurement(
-                { channel: channel, measurement: data }));
+            const data = JSON.parse(event.data) as MeasurementType | MeasurementType[];
+            dispatch(channelListActions.fetchMeasurements(
+                { channel: channel, measurements: data }));
         };
 
         return () => socket.close();

diff --git a/wlm-ui/src/store/slices/channel/channel.ts b/wlm-ui/src/store/slices/channel/channel.ts
@@ -94,13 +94,18 @@ export const channelListSlice = createSlice({
                 info.setting.period = period;
             }
         },
-        fetchMeasurement: (
+        fetchMeasurements: (
             state,
-            action: PayloadAction<Pick<ChannelType, 'channel'> & { measurement: MeasurementType }>
+            action: PayloadAction<
+                Pick<ChannelType, 'channel'> & { measurements: MeasurementType | MeasurementType[] }>
         ) => {
-            const { channel, measurement } = action.payload;
+            const { channel, measurements } = action.payload;
             const info = getChannelInfoWithException(state, channel);
-            info.measurements.push(measurement);
+            if (Array.isArray(measurements)) {
+                info.measurements.push(...measurements);
+            } else {
+                info.measurements.push(measurements);
+            }
         },
         removeOldMeasurements: (state, action: PayloadAction<Pick<ChannelType, 'channel'>>) => {
             const info = getChannelInfoWithException(state, action.payload.channel);