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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  const keyEntryMachine = Machine({
  id: 'keyEntry',
  initial: 'ready',
  context: {
    entry: '',
  },
  states: {
    ready: {
      on: {
        ENTRY: {
          actions: [
            assign({
              entry: (ctx, event) => ctx.entry.concat(event.value),
            }),
          ],
        },
        COMMIT: 'commit',
      },
    },
    commit: {
      type: 'final',
      data: {
        input: (ctx, _event) => ctx.entry,
      },
    },
  },
})
  
  const fetchMachine = Machine({
      id: 'configMachine',
      initial: 'awaitingConfiguration',
      context: {
        configJson: '',
        playerId: '',
        facilityId: '',
        facilityName: '',
        playerInfo: {
          membershipValid: false,
          waiverValid: false,
          photoUrl: undefined,
          playerName: undefined,
        },
        error: null,
      },
      states: {
        awaitingConfiguration: {
          invoke: {
            id: 'keyEntry',
            src: keyEntryMachine,
            onDone: {
              target: 'configuring',
              actions: assign({
                configJson: (_ctx, event) => event.data.input,
              }),
            },
          },
          on: {
            ENTRY: {
              actions: send((_ctx, e) => ({ ...e }), { to: 'keyEntry' }),
            },
            COMMIT: {
              actions: send((_ctx, e) => ({ ...e }), { to: 'keyEntry' }),
            },
            AUTO_CONFIGURED: {
              actions: assign({
                facilityName: (_ctx, event) => {
                  return event.facilityInfo.name;
                },
                facilityId: (_ctx, event) => {
                  return event.facilityInfo.id;
                },
              }),
              target: 'awaitingPlayer',
            },
          },
        },
        configuring: {
          on: {
            '': [
              {
                target: 'awaitingPlayer',
                actions: [
                  assign({
                    facilityName: (ctx, _event) => {
                      const config = atob(ctx.configJson);
                      const parsed = JSON.parse(config);
                      return parsed.name;
                    },
                  }),
                ],
                cond: ctx => {
                  try {
                    if (ctx.configJson) {
                      // if it makes it here, proceed
                      return true;
                    }
                  } catch (error) {
                    console.error(error);
                    return false;
                  }
                  return false;
                },
              },
              { target: 'awaitingConfiguration' },
            ],
          },
        },
        awaitingPlayer: {
          invoke: {
            id: 'keyEntry',
            src: keyEntryMachine,
            onDone: {
              actions: assign({
                playerId: (_ctx, event) => event.data.input,
              }),
              target: 'confirmedEntry',
            },
          },
          on: {
            ENTRY: {
              actions: send((_ctx, e) => ({ ...e }), { to: 'keyEntry' }),
            },
            COMMIT: {
              actions: send((_ctx, e) => ({ ...e }), { to: 'keyEntry' }),
            },
          },
        },
        confirmedEntry: {
          on: { RESULT: 'playerResult', ERROR: 'error' },
          invoke: [
            {
              id: 'getMembership',
              src: async (context, _event) => {
                const result = await fetchUserInfo(context, client);
                if (result === null) {
                  return context;
                }

                if (typeof result === 'string') {
                  return context;
                }

                return { ...context, ...result };
              },
              onDone: {
                target: 'playerResult',
                actions: assign({
                  playerInfo: (_context, event) => event.data,
                }),
              },
              onError: {
                target: 'error',
                actions: assign({
                  error: (_context, event) => event.data,
                }),
              },
            },
          ],
          entry: ['scanSound'],
        },
        error: {
          entry: ['errorSound'],
          after: {
            4000: 'awaitingPlayer',
          },
          on: { RESET: 'awaitingPlayer' },
        },
        playerResult: {
          entry: ['resultSound'],
          after: {
            4000: 'awaitingPlayer',
          },
          on: { RESET: 'awaitingPlayer' },
        },
      },
    },
    {
      actions: {
        resultSound: (_context, event) => {
          const resultEvent = event;
          if (resultEvent.type === 'RESULT') {
            
          }
        },
        errorSound: (_context, _event) => {
          if ('development' !== process.env.NODE_ENV) {
            errorSound.play();
          }
        },
        scanSound: (_context, _event) => {
          scanSound.play();
        },
      },
    });