import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; import { RootState, AppThunk } from '../../app/store'; import { RadioState, ConnectionState } from '../../app/types'; import { requestToStart, requestToStop, requestLogs } from './radioAPI'; export interface LoadingState { radio: boolean, logs: boolean, } export interface AppState { radio?: RadioState, logs?: Array, loading: LoadingState, connection: ConnectionState } const initialState: AppState = { radio: undefined, loading: { radio: false, logs: 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 requestLogsThunk = createAsyncThunk( 'radio/restStatus', async () => { return await requestLogs(); } ); export const radioSlice = createSlice({ name: 'radio', initialState, reducers: { toggleRadioLoading: (state) => { state.loading.radio = !state.loading.radio }, toggleLogsLoading: (state) => { state.loading.logs = !state.loading.logs }, 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.radio = true; return state; }) .addCase(requestToStartThunk.fulfilled, (state, action) => { state.loading.radio = false; if (action.payload) { state.radio = RadioState.STARTED; } return state; }) .addCase(requestToStopThunk.pending, (state, _) => { state.loading.radio = true; return state; }) .addCase(requestToStopThunk.fulfilled, (state, action) => { state.loading.radio = false; if (action.payload) { state.radio = RadioState.STOPPED; } return state; }) .addCase(requestLogsThunk.pending, (state, _) => { state.loading.logs = true; return state; }) .addCase(requestLogsThunk.fulfilled, (state, action) => { state.loading.logs = false; state.logs = action.payload; return state; }) }, }); export const { toggleRadioLoading, toggleLogsLoading, setRadioStarted, setRadioStopped, unsetRadio, toggleRadio, setConnected, setDisconnected, toggleConnection, } = radioSlice.actions; export const selectRadioLoading = (state: RootState) => state.globalState.loading.radio; export const selectLogsLoading = (state: RootState) => state.globalState.loading.logs; export const selectRadio = (state: RootState) => state.globalState.radio; export const selectLogs = (state: RootState) => state.globalState.logs; 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