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

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