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

machine.js

const getCurrentPosition = (context, event) =>
  new Promise((resolve, reject) => {
    let position;
    let options = null;
    if (!context.position) {
      return navigator.geolocation.getCurrentPosition(
        p => {
          const { coords, timestamp } = p;
          position = { coords, timestamp };
          resolve(position);
        },
        error => reject(error),
        options
      );
    }
  });

const setDateTime = assign((context, event) => {
  if (event.type === "START") {
    return {
      startDateTime: Date.now()
    };
  }

  if (event.type === "STOP") {
    return {
      endDateTime: Date.now()
    };
  }
});

const walkMachine = Machine(
  {
    id: "walk",
    initial: "idle",
    context: {
      startDateTime: 0,
      endDateTime: 0,
      position: null
    },
    states: {
      idle: {
        invoke: {
          id: "getPosition",
          src: getCurrentPosition,
          onDone: {
            target: "idle",
            actions: assign({
              position: (_, event) => {
                console.log("onDone", event);
                const { data } = event;
                return [data.coords.longitude, data.coords.latitude];
              }
            })
          }
        },
        on: {
          START: "walk"
        }
      },
      walk: {
        entry: "setDateTime",
        on: {
          TOGGLE: "pause",
          STOP: "stop"
        }
      },
      pause: {
        on: {
          TOGGLE: "walk"
        }
      },
      stop: {
        entry: "setDateTime",
        type: "final"
      }
    }
  },
  {
    actions: {
      setDateTime
    },
    guards: {}
  }
);