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

machine.js

const fooMachine = Machine({
  id: 'foo',
  initial: 'loading',

  // Local context for entire machine
  context: {
    retries: 0,
    activeFilter: {},
  },

  // State definitions
  states: {
    loading: {
      entry: 'handleLoading',
      on: {
        RESOLVE: { target: 'loaded' },
        REJECT: { target: 'failure' },
      },
      meta: {
        message: 'Please wait.....'
      }
    },
    loaded: {
      type: 'compound',
      initial: 'all', // Initial child state
      on: {
        FILTER: {
          target: 'loaded.filtering',
          actions: 'handleFilter',
        },
      },
          
      // Child states
      states: {
        all: {},
        filtering: {
          on: {
            RESOLVE_FILTER: {
              target: 'filtered',
            }
          }
        },
        filtered: {
          on: {
            RESET: {
              target: 'all',
            },
          }
        },
      },
    },
    failure: {
      on: {
        RETRY: { 
          target: 'loading',
          actions: 'addRetry',
        } 
      },
      meta: {
        message: 'The request failed.'
      }
    },
  }
}, {
	actions: {
		// action implementation
		handleFilter: (context, event) => {
		  // ?? send, cancel?
		  // ...
		},
		handleLoading: (context, event) => {
		  console.log('hmm', context, event); // context: retries, fruit
		},
		addRetry: assign({
		  retries: (context) => context.retries + 1,
		  fruit: '🍌', // pass this prop to the next (receiving) state
		}),
	},
	activities: {},
	delays: {},
	guards: {},
	services: {}
});

// yang bisa difilter:
// - cities
// - ages
// - registration
// - targetGroups

// Example state
// const someState = fooMachine.transition('loaded.filtering', {
//   type: 'APPLY_FILTER', fruit: '🍏',
// });
// console.log("??", someState);

// Good discussion: https://github.com/davidkpiano/xstate/issues/434