Generated by XState Viz: https://xstate.js.org/viz

machine.js

const machine = Machine(
    {
        id: 'call',
        context: {
            participants: [],
            color: '#fff',
        },
        initial: 'idle',
        states: {
            idle: {
                on: {
                    CONNECTED: 'inProgress',
                },
            },
            inProgress: {
                initial: 'active',
                states: {
                    active: {
                        on: {
                            HOLD: 'onHold',
                        },
                    },
                    onHold: {
                        on: {
                            RESUME: 'active',
                        },
                    },
                },
                on: {
                    HANG_UP: 'wrapUp',
                    ADD_PARTICIPANT: { actions: ['addParticipant'] },
                    CHANGE_COLOR: {
                        actions: ['changeColor'],
                    },
                },
            },
            wrapUp: {
                on: {
                    RECORD_OUTCOME: 'idle',
                },
            },
        },
    },
    {
        actions: {
            // @ts-ignore
            addParticipant: assign((context, event) => ({
                participants: ['a'],
            })),
            // @ts-ignore
            changeColor: assign((context, event) => ({
                color: '#eee',
            })),
        },
        activities: {
            // TODO: fill this in
            // @ts-ignore
            listeningToSocket: (context, event) => {
                // listen to Twilio websocket
                return () => {
                    // clean up websocket
                };
            },
        },
    }
);