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

machine.js

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

const initialState = {
	selectedFilters: [],
	searchedFilters: [],
	searchTerm: "",
	page: 1,
	retries: 0,
};

const fetchMachine = Machine({
	id: "peopleFilters",
	initial: "closed",
	context: Object.assign({}, initialState),
	states: {
		closed: {
			on: {
				OPEN: "open",
				SEARCH: 'loading'
			},
		},
		open: {
			on: {
				CLOSE: "closed",
				SELECT: {
					actions: assign({
						selectedFilters: context => [...selectedFilters, context.filter]
					})
				},
				UNSELECT: {
					actions: assign({
						selectedFilters: context => [...selectedFilters].filter(item => item !== context.filter)
					})
				},
				SEARCH: 'loading'
			},
		},
		loading: {
			on: {
				SUCCESS: {
					target: "closed"
				},
				FAILURE: {
					target: "failure"
				}
			}
		},
		failure: {
			on: {
				RETRY: {
					target: "loading",
					actions: assign({
						retries: (context, event) => context.retries + 1
					})
				}
			}
		}
	},
	on: {
		RESET: {
			target: 'closed',
			actions: assign(Object.assign({}, initialState))
		},
		VIEW_MORE: {
			target: 'loading',
			actions: assign({
				page: (context, event) => context.page + 1
			})
		}
	},
});