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 fetchMachine = Machine({
    id: 'fetch',
    initial: 'start',
    context: {
      query: '',
      restaurantAddress: {
        address1: null,
        city: null,
        country: null,
        postalCode: null,
      },
      isManualFormOpen: false,
    },
    states: {
      start: {
        on: {
          TYPE: {
            target: 'filledButNotSelected',
            actions: assign({
              query: () => '1400',
            }),
          },
        }
      },
      filledButNotSelected: {
        on: {
          SELECT: {
            target: 'filledAndSelected',
            actions: assign({
              query: () => '1400 Broadway, New York, NY 10018, USA',
              restaurantAddress: () => ({
                address1: "1400 Broadway",
                city: "New York",
                country: "US",
                postalCode: "10018",
              })
            }),
          },
          PREFER_MANUAL_INPUT: {
            target: 'manualInputFormOpened',
            actions: assign({
              isManualFormOpen: () => true,
            }),
          },
          TAP_OUT: 'idle',
        },
      },
      filledAndSelected: {
        on: {
          TAP_OUT: 'idle',
          TYPE: 'filledButNotSelected',
        }
      },
      manualInputFormOpened: {
        on: {
          MANUAL_INPUT_CHANGE: {
            target: 'manualInputFormFilled',
            actions: assign({
              restaurantAddress: () => ({
                address1: "1400 Broadway"
              })
            }),
          },
          MANUAL_MODAL_BACK_BUTTON: {
            target: 'filledAndSelected',
            actions: assign({
              isManualFormOpen: () => false,
            }),
          },
          MANUAL_MODAL_SUBMIT_BUTTON: {
            target: 'filledAndSelected',
            actions: assign({
              isManualFormOpen: () => false,
            }),
          },
        }
      },
      manualInputFormFilled: {
        on: {
          MANUAL_MODAL_BACK_BUTTON: {
            target: 'filledAndSelected',
            actions: assign({
              isManualFormOpen: () => false,
            }),
          },
          MANUAL_MODAL_SUBMIT_BUTTON: {
            target: 'filledAndSelected',
            actions: assign({
              isManualFormOpen: () => false,
            }),
          },
        },
      },
      idle: {
        on: {
          TYPE: 'filledButNotSelected',
        }
      }
    }
  });