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, requestLogs } from './radioAPI';

export interface LoadingState {
    radio: boolean,
    logs: boolean,
}

export interface AppState {
    radio?: RadioState,
    logs?: Array<string>,
    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