Fetch lock status in real-time

See also: #13

wlm-ui/src/MainPage/Channel/Channel.tsx

@@ -4,7 +4,7 @@ import { Line } from '@nivo/line';
 
 import { AppDispatch } from '../../store';
 import {
-    channelListActions, SettingType, MeasurementType, ChannelInfo
+    channelListActions, SettingType, MeasurementType, LockType, ChannelInfo
 } from '../../store/slices/channel/channel';
 import './Channel.scss';
 
@@ -56,6 +56,19 @@ const Channel = (props: IProps) => {
         return () => socket.close();
     }, [dispatch, props.channel.channel]);
 
+    useEffect(() => {
+        const channel = props.channel.channel;
+        const socket = new WebSocket(`${process.env.REACT_APP_WEBSOCKET_URL}/lock/${channel}/`);
+
+        socket.onmessage = event => {
+            const data = JSON.parse(event.data) as LockType;
+            dispatch(channelListActions.fetchLock(
+                { channel: channel, lock: data }));
+        };
+
+        return () => socket.close();
+    }, [dispatch, props.channel.channel]);
+
     useEffect(() => {
         const channel = props.channel.channel;
 

wlm-ui/src/store/slices/channel/channel.ts

@@ -115,6 +115,13 @@ export const channelListSlice = createSlice({
                 info.measurements.push(measurements);
             }
         },
+        fetchLock: (
+            state, action: PayloadAction<Pick<ChannelType, 'channel'> & { lock: LockType }>
+        ) => {
+            const { channel, lock } = action.payload;
+            const info = getChannelInfoWithException(state, channel);
+            info.lock = lock;
+        },
         removeOldMeasurements: (state, action: PayloadAction<Pick<ChannelType, 'channel'>>) => {
             const info = getChannelInfoWithException(state, action.payload.channel);
             const cutoffTime = new Date(Date.now() - 10 * 60 * 1000);