JSFiddle - React, Tailwind, and code Playground

by Farzad YZ

JavaScript

const locationMachine = Machine({
  id: "locationSupport",
  initial: "location_pending",
  context: {
    error: "",
    zone: "OUT_OF_ZONES",
    watchId: -1
  },
  states: {
    location_pending: {
      on: {
        "": [{
            target: "location_supported",
            cond: "isLocationAvailable"
          },
          {
            target: "location_not_supported"
          }
        ]
      }
    },
    location_supported: {
      id: "zone",
      initial: "idle",
      states: {
        idle: {
          on: {
            DETECT_ZONE: {
              target: "pending"
            }
          }
        },
        pending: {
          invoke: {
            id: "detectZone",
            src: "detectZone",
            onDone: {
              target: "zone_available",
              actions: assign({
                zone: (_, e) => e.data
              })
            },
            onError: {
              target: "zone_error",
              actions: assign({
                error: (_, e) => e.data
              })
            }
          }
        },
        zone_available: {
          on: {
            REFRESH: {
              target: "pending"
            },
            SET_ZONE: {
              target: "zone_available",
              actions: [
                assign({
                  zone: (_, e) => e.data
                })
              ]
            },
            SET_ZONE_ERROR: {
              target: "zone_error",
              actions: assign({
                error: (_, e) => e.data
              })
            },
            SET_WATCH_ID: {
              actions: ["setWatchId"]
            }
          },
          id: "zoneWatch",
          initial: "not_watching",
          states: {
            not_watching: {
              on: {
                WATCH_LOCATION: {
                  target: "watching"
                }
              }
            },
            watching: {
              invoke: {
                id: "watchLocation",
    ...