Update hasLock when request succeeds

See also: #13
snu-quiqcl · Dec 7, 2024 · 04d3870 · 04d3870
1 parent 1ef6f39
commit 04d3870
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.tsx b/wlm-ui/src/MainPage/Channel/ChannelList.tsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { AppDispatch } from '../../store';
 import {
-    fetchList, postInUse, postExposure, postPeriod, selectChannelList,
+    fetchList, postInUse, postExposure, postPeriod, tryLock, releaseLock, selectChannelList,
 } from '../../store/slices/channel/channel';
 import Channel from './Channel';
 import './ChannelList.scss';
@@ -33,11 +33,11 @@ const ChannelList = () => {
     };
 
     const onClickTryLock = (channel: number) => {
-
+        dispatch(tryLock({ channel: channel }));
     };
 
     const onClickReleaseLock = (channel: number) => {
-
+        dispatch(releaseLock({ channel: channel }));
     };
 
     return (

diff --git a/wlm-ui/src/store/slices/channel/channel.ts b/wlm-ui/src/store/slices/channel/channel.ts
@@ -86,6 +86,24 @@ export const postPeriod = createAsyncThunk(
     },
 );
 
+export const tryLock = createAsyncThunk(
+    'channel/tryLock',
+    async (payload: Pick<ChannelType, 'channel'>) => {
+        const { channel } = payload;
+        await axios.post(`/lock/${channel}/try/`);
+        return { channel: channel };
+    },
+);
+
+export const releaseLock = createAsyncThunk(
+    'channel/releaseLock',
+    async (payload: Pick<ChannelType, 'channel'>) => {
+        const { channel } = payload;
+        await axios.put(`/lock/${channel}/release/`);
+        return { channel: channel };
+    },
+);
+
 export const channelListSlice = createSlice({
     name: 'channelList',
     initialState,
@@ -152,6 +170,14 @@ export const channelListSlice = createSlice({
                 const info = getChannelInfoWithException(state, action.payload.channel);
                 info.inUse = action.payload.inUse;
             })
+            .addCase(tryLock.fulfilled, (state, action) => {
+                const info = getChannelInfoWithException(state, action.payload.channel);
+                info.hasLock = true;
+            })
+            .addCase(releaseLock.fulfilled, (state, action) => {
+                const info = getChannelInfoWithException(state, action.payload.channel);
+                info.hasLock = false;
+            })
     },
 });