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: 'ride_creator',
  initial: 'idle',
  context: {
  isScreenReaderEnabled: false,
  hasLocationPermission: false,
  arrivalLocation: null,
  departureLocation: null,
  datetime: {
    recurringDates: [],
    departureDateTime: undefined,
    returnDateTime: undefined,
  },
  companions: [
    {
      id: new Date().getTime(),
      name: 'Me',
      seatType: 'standard',
      concession: {
        name: '',
        image: '',
      },
      luggage: [],
    },
  ],
},
  states: {
    idle: {
      on: {
        RESOLVE: {
          target: 'ready',
          actions: assign({
            isScreenReaderEnabled: (context, event) => event.isScreenReaderEnabled,
            hasLocationPermission: (context, event) => event.hasLocationPermission,
            companions: (context, event) => event.companions,
          }),
        },
      },
    },
    ready: {
      on: {
        SET_DEPARTURE: [
          {
            target: 'departureMap',
            cond: (context) => !context.isScreenReaderEnabled,
          },
          'departureList',
        ],
        SET_ARRIVAL: [
          {
            target: 'arrivalMap',
            cond: (context) => !context.isScreenReaderEnabled,
          },
          'arrivalList',
        ],
        SET_SUMMARY: [
          {
            target: 'summary',
            cond: (context) =>
              !!context.arrivalLocation &&
              !!context.departureLocation &&
              !!context.datetime.departureDateTime &&
              context.companions.length > 0,
          },
          'arrivalMap',
        ],
      },
    },
    departureMap: {
      on: {
        SET_DEPARTURE_LIST: 'departureList',
        SET_ARRIVAL: {
          target: 'arrivalMap',
          actions: assign({
            departureLocation: (context, event) => event.departureLocation,
          }),
        },
        NEXT: [
          {
            target: 'summary',
            cond: (context) => !!context.arrivalLocation,
            actions: assign({
              departureLocation: (context, event) => event.departureLocation,
            }),
          },
          {
            target: 'arrivalMap',
            actions: assign({
              departureLocation: (context, event) => event.departureLocation,
            }),
          },
        ],
      },
    },
    departureList: {
      on: {
        SET_DEPARTURE_MAP: 'departureMap',
        SET_ARRIVAL: {
          target: 'arrivalList',
          actions: assign({
            departureLocation: (context, event) => event.departureLocation,
          }),
        },
        NEXT: [
          {
            target: 'summary',
            cond: (context) => !!context.arrivalLocation,
            actions: assign({
              departureLocation: (context, event) => event.departureLocation,
            }),
          },
          {
            target: 'arrivalMap',
            cond: (context) => !context.isScreenReaderEnabled,
            actions: assign({
              departureLocation: (context, event) => event.departureLocation,
            }),
          },
          {
            target: 'arrivalList',
            actions: assign({
              departureLocation: (context, event) => event.departureLocation,
            }),
          },
        ],
      },
    },
    arrivalMap: {
      on: {
        SET_ARRIVAL_LIST: 'arrivalList',
        NEXT: {
          target: 'departureMap',
          actions: assign({
            arrivalLocation: (context, event) => event.arrivalLocation,
          }),
        },
      },
    },
    arrivalList: {
      on: {
        SET_ARRIVAL_MAP: 'arrivalMap',
        NEXT: [
          {
            target: 'departureMap',
            cond: (context) => !context.isScreenReaderEnabled,
            actions: assign({
              arrivalLocation: (context, event) => event.arrivalLocation,
            }),
          },
          {
            target: 'departureList',
            actions: assign({
              arrivalLocation: (context, event) => event.arrivalLocation,
            }),
          },
        ],
      },
    },
    companions: {
      on: {
        SET_SUMMARY: 'summary',
        NEXT: {
          target: 'summary',
          actions: assign({
            companions: (context, event) => event.companions,
          }),
        },
      },
    },
    picker: {
      on: {
        SET_SUMMARY: 'summary',
        NEXT: {
          target: 'summary',
          actions: assign({
            datetime: (context, event) => event.datetime,
          }),
        },
      },
    },
    summary: {
      on: {
        SET_PICKER: 'picker',
        SET_COMPANIONS: 'companions',
        SET_ARRIVAL: [
          {
            target: 'arrivalMap',
            cond: (context) => !context.isScreenReaderEnabled,
          },
          'arrivalList',
        ],
        SWAP_ADDRESSES: {
          actions: assign({
            arrivalLocation: (context) => context.departureLocation,
            departureLocation: (context) => context.arrivalLocation,
          }),
        },
        NEXT: [
          {
            target: 'confirmed',
            cond: (context) => !!context.datetime.departureDateTime && context.companions.length > 0,
          },
          {
            target: 'picker',
          },
        ],
      },
    },
    confirmed: {
      on: {
        SET_SUMMARY: 'summary',
      },
    },
  },
});