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

machine.js

const activeTripMachine = Machine(
  {
    id: 'activeTrip',
    initial: 'inactive',
    context: {
      trip: null,
      errorCode: null,
    },
    states: {
      inactive: {
        invoke: {
          src: 'apiCheckLastTrip',
        },
        on: {
          START_TRIP: 'starting',
          RESTART_LAST_TRIP: {
            actions: 'onSaveActiveTripToStore',
            target: 'active',
          },
          SERVER_STOP: 'stoppedByServer',
        },
      },
      starting: {
        invoke: {
          id: 'startingTrip',
          src: 'apiStartTrip',
          onDone: {
            actions: 'onSaveActiveTripToStore',
            target: 'active',
          },
          onError: {
            target: 'inactive',
            actions: 'onShowError',
          },
        },
      },
      active: {
        initial: 'polling',
        on: {
          END_TRIP: '.checkingIfParkingIsValid',
          SERVER_STOP: 'stoppedByServer',
        },
        states: {
          polling: {
            initial: 'updating',
            states: {
              getActiveTrip: {
                invoke: {
                  id: 'apiGetActiveTrip',
                  src: 'apiGetActiveTrip',
                  onDone: 'updating',
                },
              },
              updating: {
                entry: 'onUpdateTrip',
                after: {
                  POLLING_INTERVAL: 'getActiveTrip',
                },
              },
            },
          },
          checkingIfParkingIsValid: {
            invoke: {
              id: 'canPark',
              src: 'apiCanParkCheck',
            },
            on: {
              CAN_PARK: '#activeTrip.endTrip',
              CANNOT_PARK: {
                actions: 'onSetErrorCode',
                target: 'cannotEndRide',
              },
            },
          },
          cannotEndRide: {
            onExit: 'onSetErrorCode',
            on: {
              CONTINUE_TRIP: 'polling',
              END_TRIP: '#activeTrip.endTrip',
            },
          },
        },
      },
      endTrip: {
        id: 'endTrip',
        type: 'parallel',
        onDone: 'showingTripSummary',
        states: {
          payment: {
            initial: 'paying',
            states: {
              paying: {
                invoke: {
                  src: 'apiStopTrip',
                  onDone: {
                    actions: 'onUpdateTrip',
                    target: 'paid',
                  },
                },
                on: {
                  CANNOT_PARK: {
                    actions: 'onSetErrorCode',
                    target: '#activeTrip.active.cannotEndRide',
                  },
                },
              },
              paid: {
                entry: 'onRemoveActiveTripFromStore',
                type: 'final',
              },
            },
          },
          parking: {
            initial: 'takingAPhoto',
            states: {
              takingAPhoto: {
                on: {
                  PARK: 'parked',
                },
              },
              parked: {
                type: 'final',
              },
            },
          },
        },
      },
      stoppedByServer: {
        entry: ['onUpdateTrip', 'onRemoveActiveTripFromStore'],
        on: {
          NEXT: 'showingTripSummary',
        },
      },
      showingTripSummary: {
        on: {
          NEXT: 'inactive',
        },
      },
    },
  },
  {
    delays: {
      POLLING_INTERVAL: 15000,
    },
    actions: {
      onUpdateTrip: assign({
        trip: ({ trip }, { data }) => (data ? data.trip : trip),
      }),
      onSetErrorCode: assign({
        errorCode: (_, { errorCode }) => errorCode,
      }),
    },
  },
);