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

machine.js

const roomMachine = Machine({
    id: '100ms rooms',
    initial: 'home',
    context: {
      isPermissionGiven: false,
      isNew: true
    },
    states: {
      home: {
        on: {
          CREATE: 'create_room',
          JOIN: 'join_room'
        }
      },
      create_room: {
        on: {
          BACK: 'home',
          CREATE: [
            {
              target: 'permission',
              cond: context => !context.isPermissionGiven
            },
            {
              target: 'preview',
              cond: context => context.isPermissionGiven && context.isNew
            },
            {
              target: 'room',
              cond: context => context.isPermissionGiven && !context.isNew
            }
          ]
        }
      },
      join_room: {
        on: {
          BACK: 'home',
          JOIN: [
            {
              target: 'permission',
              cond: context => !context.isPermissionGiven
            },
            {
              target: 'preview',
              cond: context => context.isPermissionGiven && context.isNew
            },
            {
              target: 'room',
              cond: context => context.isPermissionGiven && !context.isNew
            }
          ]
        }
      },
      permission: {
        on: {
          ALLOW: {
            target: 'preview',
            actions: assign({
              isPermissionGiven: true
            })
          },
          BLOCK: {
            target: 'permission',
            actions: assign({
              isPermissionGiven: false
            })
          }
        }
      },
      preview: {
        on: {
          JOIN: {
            target:'room',
            actions: assign({
              isNew: false
            })
          },
          BACK: 'join_room'
        }
      },
      room: {
        on: {
          LEAVE: 'home',
          RELOAD: 'room'
        }
      },
      url: {
        on: {
          CLICK: [
            {
              target: 'permission',
              cond: context => !context.isPermissionGiven
            },
            {
              target: 'room',
              cond: context => context.isPermissionGiven && !context.isNew
            },
            {
              target: 'preview',
              cond: context => context.isPermissionGiven && context.isNew
            }
          ]
        }
      }
    }
  });