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

machine.js

const activeTripMachine = Machine(
  {
    id: 'activeTrip',
    initial: 'inactive',
    context: {
      trip: null,
    },
    states: {
      inactive: {
        invoke: {
          src: 'onCheckLastTrip',
        },
        on: {
          START_TRIP: 'starting',
          RESTART: 'active',
          SERVER_STOP: 'stoppedByServer',
        },
      },
      starting: {
        invoke: {
          id: 'startingTrip',
          src: 'startTrip',
          onDone: 'active',
          onError: {
            target: 'inactive',
            actions: 'onShowError',
          },
        },
      },
      active: {
        initial: 'updating',
        entry: 'onSaveActiveTripToStore',
        on: {
          END_TRIP: 'stopping',
          SERVER_STOP: 'stoppedByServer',
        },
        states: {
          polling: {
            invoke: {
              id: 'getActiveTrip',
              src: 'getActiveTrip',
              onDone: 'updating',
            },
          },
          updating: {
            entry: 'onUpdateTrip',
            after: {
              POLLING_INTERVAL: 'polling',
            },
          },
        },
      },
      stopping: {
        type: 'parallel',
        onDone: 'showingTripSummary',
        invoke: {
          id: 'stoppingTrip',
          src: 'stopTrip',
          onDone: {
            actions: [send('PAID'), 'onUpdateTrip'],
          },
          onError: {
            actions: 'onPaymentFailed',
            target: 'active',
          },
        },
        states: {
          endTrip: {
            initial: 'paying',
            states: {
              paying: {
                on: {
                  PAID: 'paid',
                },
              },
              paid: {
                entry: 'onRemoveActiveTripFromStore',
                type: 'final',
              },
            },
          },
          parking: {
            initial: 'takingAPhoto',
            states: {
              takingAPhoto: {
                on: {
                  PARKED: '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),
      }),
      onPaymentFailed: (ctx, e) => {
        console.log(
          '==================== onPaymentFailed ============================',
        );
        console.log(ctx);
        console.log(e);
        console.log('================================================');
      },
    },
  },
);