broadcast/ui/src/features/radio/radioSlice.ts

113 lines
3.7 KiB
TypeScript
Raw Normal View History

2023-03-07 00:56:35 +01:00
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { RootState, AppThunk } from '../../app/store';
import { RadioState, ConnectionState } from '../../app/types';
import { requestToStart, requestToStop } from './radioAPI';
export interface AppState {
radio?: RadioState,
loading: boolean,
connection: ConnectionState
}
const initialState: AppState = {
radio: undefined,
loading: false,
connection: ConnectionState.DISCONNECTED,
};
export const requestToStartThunk = createAsyncThunk(
'radio/restStart',
async () => {
const success = await requestToStart();
return success;
}
);
export const requestToStopThunk = createAsyncThunk(
'radio/restStop',
async () => {
const success = await requestToStop();
return success;
}
);
export const radioSlice = createSlice({
name: 'radio',
initialState,
reducers: {
toggleLoading: (state) => { state.loading = false ? state.loading : true },
setRadioStarted: (state) => { console.log("[Redux] STARTED"); state.radio = RadioState.STARTED },
setRadioStopped: (state) => { console.log("[Redux] STOPPED"); state.radio = RadioState.STOPPED },
unsetRadio: (state) => { state.radio = undefined },
toggleRadio: (state) => {
if (state.radio === RadioState.STARTED) {
state.radio = RadioState.STOPPED
} else if (state.radio === RadioState.STOPPED) {
state.radio = RadioState.STARTED
}
},
setConnected: (state) => { state.connection = ConnectionState.CONNECTED },
setDisconnected: (state) => { state.connection = ConnectionState.DISCONNECTED },
toggleConnection: (state) => {
if (state.connection === ConnectionState.CONNECTED) {
state.connection = ConnectionState.DISCONNECTED
} else if (state.connection === ConnectionState.DISCONNECTED) {
state.connection = ConnectionState.CONNECTED
}
},
},
extraReducers: builder => {
builder
.addCase(requestToStartThunk.pending, (state) => {
state.loading = true;
return state;
})
.addCase(requestToStartThunk.fulfilled, (state, action) => {
state.loading = false;
if (action.payload) {
state.radio = RadioState.STARTED;
}
return state;
})
.addCase(requestToStopThunk.pending, (state, _) => {
state.loading = true;
return state;
})
.addCase(requestToStopThunk.fulfilled, (state, action) => {
state.loading = false;
if (action.payload) {
state.radio = RadioState.STOPPED;
}
return state;
})
},
});
export const {
toggleLoading,
setRadioStarted,
setRadioStopped,
unsetRadio,
toggleRadio,
setConnected,
setDisconnected,
toggleConnection,
} = radioSlice.actions;
export const selectLoading = (state: RootState) => state.globalState.loading;
export const selectRadio = (state: RootState) => state.globalState.radio;
export const selectConnection = (state: RootState) => state.globalState.connection;
export const toggleRadioState =
(): AppThunk =>
async (dispatch, getState) => {
const currentRadioState = selectRadio(getState());
if (currentRadioState === RadioState.STARTED) {
dispatch(requestToStopThunk());
} else if (currentRadioState === RadioState.STOPPED) {
dispatch(requestToStartThunk());
}
};
export default radioSlice.reducer