Need advice on how to construct my machine

[WoodyDark]

If you have to collect user input for starting_point and destination, then check for the distance via API (Promise), what would be the "xstate way" to do this?

At this point, I'm storing starting_point and destination in the context. And on rendering side of things, I'm just doing an if check to see if those values are present. I'm not sure if that's the FSM way of doing things.

In my head, I'm thinking that perhaps it should be implemented like below I can't wrap my head around how I would go about it.

{
  starting_point: {
   initial: 'no_selection',
    states: {
      no_selection: {},
      selected: {}
    }
  },
  destination: {
   initial: 'no_selection',
    states: {
      no_selection: {},
      selected: {}
    }
  }
}

[Blacktiger]

Will the distance check be triggered by the user or automatically run while the user edits the form if both fields are valid?

[WoodyDark]

Will the distance check be triggered by the user or automatically run while the user edits the form if both fields are valid?

the distance check should trigger automatically if both fields are valid

[Blacktiger]

In that case, I'd use a valid and invalid state. On entry into the valid state you can trigger a service to fetch the distance by using substates (probably called loading and loaded). Then when you get an event changing either of the values you transition back into the valid state and re-trigger the service.