diff --git a/wlm-ui/src/MainPage/Channel/ChannelList.tsx b/wlm-ui/src/MainPage/Channel/ChannelList.tsx index c97df8c..9089ad9 100644 --- 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 index 179d2aa..40e464e 100644 --- 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) => { + const { channel } = payload; + await axios.post(`/lock/${channel}/try/`); + return { channel: channel }; + }, +); + +export const releaseLock = createAsyncThunk( + 'channel/releaseLock', + async (payload: Pick) => { + 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; + }) }, });