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

machine.js

const opentokMachine = Machine({
    id: 'meeting',
    initial: 'entry',
    context: {
      sessionId: null,
      name: null,
      token: null,
      session: null,
      publisher: null,
      streams: null
    },
    states: {
      entry: {
        on: {
          ADD_NAME: {
            target: 'initialize',
            actions: assign({
              name: (ctx, e) => e.name
            })
          }
        }
      },
      initialize: {
        initial: 'pending',
        states: {
          pending: {
            invoke: {
              id: 'createToken',
              src: 'invokeCreateToken',
              onDone: {
                actions: 'assignToken'
              }
            },
            on: {
              '': [
                { actions: 'initPublisher', cond: (ctx) => !ctx.publisher },
                { actions: 'initSession', cond: (ctx) => !ctx.session }
              ],
              'PUBLISHER': {
                target: '#meeting.connect',
                actions: (ctx) => console.log("PULBISHER")
              }
            }
          }
        }
      },
      connect: {
        on: {
          '' : {target: ''}
        }
      }
    }
  },
  {
    actions: {
      assignToken: assign({ token: (ctx, e) => e.data.data.token }),
      initPublisher: assign({
        publisher: ctx => {
          let publisher = initPublisher({ insertDefaultUI: false, name: ctx.name });
          publisher.on('videoElementCreated', e => {
            assign({
              publisherVideo: "123"
            })
          });
          return publisher;
        }
      }),
      initSession: assign({
        session: (ctx, e) => {
          let session = initSession(REACT_APP_OPENTOK_APIKEY, ctx.sessionId);
          session.on('streamCreated', e => {
            // assign({ streams: ctx => ctx.push(session.subscribe(e.stream)) });
          })
          return session;
        }
      })
    },
    activities: {},
    services: {
      invokeCreateToken: async (ctx) => await createToken(ctx.sessionId)
    }
  }
);